V2和V3的区别

1.数据劫持方式不同

1.vue2的底层原理是基于 Object.defineProperty封装的一种发布订阅模式,利用它的get和set方法对对象的属性进行监听

2.vue3是基于es6的proxy封装的发布订阅模式

数据劫持方式的不同是的v2和v3有何区别

Object.defineProperty只能监听对象的属性并且不能监听动态添加的属性。es6的proxy可以监听一切。

2.v-if和 v-for优先级问题

v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.

v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯

3.vue3中废除了filter

4.生命周期钩子函数的不同

v2 beforeDestroy 废弃了 v3 beforeUnmount

v2 destroyed 废弃了 v3 用 unmounted

   什么是vue的生命周期

vue实例从创建到销毁的整个过程我们称之为vue的⽣命周期

vue⽣命周期常⽤的钩⼦函数⼀共有8个,分别是创建前后、挂载前后、更新前后以及销毁前后. 分别对应的钩⼦函数为beforeCreate 创建前、 created创建后、beforeMount 挂载前、mounted挂载后、beforeUpdate 更新前、updated更新后、beforeDestory 销毁前、 destoryed销毁后, ⻚⾯⼀开始加载的时候就会触发创建前后和挂载前后的钩⼦函数, ⽽更新的钩⼦函数需要当我们改变data的时候才能触发,⽐如 点击按钮,执⾏⼀⽅法,在这个⽅式⾥⾯给data⾥⾯属性重新进⾏复制操作,这个时候就会更新的钩⼦函数, 销毁的钩⼦函数必须得当组件进⾏切换的时候就会进⾏销毁

5.router


vu2里面的watch一旦监听就不能取消了,vue3可以手动取消watch监听

代码如下

const myActive=watch(activeName,(value,oldValue)=>{

  console.log(value,oldValue)

})

setTimeout(()=>{

  myActive()

},5000)

7.API

vue2是选项api 需要什么选项就直接写什么选项

   vue3是组合api 所有的代码都写在setup里边  需要什么就要import引入什么

8.Vue3默认使用懒加载

9.重构虚拟DOM

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容