一、数据双向绑定原理

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:

选项式 APIHook inside setup
beforeCreateNot needed*
createdNot needed*
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted
errorCapturedonErrorCaptured
renderTrackedonRenderTracked
renderTriggeredonRenderTriggered
activatedonActivated
deactivatedonDeactivated

四、获取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的一部分区别。

Logo

前往低代码交流专区

更多推荐