The difference between Vue2 and Vue3
First, the principle of two-way data binding
Vue2 uses Object.defineProperty() for data hijacking, combined with publish and subscribe.
Vue3 uses Proxy proxy, which uses ref or reactive to convert data into responsive data.
2. Definition of data and methods
Vue2 uses the option type API (Options API), Vue3 uses the composition API (Composition API).
Vue2:
data() { return {}; }, methods:{ }
Vue3:
数据和方法都定义在setup中，并统一进行return{}
3. Life cycle
Vue2：beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestory、destoryed。
Vue3:
Options 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
4. Get props
vue2：console.log(‘props’,this.xxx)
vue3：setup(props,context){ console.log(‘props’,props) }
Five, pass the value to the parent component emit
vue2：this.$emit()
vue3：setup(props,context){context.emit()}
The above is part of the difference between vue2 and vue3.