Vue2和Vue3的区别

一、数据双向绑定原理
二、数据和方法的定义
三、生命周期
四、获取props
五、给父组件传值emit


一、数据双向绑定原理
Vue2使用的是Object.defineproperty()进行数据劫持,结合发布订阅的方式实现。
Vue3使用的是Proxy代理,使用ref或者reactive将数据转化为响应式数据。

二、数据和方法的定义
Vue2使用的是选项类型API(Options API),Vue3使用的是合成型API(Composition API)。

Vue2:
data() { return {}; }, methods:{ }
Vue3:
数据和方法都定义在setup中,并统一进行return{}

三、生命周期
Vue2:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed。


Vue3:

选项式 API    Hook inside setup
beforeCreate    Not needed*
created    Not needed*
beforeMount    onBeforeMount
mounted    onMounted
beforeUpdate    onBeforeUpdate
updated    onUpdated
beforeUnmount    onBeforeUnmount
unmounted    onUnmounted
errorCaptured    onErrorCaptured
renderTracked    onRenderTracked
renderTriggered    onRenderTriggered
activated    onActivated
deactivated    onDeactivated
四、获取props
vue2:console.log(‘props’,this.xxx)
vue3:setup(props,context){ console.log(‘props’,props) }

五、给父组件传值emit
vue2:this.$emit()
vue3:setup(props,context){context.emit()}

以上就是vue2和vue3的一部分区别。
 

相关文章

显卡天梯图2024最新版,显卡是电脑进行图形处理的重要设备,...
初始化电脑时出现问题怎么办,可以使用win系统的安装介质,连...
todesk远程开机怎么设置,两台电脑要在同一局域网内,然后需...
油猴谷歌插件怎么安装,可以通过谷歌应用商店进行安装,需要...
虚拟内存这个名词想必很多人都听说过,我们在使用电脑的时候...
win11本地账户怎么改名?win11很多操作都变了样,用户如果想要...