vue3相关

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框架一样要按需引入

这里的wacth函数接收两个参数，第一个参数是我们要检测的值，第二个是回调函数，和以前一样拥有新旧两个值

同时，vue3的watch支持同时监听多个值，以数组的形式:

import {watch} from 'vue'

watch([a, b], ([newValA, newValB], [oldValA, oldValB]) => {
    console.log(newValA, newValB, '===', oldValA, oldValB)
})

监听多个值，对应的回调函数的形参里的新旧值就也是多个，这样的监听会让我们的业务做某些对比判断的时候更加的灵活

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的写法