一、数据双向绑定原理
二、数据和方法的定义
三、生命周期
四、获取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的一部分区别。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。