VUE双向绑定的原理（简单版）+虚拟DOM 节点的创建和更新
生活随笔
收集整理的這篇文章主要介紹了
VUE双向绑定的原理（简单版）+虚拟DOM 节点的创建和更新
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
手動敲敲代碼，就很容易理解了，供參考
?
1、以下是VUE雙向綁定的原理（簡單版）
主要是監聽和defineProperty實現簡單的雙向綁定
?
<html><head></head><body><div><input id="inputId"></input><span id="showId"></span></div><script>var obj = {name: '',};document.getElementById('inputId').addEventListener('keyup', function(event){console.log('-----event-', event.target.value);obj.name = event.target.value;});Object.defineProperty(obj, 'name', {get() {console.log('-------get---');},set(newVal) {console.log('---------set---', newVal);document.getElementById('inputId').value = newVal;document.getElementById('showId').innerHTML = newVal;}});</script></body> </html>?
?
2、以下是虛擬DOM 節點的創建
?
// 生成domfunction createDOM(target) {const tag = target.tag || null;const attr = target.attris || {};const children = target.children || [];if (!tag) {return null;}let node = document.createElement(tag);for (const key in attr) {if (object.hasOwnProperty(key)) {node.setAttribute(key, attr[key]);}}children.forEach(child => {node.appendChild(createDOM(child));});return node;};?
3、以下是更新DOM 節點（簡單版，供參考）
// 更新虛擬domfunction updateNode(vNode, newVnode) {const children = vNode.children || [];const newChildren = newVnode.children || [];children.forEach((childVNode, index) => {let newChildVNode = newChildren[index]if (childVNode.tag === newChildVNode.tag) {updateNode(childVNode, newChildVNode);} else {replaceNode(childVNode, newChildVNode);}});}我不知道要多少個字才可以發布這篇文章，現在發一篇文章怎么這么難咯？？？唉！我就是想發一篇文章而已，沒別的想法，不發廣告，我y
?
總結
以上是生活随笔為你收集整理的VUE双向绑定的原理（简单版）+虚拟DOM 节点的创建和更新的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Windows Live Writer插
- 下一篇： 可微分神经计算机DNC