vue3的生命周期
| vue2 | vue3 | 差异比较 |
|---|---|---|
| beforeCreate | setup | setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method |
| created | setup | |
| beforeMount | onBeforeMount | 组件挂载到节点上之前执行的函数 |
| mounted | onMounted | 组件挂载完成后执行的函数 |
| beforeUpdate | onBeforeUpdate | 组件更新之前执行的函数 |
| updated | onUpdated | 组件更新完成之后执行的函数 |
| beforeDestroy | onBeforeUnmount | 卸载之前执行的函数，相比改名了 |
| destroyed | onUnmounted | 卸载之后执行的函数 |
| activated | onActivated | 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 |
| deactivated | onDeactivated | 比如从 A 组件，切换到 B 组件，A 组件消失时执行 |
| errorCaptured | onErrorCaptured | 当捕获一个来自子孙组件的异常时激活钩子函数 |
| onRenderTracked | vue3新增的周期用于开发调试使用的 | |
| onRenderTriggered | vue3新增的周期用于开发调试使用的 |
- vue2的beforeCreate和create变成了setup
- 除了setup外大部分还是vue2的名字，只是在前面加了个on
- vue2的destroyed和beforDestroy变成了onUnmounted（尤大的解释是Unmounted更加语义化，卸载的意思比vue2的销毁更加形象）
- 关于调试函数，目前官方文档也没有过多讲解
vue3的watch的变化和watchEffect()
在vue2里面采用的是一个对象的形式，然后在里面去监听不同的值，在vue3已经发生了改变：
import {watch} from 'vue'
watch(a, (newVal, oldVal) => {
console.log(newVal, '===', oldVal)
})
vue3的watch基础用法已经改变，想要使用watch，必须先引入，vue3现在的语法类似各类ui框架一样要按需引入</br>
这里的wacth函数接收两个参数，第一个参数是我们要检测的值，第二个是回调函数，和以前一样拥有新旧两个值</br>
同时，vue3的watch支持同时监听多个值，以数组的形式:
import {watch} from 'vue'
watch([a, b], ([newValA, newValB], [oldValA, oldValB]) => {
console.log(newValA, newValB, '===', oldValA, oldValB)
})
监听多个值，对应的回调函数的形参里的新旧值就也是多个，这样的监听会让我们的业务做某些对比判断的时候更加的灵活</br>
watchEffect是vue3提出的一个新的API:
import {watchEffect} from 'vue'
watchEffect(() => console.log(name))
它是一个方法，接收一个回调函数，他不需要去指定监听谁，它会去自动收集依赖，只要在回调函数中使用了的属性，在发生变化的时候，都会去触发这个回调函数，这样就会变得非常简单，在业务中，我们不必去特意的监听某某属性，而是直接把他写在其回调函数中，就可以自动帮我们收集依赖
其它
-
Composition API
- Compositon API不是一个api，而是很多个API组合的一套API，我们统称为这名字，vue2中,我们会在methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为Options API，这样的方式在项目过大的时候我们发现，一个methods定义数十个方法的时候，还得准备知道每个方法的this，作用，干嘛的就会变得非常麻烦，而Composition API就是解决这个问题的
- vue3 Composition API中，我们的代码是根据逻辑功能来组织的，一个功能所定义的所有api会放在一起（更加的高内聚，低耦合），这样做，即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API
createApp()
vue2中是使用new Vue的方式，vue3使用createApp的方式，本质是没有太大的区别，但是呢，在之前我们每次注册一些全局的组建，mixin，plugins，prototype等，都会是这样的方式，Vue.mixin(...xxx)这样的方式，会造成，全局只有一个app的实例，这样就会造成实例污染，而在vue3中，createApp会返回一个全新的app，可以很好的避免这个问题Vue3如何注册全局组件
app.component('componentName', component)
- Vue3如何注册自定义指令
/** v-snine */
app.directive('snine', {
inserted: function (el) {
el.snine()
},
})
- Vue3如何全局混入
const app = createApp(App)
app.mixin({
beforeCreate() {
console.log('我是全局mixin')
},
})
- Vue3如何全局挂载属性和方法
const app = createApp(App)
// 全局ctx(this) 上挂载 $axios 需要挂载在globalProperties
app.config.globalProperties.$axios = axios
Vue3已经移除了filter
Vue2和Vue3的生命周期可以混用
Vue3中可以使用vue2的写法
