vue3 script setup 语法糖

Loong Panda

函数

点击

计算属性(computed)

观察属性(watch)

父子组件传值 props 和 emit

子组件 {{ dataId }} // 展示父级传递过来的参数 更新父组件

七、双向绑定 v-model

子组件

我叫{{ modelValue }},今年{{ age }}岁

// import { defineEmits, defineProps } from ‘vue’

// defineEmits和defineProps在

路由守卫

全局状态管理器

原型挂载/绑定与使用

----绑定--------------------------------------------------------------------// main.jsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)// 获取原型const prototype = app.config.globalProperties// 绑定参数prototype.$ajax = ajax----使用--------------------------------------------------------------------

生命周期

vue3和vu2周期最大的区别是vue3用setup替代了beforeCreate 和 created,通俗的说fa就是说原来在beforeCreate 和 created写的代放在码在setup里就行了。其他的周期使用前缀“on”,

比如: onMounted(() => {})

选项式 API

Hook inside setup

beforeCreate

Not needed*

created

Not needed*

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeUnmount

onBeforeUnmount

unmounted

onUnmounted

errorCaptured

onErrorCaptured

renderTracked

onRenderTracked

renderTriggered

onRenderTriggered

activated

onActivated

deactivated

onDeactivated