watch案例解析(element-ui el-select 无法选中问题剖析)
Posted teamblog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了watch案例解析(element-ui el-select 无法选中问题剖析)相关的知识,希望对你有一定的参考价值。
fire
读在最前面:
1、此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读
问:子组件中明明有watch value,为什么this.$emit(‘input‘, 888);没有触发watch回调,反而在父组件data数据变化后触发回调?
<child v-model="b"></child> var child = Vue.extend({ template: ‘<p>数据响应及render相关-案例说明</p>‘, props: { value: { required: true } }, mounted() { this.$emit(‘input‘, 888); }, watch: { value(val, oldVal) { console.log(val, oldVal, ‘child‘) } } });
如下图:
关键执行顺序分析:
1、子组件this.$emit(‘input‘, 888)执行
2、父组件执行这段代码,settime 去更新父组件值
created() { this.b = 1 setTimeout(() => { this.a = 3 }, 1000) }
3、settime执行后,触发父组件a的set -> 触发watch -> 触发vm.render -> 触发patch-> 触发 validPros -> 触发子组件pros更新 -> 触发value更新 ->回调watch
大致流程如下图
el-select 中也是实现了watch value,详见源码
备注:
1、observe不会对不在data中的数据进行处理
2、v-model子组件中,watch value 在页面更新时会触发
3、页面更新时,会执行render,所有的数据绑定会再次执行,包括{{xxx}} , {{methods}}, {{computed}} 等,生成新的vnode
4、一个时间周期中的数据更新,非立即执行的watcher,都会统一进入queueWatcher,在下个tick进行执行
by:海豚湾-丰
以上是关于watch案例解析(element-ui el-select 无法选中问题剖析)的主要内容,如果未能解决你的问题,请参考以下文章
Element-ui 时间选择器 控制3个月3年等等不能选择案例
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
名称案例-使用keyup事件实现1 和 名称案例-使用watch监听文本框数据的变化2