vue接收一个模板和data参数。1，首先将data中的数据进行递归遍历，对每个属性执行Object.defineProperty，定义get和set函数。并为每个属性添加一个dep数组。当get执行时，会为调用的dom节点创建一个watcher存放在该数组中。当set执行时，重新赋值，并调用dep数组的notify方法，通知所有使用了该属性watcher，并更新对应dom的内容。2，将模板加载到内存中，递归模板中的元素，检测到元素有v-开头的命令或者双大括号的指令，就会从data中取对应的值去修改模板内容，这个时候就将该dom元素添加到了该属性的dep数组中。这就实现了数据驱动视图。在处理v-model指令的时候，为该dom添加input事件（或change），输入时就去修改对应的属性的值，实现了页面驱动数据。3，将模板与数据进行绑定后，将模板添加到真实dom树中。
展开
这一次，彻底搞懂vue双向绑定原理
juejin.cn
好文推荐
评论
相关推荐