vue3发布出来有一段时间了，这篇文章记录一下vue2与vue3的一些区别
1.生命周期
vue3中新引入了setup生命周期，setup在beforeCreate生命周期之前执行，这个时候data与methods还没有初始化，dom没有挂载，意味着在setup方法里不能获取data，methods，computed与dom
destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
1.1 vue2 生命周期
beforeCreate #实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
created #实例创建完成后被立即同步调用
beforeMount #挂载开始之前被调用
mounted #实例被挂载后调用
beforeDestroy #
destroyed #
beforeUpdate #数据发生改变后，DOM 被更新之前被调用
updated #虚拟 DOM 重新渲染和更新完毕之后被调用
activated #keep-alive 缓存的组件激活时调用
deactivated # keep-alive 缓存的组件失活时调用
1.2 vue3 生命周期
生命周期钩子vue2到vue3映射关系
beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
引用时只需导入钩子并将它们包在 setup 方法中即可。
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
export default {
setup() {
onBeforeMount(() => {
// ...
})
onMounted(() => {
// ...
})
onBeforeUpdate(() => {
// ...
})
onUpdated(() => {
// ...
})
onBeforeUnmount(() => {
// ...
})
onUnmounted(() => {
// ...
})
onActivated(() => {
// ...
})
onDeactivated(() => {
// ...
})
onErrorCaptured(() => {
// ...
})
}
}
2.绑定数据
2.1 vue2中使用Object.defineProperty劫持数据，使用发布订阅模式实现数据绑定。
Object.defineProperty(obj, name, desc)
obj需要定义属性的当前对象
prop当前需要定义的属性名
desc属性描述符6个
var obj= { name:"banana" };
var name = "apple"
Object.defineProperty(obj, "name", {
get : function() { return name; },
set : function(newValue) { name = newValue; },
value: "banana",
writable: true, // 为 true 时， value才能被赋值运算符改变 默认是false
enumerable : true, // 能否枚举 默认是false
configurable : true // 描述符能够被改变 默认是false
});
2.2 vue3中使用Proxy代理
var proxy = new Proxy(target, handler);
var obj = new Proxy({}, {
get: function (target, propKey, receiver) {
console.log(`getting ${propKey}!`);
return Reflect.get(target, propKey, receiver);
},
set: function (target, propKey, value, receiver) {
console.log(`setting ${propKey}!`);
return Reflect.set(target, propKey, value, receiver);
}
});
handler可以有以下几种属性
get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。
3.定义数据和方法
vue2定义数据使用data，定义方法使用methods
export default {
name: 'App',
data(){
return {
title: 'vue3',
num: 3
}
},
methods:{
hello () {
alert('hello vue3');
}
}
}
vue3定义数据和方法在setup()方法里面，return一个对象
export default {
name: 'App',
setup(){
return {
title: 'vue3',
num: 3,
hello () {
alert('hello vue3');
}
}
}
}
4.指令
4.1 v-model
在 2.x 中，在组件上使用 v-model 相当于绑定 value的prop 并触发input 事件
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
在 3.x 中， v-model 相当于传递了 modelValue的 prop 并接收抛出的 update:modelValue 事件
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
###### 变化
prop：value => modelValue
事件：input => update:modelValue
4.2 v-if 和 v-for 优先级
同一个元素同时使用v-if与v-for指令
在vue2中，v-for的优先级高
在vue3中，v-if的优先级高
5.修饰符
5.1 v-on.native
vue3移除native修饰符。
在vue2中，v-on.native修饰符把原生的事件绑定到子组件根元素上。
<my-component
v-on:close="handleComponentEvent"
v-on:click.native="handleNativeClickEvent"
/>
在vue3中，.native 修饰符已被移除。同时新增的 emits 选项，子组件定义真正会被触发的事件。
未在子组件emits定义为组件触发的所有事件监听器，Vue 现在将把它们作为原生事件监听器添加到子组件的根元素中 (除非在子组件的选项中设置了 inheritAttrs: false)。
<my-component
v-on:close="handleComponentEvent"
v-on:click="handleNativeClickEvent"
/>
子组件
<script>
export default {
emits: ['close']
}
</script>
