A two-way binding principle .vue
vue achieve two-way data binding mainly: the use of data in conjunction with hijacking a publisher - way mode subscribers by Object.defineProperty () to hijack each attribute setter, getter, posted a message to subscribers when data changes, trigger the corresponding monitor callback. When the object is passed to a common Javascript Vue instance as its data option, Vue will traverse its properties, they are converted by Object.defineProperty getter / setter. Users do not see getter / setter, but internally they let Vue track dependent, when informed of the changes in the property is accessed and modified.
The two-way data binding vue MVVM data entry as binding, the Observer integration, Watcher Compile and three, to monitor their model data changes by the Observer, compiled template to parse command (vue is used by parsing {Compile {}}), using a watcher finally acts as a bridge between the observer and the Compile, to achieve the data change -> view update; view change interaction (INPUT) -> data model changes way binding effect.
js achieve a simple two-way binding:
Two .Virtual DOM
To understand how it works, we must first understand these concepts:
1. Update DOM is very expensive operation.
When we use Javascript to modify our page, the browser has already done some work to find the DOM node to make changes, such as:
So the calculation because the resulting update time is very expensive. Trivial and frequent updates will make the page slow, but this is inevitable.
2. We can use JavaScript objects instead of DOM nodes.
DOM node performance in the HTML document is usually something like this:
DOM node can also be represented as a JavaScript object, like this:
3. Update virtual node, not expensive.
如果我们用一个虚拟DOM，而不是直接调用像.getElementById的方法，这样只操作JavaScript对象，这样是相当便宜的。
4.Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。这是什么意思呢？也就是说并不修改数据之后vue会立刻更新DOM，vue是异步更新DOM的，这里就需要了解js的事件循环机制，我在前面已经介绍过，如果不了解，可以去看看。vue是使用promise来更新DOM的。这也就是说我们在改变数据后并不能立刻获取到更新后的DOM。
这里我们需要使用nextTick来获取到更新后节点，或者使用setTimeout（fn，0）也可以。
原文链接：https://baijiahao.baidu.com/s?id=1614572521202569483&wfr=spider&for=pc