1.vue2和vue3双向数据绑定原理发生了改变
vue2
的双向数据绑定是利用ES5
的一个APIObject.definePropert()
对数据进行劫持,结合发布订阅模式的方式来实现的。vue3
中使用了ES6
的Proxy
API对数据代理。
相比vue2.x
,使用proxy
的优势如下:
defineProperty
只能监听某个属性,不能对全对象监听- 可以省去
for in
,闭包等内容来提升效率(直接绑定整个对象即可) - 可以监听数组,不用再去单独的对数组做特异性操作
vue3.x
可以检测到数组内部数据的变化。
2. vue2和vue3定义数据变量和方法的改变
在vue2
中定义数据变量是data(){}
,创建的方法要在methods:{}
中。
而在vue3
中直接在setup(){}
中,在这里面定义的变量和方法因为最终要在模板中使用,所以最后都得 return
。
如:
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'App',
setup() {
//使用ref,说明这个数组就是全局在面板中可以使用了
const girls = ref(['美女1','美女2','美女3'])
const selectGirl = ref('2')
//设置一个函数
const selectGirlFun = (index: number) => {
//改变selectGirl的值要加value
//要得到值要加value ,这些都因为使用了ref函数
selectGirl.value = girls.value[index]
}
//在标签中使用的变量要使用return
//为什么要使用return,因为有的不需要在标签中使用的就不用return
return{
girls,
selectGirl,
selectGirlFun
}
},
});
</script>
3. vue2和vue3生命周期钩子函数的不同
-
vue2
中的生命周期beforeCreate
组件创建之前created
组件创建之后beforeMount
组价挂载到页面之前执行mounted
组件挂载到页面之后执行beforeUpdate
组件更新之前updated
组件更新之后
-
vue3
中的生命周期setup
开始创建组件onBeforeMount
组价挂载到页面之前执行onMounted
组件挂载到页面之后执行onBeforeUpdate
组件更新之前onUpdated
组件更新之后
而且Vue3.x
生命周期在调用前需要先进行引入。
如:
import {
reactive,
toRefs,
onMounted,
onBeforeMount,
onBeforeUpdate,
onUpdated,
} from "vue";
- 来一个总的生命周期对比
Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
除了以上钩子函数,Vue3.x
还增加了onRenderTracked
与onRenderTriggered
函数。
3: vue3中新加入了TypeScript和PWA的支持