从vue2到vue3的变化

啦啦啦___
1,800 阅读1分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」

vue3.0 的发布与 vue2.0 相比，优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松；我们一起看看从vue2.0到vue3.0，都有哪些变化吧~

一：生命周期

vue2的生命周期

图片.png

vue3的生命周期

图片.png

生命周期对比

beforeDestroy 变成了 beforeUnmount destroyed 变成了 unmounted

二：创建VUE实例

vue2创建

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue3创建

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App,{ userName: "sara" })
.use(store)
.use(router)
.mount('#app')  
// createApp 方法返回应用实例本身，因此可以在其后链式调用其它方法

变化对比

vue3使用createApp函数来实例化vue，该函数接收一个根组件选项对象作为第一个参数，使用第二个参数，我们可以将根 prop 传递给应用程序

三：指令的变化

vue2

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

vue3

const { createApp } from "vue"
const app = createApp({})
app.directive('focus', {
    mounted(el) {
        el.focus()
    }
})

指令命令的对比

图片.png

指令使用

<input v-focus />

四：Hooks

vue2

vue2使用的mixin

mixin的官方解释

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

mixin的通俗解释

将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间的重复部分，就可以使用Mixin再抽离一遍。

vue3

vue3提供了一种新的东西 ，叫做vue-hooks

优缺点对比

mixin

当一个模版依赖了很多mixin的时候，很容易出现数据来源不清或者命名冲突的问题，而且开发mixins的时候，逻辑及逻辑依赖的属性互相分散且mixin之间不可互相消费。

hooks

允许hooks间相互传递值，组件之间重用状态逻辑分明，并且明确指出逻辑来自哪里

五：响应式数据

vue2

在vue2中，实现数据监听使用的是Object.defineProperty。我们使用$set。

vue3

vue3使用的是Proxy

响应式数据对比

  • Object.defineProperty只能劫持对象的属性，而 Proxy 是直接代理对象

    由于Object.defineProperty只能劫持对象属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。
    但是Proxy 直接代理对象， 不需要遍历操作

  • Object.defineProperty对新增属性需要手动进行Observe

    由于Object.defineProperty劫持的是对象的属性，所以新增属性时，需要重新遍历对象，对其新增属性再次使用Object.defineProperty进行劫持。也就是 Vue2.x中给数组和对象新增属性时，需要使用$set才能保证新增的属性也是响应式的,$set内部也是通过调用Object.defineProperty去处理的。

  • Proxy有多种拦截方法，如apply，deleteProperty等等，是Object.defineProperty()不具备的。

  • Proxy是返回值是一个对象，可以直接进行操作，而defineProperty()要先遍历所有对象属性值才能进行操作。 但是相对来说，Object.defineProperty()兼容性高一些。

以上就是从vue2到vue3的一些变化了，记录一下，温故而知新！

avatar
文章
阅读
粉丝