let Child = { name: "child", template: '<div><span>{{ localMsg }}</span><button @click="change">click</button></div>', data: function() { return { localMsg: this.msg }; }, props: { msg: String }, methods: { change() { this.$emit("update:msg", "world"); } } }; new Vue({ el: "#app", template: '<child :msg.sync="msg"><child>', beforeUpdate() { alert("update twice"); }, data() { return { msg: "hello" }; }, components: { Child } });
具体的表现是点击 click按钮，会 alert 出两次 update twice。 这是由于子组件在执行 data 这个函数初始化组件的数据时，会错误的再收集一遍 Dep.target （也就是渲染watcher）。
由于数据初始化的时机是 beforeCreated -> created 之间，此时由于还没有进入子组件的渲染阶段， Dep.target 还是父组件的渲染watcher。
这就导致重复收集依赖，重复触发同样的更新
怎么解决的呢？很简单，在执行 data 函数的前后，把 Dep.target 先设置为 null 即可，在 finally 中再恢复，这样响应式数据就没办法收集到依赖了。
export function getData (data: Function, vm: Component): any { const prevTarget = Dep.target + Dep.target = null try { return data.call(vm, vm) } catch (e) { handleError(e, vm, `data()`) return {} + } finally { + Dep.target = prevTarget } }
后记
如果你对于 Dep.target、 渲染watcher等概念还不太理解，可以看我写的一篇最简实现 Vue 响应式的文章，欢迎阅读：
手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch源码
本文也存放在我的Github博客仓库中，欢迎订阅和star。
到此这篇关于原理深度解析Vue的响应式更新比React快的文章就介绍到这了,更多相关Vue的响应式更新比React快内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: