vue2和vue3的区别(Vue3升级部分)

区别有两个目的:一面试说一下书面化的表达,二工作需要升级大白话说一下项目应用的区别。

双向数据绑定:

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持 结合 发布订阅(getter&setter)模式的⽅式来实现的。

vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理,使⽤ref或者reactive将数据转化为响应式数据,从⽽ 实现对数据的监控。

 应用就是:2中监听数据是单层的,有些数组,对象内部变化存在监听不到,对某些修改需要用$set强刷新赋值;3中不需要了类似可以实现内部监听。

实例化main.js:

2中new出的实例对象,所有的东西都在这个vue对象上,template里必须要有一个根元素,是否都会跑⼀遍,性能消耗大。

3按需导出了一个createApp 中,template里不要求只有一个根元素,可以⽤ES module imports按需引⼊,如:keep-alive内置组件、v-model指令,减少 了内存消耗。

生命周期:

beforeCreate -> setup()

created ->  setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

3中使用setup语法糖即可直接写,各个生命周期意思不做赘述

数据和方法的定义:

2使⽤的是选项类型API(Options API)【在代码中分割不同属性:data,computed,methods等】:data() { return {}; }, methods:{ }

3使⽤的是合成型API(Composition API):setup中定义函数和属性,统一return{}

父子间传参(props&emits):

2中this.props获取,this.$emit使用,

3中setup中setup(props,context){context.emit(),props}两个参数获取,setup语法糖如下


                    
                    

你可能感兴趣的:(学习,vue.js,前端)