生命周期的变化
| Vue2.x | Vue3 |
|---|---|
| beforeCreate | |
| created | |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
Tips：
1.setup会在created之前执行
2.setup定义响应式数据(ref单值)
在setup中返回一个ref()处理的数据
在视图中正常用{{a}} (不需要 .value)
如果要修改这个值：a：在setup中暴露一个函数，直接去修改 .value
b：在methods中定义一个方法，在此方法内部通过this.xx=新值来修改
3.setup定义响应式数据(reactive对象)
在setup中返回一个reactive()处理的对象obj
在视图中正常用插值，要加上obj
如果要修改这个值：a：在setup中暴露一个函数，直接去修改
b：在methods中定义一个方法，在此方法内部通过this.xx=新值来修改
4.setup返回响应式数据(reactive对象+toRefs)
setup() {
// reactive: 会对对象进行包装
// 它其实是用proxy代理了这个对象,只是第一个级别，所以不能直接解构
// 如果直接解构，就会失去响应式的特性
// 这里再用toRefs来包装一下
const obj = reactive({b: 1, arr: [1,2]})
const f1 = () => { obj.b = 200}
const f2 = () => { obj.arr.push(3)}
return { ...toRefs(obj), f1, f2 }
}
5.setup定义计算属性
setup() {
// reactive: 会对对象进行包装
const obj = reactive({b: 1})
// 通过computed来创建计算属性
const doubleB = computed(()=>{
return 2*obj.b
})
return { obj, doubleB }
}
6.setup中使用watch
setup() {
// reactive: 会对对象进行包装
const obj = reactive({b: 1})
const a = ref(0)
// 通过watch来监听
watch(() => obj.b ,()=>{
console.log(`obj.b变化了`)
})
watch(a, ()=>{
console.log(`a变化了`)
})
return { obj, a }
}
多根节点(fragment)
vue2需要去将组件包裹在div中,否则会报错警告
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
vue3,组件可以包含多个根节点
<template>
<header>...</header>
<main>...</main>
<footer>...</footer>
</template>
异步组件
vue3提供Suspense组件，若想在setup中调用异步请求，需要在setup前加async关键字。这时会 受到警告，需要在父页面调用当前组件外包裹一层Suspense组件
组合式API
vue2是选项式API(option API),一个逻辑会散乱在文件不同位置(data,props,computed,watch,生命周期函数等)，代码可读性差
vue3是组合式API(Composition API)，可将同一逻辑内容写到一起，增强了代码的可读性，内聚性，还提供了较为完美的逻辑复用性方案，可以解决vue2Mixin的存在命名冲突隐患，依赖关系不明确，不同组件间配置化使用不够灵活
响应式原理
vue2的响应式原理基础是Object.defineProperty：通过里面的getter和setter方法，进行查看和数据的修改，通过发布、订阅者模式进行数据与视图的响应式
vue2双向绑定缺点：
1.不能监听对象的新增属性和删除属性
2.无法正确的监听数组方法，当监听的下标对应的数据发生改变时
解决方法：
1.重写数组或对象
2.vue中通过this.$set(目前属性，新增的属性，新增的值)来解决
vue3 响应式原理基础是Proxy：
对于基本类型数据：响应式依然是靠Object.defineproperty()的get()和set()来完成的
对于对象类型数据：
通过Proxy代理：拦截对象中任意属性的变化，包括属性值的读写，添加，删除等操作
通过Reflect反射函数进行操作
