数据初始化不同
- vue2: 数据一般放在data函数中
data() {
return {
test: ''
}
}
- vue3: 新增setup函数，在setup中采用ref、reactive初始化
setup() {
// ref方式声明
const test = ref(["hh", "dd", "ff"]); // ref声明数组
const test1 = ref('') // ref声明空字符串
test1.value = "lalalalla"
// reactive方式声明
const data = reactive({
test2: ["hh", "dd", "ff"],
test3: "",
});
data.test3 = data.test2[0];
/**
* toRef: 接收对象的具体属性
* toRefs: 接收对象
*/
注意：
1. ref定义的数据，改变值时需要获取value，例如上述代码中修改test1的值：test1.value = "lalalalala"
2. reactive中则不需要通过value赋值
3: ref和reactive在使用之前都是需要import
4: 在组件中需要被html使用到的数据需要returun, 示例中的data如需要暴露出去可以采用 : return {...toRefs(data)} ,注意 toRefs也是需要import
生命周期不同
-
vue2
vue2生命周期.png -
vue3 可以使用vue2的所有生命周期，但推荐使用vue3特有的生命周期 需要注意的是，vue3生命周期都在setup中,周期函数也需要在import中导入
vue3生命周期与vue2对比.png
