一、vue3
1、生命周期
生命周期的钩子函数添加了前缀on，销毁组件的方法更换了名字
beforeDestroy -> beforeUnmountdestroyed -> unmouted
2、全局变量
Vue.prototype.$http = ''
//vue3
const app = createApp({});
app.config.globalProperties.$http = ''3、vue实例化
//vue3 通过createApp创建vue实例化
createApp(App, {}).use(store).use(router).mount('#app')
//vue2
const app = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');4、插槽
//vue2
5、自定义指令
// vue2
Vue.directive('focus',{
bind()//初始调用一次
update()//
unbind()//解绑调用
inserted: function(e){
e.focus();
}
})
//vue3
const app = createApp({});
app.directive('focus',{
mounted(el){
el.focus()
}
})
//调用
6、v-model升级
变更：自定义组件使用v-model，事件及名称发生变化，v-bind.async去掉了async
新增：同一组件可配置多个v-model
新增：可自定义v-model修饰符
// vue2
//默认绑定在value属性上
// 如果需要对一个prop进行双向绑定，如dialog，外部可以控制组件显示或隐藏，组件内部关闭visible属性隐藏，同时将visible同步给外部，可以通过update:visible
this.$emit('update:visible', false)
// 父组件通过事件进行监听@update:visible/:visible.sync
// vue3
// 需要绑定多个v-model，只需要给v-model传递一个参数
7、异步组件
vue3使用defineAsyncComponent定义异步组件，配置选项component替换为loader，loader函数本身不接收resolve和reject，且必须返回一个promise
8、组合式API
组合式API：
生命周期钩子函数、computed、watch、watchEffect
reactive、ref、toRefs
（1）setup
vue3新增的选项，组件使用组合式API的入口
setup执行在beforeCreate之前。
接收两个参数：props、context
// props传入的属性，响应式的，因此不能用es6解构
setup(props) {
const {name} = props;
const t = reactive({count: 0})
return {
t
}
}（2）ref、toRefs、readonly、reactive
vue3通过ref、reactive定义数据
vue2在data里面定义数据
reactive 用于处理对象的双向绑定ref 处理js或对象的双向绑定
在使用的时候person.name...，有时候会觉得很繁琐，可以通过解构后使用数据toRefs用于将reactive对象转化为ref对象的普通对象readonly用于防止数据被修改
setup(props) {
const {name} = props;
// 声明基本类型
const num = ref(0);
const test = readonly(num);// 只读
// 声明对象
const person = ref({name: 'haha'})
// 使用reactive声明对象
const t = reactive({count: 0})
return {
num,
person,
...toRefs(t)
}
}
// 使用
{{t.count}}
{{person.name}}
{{count}}
（3）生命钩子
vue3的生命钩子需要通过vue引入
注：breforeCreate、create被setup替代，但是vue也能够兼容使用。
同时vue新增了onRenderTracked、onRenderTriggered用于调试的方法
| API | Hook inside setup |
|---|---|
| beforeCreate | Not needed* |
| created | Not needed* |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
| errorCaptured | onErrorCaptured |
| renderTracked | onRenderTracked |
| renderTriggered | onRenderTriggered |
| activated | onActivated |
| deactivated | onDeactivated |
使用：
setup(props) {
onMounted(() => {})
}（4）watch和watchEffect
watch：用于监听数据源、并在回调中执行的作用
// source数据源 callback回调函数，option执行回调函数的选项（deep、immediate、flush）
watch(source, callback,[options])watchEffect：不需要手动传入依赖、会先执行一次自动收集依赖，只能获取更新后的值，无法获取到变化前的值
watchEffect(() = {console.log('123')})
9、Hooks
vue2使用mixin引入可复用的功能，当组件使用混入对象时，混入对象会注入组件的本身选项
vue3引入新的vue-hooks
引入原因：
- 跨组件难以复用
- 大组件、维护困难、颗粒度不好控制、组件嵌套层次太多影响性能
- 类组件、this不可控、不易理解
- mixins 逻辑相互嵌套、mixin之间不易消费
优势：
- 允许hooks之前互相传值
- 组件之前重用状态逻辑
- 明确表明逻辑出处
10、数据响应
vue2是通过Object.defineProperty只能劫持对象的属性
给数组和对象新增属性时，需要使用$set才能保证新增的属性也是响应式。如果遍历的属性也是对象，则需要深度遍历
vue3是Proxy 是直接代理对象、不需要遍历
11、Teleport
使用Teleport标签，可以指定dialog等组件渲染到特定的位置
----
12、片段（Fragment）
vue3 多个根节点
13.Tree-Shaking变化
nextTick是vue全局的api，vue3需要通过具名的方式引入。
Vue.nextTick() 是一个从 Vue 对象直接暴露出来的全局 API，其实 $nextTick() 只是 Vue.nextTick() 的一个简易包装，只是为了方便而把后者的回调函数的 this 绑定到了当前的实例。
// vue2
this.nextTick(() => {})
Vue.nextTick(() => {})
// vue3
import {nextTick} from 'vue';
nextTick(() => {})