Vue响应式原理及双向数据绑定

Vue 的响应式原理的核心是object.defineProperty(),该方法会给VM添加与data对象中对应属性并访问属性中的get和set方法,当读取data中的数据时自动调用get方法,当修改data中的数据时,自动调用set方法。检测到数据的变化,会通知观察者watcher,watcher自动触发重新渲染当前组件(子组件不会重新渲染),生成新的虚拟dom树,Vue框架会遍历并对比新旧虚拟dom树中的节点的差别并记录下来,在setter中通过deep去通知对应的watcher去更新对应的节点。

双向数据绑定:通过v-model来实现双向数据绑定,v-model的本质是1.将动态的data通过value属性传递给input显示2.给input标签绑定input监听,一旦输入改变,读取最新的值保存到data的对应属性上

你可能感兴趣的:(vue.js,前端,javascript)