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引入什么