您现在的位置是:首页 > 技术教程 正文

Vue2 和Vue 3的区别

admin 阅读: 2024-03-28
后台-插件-广告管理-内容页头部广告(手机)

Vue 2 和 Vue 3的区别

  • 1.双向数据绑定原理不同

Vue2 的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。

Vue3 中使用ES6的Proxy API对数据代理。

Vue3 使用数据代理的优势有以下几点:1)definePropert 只能监听某个属性,不能对整个对象进行监听 2)可以省去for in,闭包等内容来提升效率(直接绑定整个对象即可)3)可以监听数组,不用再单独的对数组做特异性操作,Vue3可以检测到数组内部数据的变化

  • 2.是否支持碎片

Vue2 不支持碎片。Vue3 支持碎片,就是说可以拥有多个根节点

  • 3.API 类型不同

Vue2 使用选项类型api,选项型api 在代码里分割了不同的属性:data,computed,method等。

Vue3 使用合成型api,新的合成型api 能让我们使用方法来分割,相比于旧的api 使用属性来分组,这样代码会更加简便和整洁。

  • 4定义数据变量和方法不同

Vue2是把数据放到了data 中,在 Vue2中 定义数据变量是data(){},创建的方法要在method:{}

Vue3 就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据:1)从vue 引入 reactive;2)使用 reactive ()方法来声明数据为响应性数据;3) 使用setup()方法来返回我们的响应性数据,从而template 可以获取这些响应性数据。

  • 5.生命周期钩子函数不同

Vue2 中的生命周期:beforeCreate 组件创建之前;created 组建创建之后;beforeMount 组件挂载到页面之前执行;Mounted 组件挂载到页面之后执行,beforeUpdate 组件更新之前;updated组件更新之后

Vue3 中的生命周期:setup 开始创建组件;onBeforeMount 组件挂载到页面之前执行;onMounted 组件挂载到页面之后执行;onBeforeUpdate 组件更新之前;onUpdated 组件更新之后;

而且 Vue3 生命周期在调用前需要先进行引入。除了这些钩子函数外,Vue3 还增加了 onRenderTracked 和onRenderTriggered 函数。

  • 6.父子传参不同

Vue2 父传子,用props ;子传父用事件Emitting Events。在Vue2 中,会调用this$emit 然后传入事件名和对象。

Vue3 父传子,用props;子传父用Emitting Events 。在Vue3 中的setup()中的第一参数content 对象中就有 emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit 就可以在setup 方法中随意使用了。

  • 7.指令与插槽不同

Vue2 中使用slot 可以直接使用slot ;v-for 与v-if 在Vue2中优先级高的是v-for 指令,而且不建议一起使用。

Vue3 中必须是使用v-slot的形式;vue 3中v-for 与v-if ,只会把当前v-if 当作v-for 的一个判断语句,不会相互冲突;

Vue3 中移除keyCode 作为v-on 的修饰符,当然也不支持config.keyCodes,取而代之的是使用键名来作为事件的修饰符来使用,于是Vue.config.keyCodes 也被弃用了-vue2我们在监听按键事件的时候,是可以通过在事件后面加上按键码来实现监听某一个按键的--mulingyuer.com/archives/831/# ;

 

Vue3 中移除v-on.native 修饰符-这个修饰符的作用是:如果想要在一个组件的根元素上直接监听一个原生事件,需要使用v-on的.native修饰符Vue3中移除掉之后,取而代之的是,在新增的emits 选项中定义当前组件真正触发的事件(即,组件事件)。此外,Vue 现在将所有未在组件 emits 选项中定义的事件作为原生事件添加到子组件的根元素中(除非子组件选项中设置了inheritAttrs:false)

 

 

Vue3 中移除过滤器filter,官方推荐,如果要使用过滤器可以使用 computed 计算属性和method 函数来代替。如果是使用了全局过滤器,官方也提供了一个属性来进行迁移修复,但是也只推荐用于迁移。---https://www.mulingyuer.com/archives/832/

 

  • 8.Main.js 文件不同

Vue2中我们可以使用pototype(原型)的形式去进行操作,引入的是构造函数。

Vue3 中需要使用结构的形式进行操作,引入的是工厂函数;

Vue3中app组件中可以没有根标签。

  • 拓展阅读https://worktile.com/kb/ask/19553.html

Setup() 函数特性

  1. setup() 函数接收两个参数:props、context(包含attrs、slots、emit)
  2. setup()函数处于生命周期 beforeCreated 两个钩子函数之前
  3. 执行setup时,组件实例尚未被创建(在setup()内部,this不会是该活跃实例的引用,即不指向vue 实例,Vue 为了避免我们错误的使用,直接将setup 函数中的this 修改成了undefined)
  4. 与模版一起使用时,需要返回一个对象
  5. 因为setup函数中,props时响应式得,当传入新的prop时,它就会被更新,所以不能使用es6解构,因为它会消除 prop得响应性,如果需要解构prop,可以通过使用setup函数中torefs 来完成此操作。
  6. 在setup()内使用响应式数据时,需要通过.value 获取
  7. 从setup()中返回得对象上得property 返回并且可以在模版中被访问时,它将自动展开为内部值。不需要在模版中追加.value.
  8. Setup 函数只能是同步的不能是异步的。
标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索
排行榜