vue2与vue3对比

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>

vue2与vue3对比