v3使用composition api:
概括理解将state、methods、computed等代码统一放到setup中写
官网手册:API | Vue.js
v2 和 v3语法比较 这里V3指3.2以后的新语法
vue2 | Vue3 |
---|---|
data 中定义 | setup 中 let data = Vue.ref(原始类型) |
data 中定义 | setup 中 let data = Vue.reactive(对象类型) |
data 同级定义watch | setup 中 Vue.watch(数据, callback) => 细节特别多具体手册或百度 |
data 同级定义computed | setup 中 let data = Vue.computed(callback) |
data 同级定义computed | setup 中 let data = Vue.computed({ set:fn, get: fn }) |
created、mounted | Vue.onMounted |
props | const props = Vue.defineProps(数组或对象) |
$emit | const emit = defineEmits(['change', 'delete']); emit('change', 数据1, ..., 数据n) |
插槽 | <slot></slot> 额外hooks: useSlots, useAttrs |
组件实例 | 1-标签写 ref="唯一标识" 2- const 唯一标识 = Vue.ref() 3- 通过 唯一标识.value获取DOM |
切记script setup语法糖中组件数据是私有的defineExpose暴露给父组件 | |
路由 | import { useRouter, useRoute } from 'vue-router' |
const router = useRouter(), route = useRoute(); | |
状态 |
注:v3中定义变量是普通数据,通过ref才可以返回响应式对象数据 针对于响应式对象数据,视图不用加.value直接显示,但是js中必须加.value才可以获取