- 作者:老汪软件技巧
- 发表时间:2024-11-19 11:02
- 浏览量:
在东胜神州的傲来国花果山水帘洞,有一位天生石猴,名叫孙悟空。他聪明伶俐,渴望成为天地间最强大的存在。
孙悟空听说在西牛贺洲的灵台方寸山斜月三星洞,有一位高人名叫菩提老祖,能传授他无上的法术。于是,他决定踏上寻师学艺的旅程。
悟空历经千辛万苦,终于来到了斜月三星洞。他拜见了菩提老祖,请求老祖传授他法术。菩提老祖见悟空性子顽劣,便敲了他头三次,头也不回地离开了。
夜晚三更时分,悟空悄悄来到菩提老祖房前,老祖问到:“你这猴头这般晚来我这边作甚?”悟空回答道:“自然是老祖叫我过来的,早上您敲我头三次不就是想我三更过来。”
菩提老祖道:“你这猴头倒也是聪明,你不是想学那通天的本事,我这里有基于 Object.defineProperty 实现的 Vue 2 响应式三十六般变化,还有基于 Proxy 对象实现 Vue3 响应式七十二般变化,你想学哪种?”
随后菩提老祖便详细讲解了 Vue2 响应式三十六般变化和 Vue3 响应式七十二般变化的区别:
vue2:
原理:Object.defineProperty
缺点:对数组的操作有一定的局限性,需要使用特定的方法(如 push, splice 等)才能触发响应式更新
使用:$set() 、Object.defineProperty()
通信:主要通过 props、emit 和 events 进行父子组件通信
vue3:
原理:Proxy
优点:处理数组操作,不需要使用特定的方法也能触发响应式更新
使用:ref、reactive 等
通信:除了 props、emit 和 events,还引入了 provide 和 inject 的进行通信
除此之外,菩提老祖还详细的讲解了一下关于v-model的区别:
export default {
props: ['value'],
methods: {
change(event) {
this.$emit('input', event.target.value);
}
}
}
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
methods:{
change(){
this.$emit('update:modelValue', '')
}
}
}
孙悟空思索了一会,决定......