2. 程式人生 > >vue.js雙向資料繫結實現原理

vue.js雙向資料繫結實現原理

阿新 • • 發佈：2019-02-04
/*var dom = nodeToFragment(document.getElementById('app')); console.log(dom);*/ function compile(node,vm) { var reg =/\{\{(.*)\}\}/; //節點型別為元素 if(node.nodeType === 1){ var attr = node.attributes; //解析屬性 for(var i=0;i<attr.length;i++){ if
(attr[i].nodeName = 'v-model'){ var name = attr[i].nodeValue;//獲取v-model繫結的屬性名 //放在該位置原因是獲取name值 node.addEventListener('input',function (e) { //給相應的data屬性賦值，進而觸發該屬性的set方法 vm[name]=e.target.value; }); node.value = vm[name]; node.removeAttribute('v-model'
); } }; } //節點型別為text if(node.nodeType === 3){ if(reg.test(node.nodeValue)){ var name = RegExp.$1;//1.獲取匹配到的字串 name = name.trim(); //node.nodeValue = vm[name];//將data的值賦值給該node new Watcher(vm,node,name); } } } function
nodeToFragment(node,vm) { var flag = document.createDocumentFragment(); var child; while(child = node.firstChild){ compile(child,vm); flag.append(child); } return flag; } function defineReactive(obj,key,val) { var dep = new Dep(); Object.defineProperty(obj,key,{ get:function () { if(Dep.target) dep.addSub(Dep.target); return val; }, set:function (newVal) { if(newVal===val) return ; val = newVal; //console.log(val); //作為釋出者發出通知 dep.notify(); } }); } function observe(obj,vm) { Object.keys(obj).forEach(function (key) { defineReactive(vm,key,obj[key]); }) } function Vue(options) { this.data = options.data; var data = this.data; observe(data,this); var id = options.el; var dom = nodeToFragment(document.getElementById(id),this); //編譯完成後，將dom返回到app中 document.getElementById('app').appendChild(dom); } function Dep() { this.subs = []; } Dep.prototype={ addSub:function (sub) { this.subs.push(sub); }, notify:function () { this.subs.forEach(function (sub) { sub.update(); }); } } function Watcher(vm,node,name) { Dep.target = this; this.name = name; this.node = node; this.vm = vm; this.update(); Dep.target=null; } Watcher.prototype={ update:function () { this.get(); this.node.nodeValue = this.value; }, //獲取data中的屬性值 get:function () { this.value = this.vm[this.name];//觸發相應屬性的get } }; var vm = new Vue({ el:'app', data:{ text:'hello world' } });

相關推薦

vue.js雙向資料繫結實現原理

/*var dom = nodeToFragment(document.getElementById('app')); console.log(dom);*/ function compile(node,vm) { var reg =/\{\{(.*)\}\}/

Vue.js雙向資料繫結原理

vue雙向繫結就是指model層與view層的同步，兩者之間任意一個發生變化都會同步更新到另一者。 View為檢視層，Model為資料層，ViewModel為邏輯控制層。 vue.js採用資料劫持結合釋出者-訂閱者模式的方法，通過Object.defin

轉 vue實現雙向資料繫結之原理及實現篇 vue的雙向繫結原理及實現

轉自：canfoo#! vue的雙向繫結原理及實現 前言 先上個成果圖來吸引各位： 程式碼：                          &nb

Vue.js雙向資料繫結實現

js中物件屬性型別有資料屬性和訪問器屬性，這裡實現簡單的雙向資料繫結是利用了物件的訪問器屬性中包含的get和set 修改屬性的預設特性使用Object.defineProperty()方法 addEventListener（event，function，useCapture

vue.js雙向資料繫結

建立一個view 層 HTML 檔案：vueapp.htm，以及 model 層檔案：vueapp.js，然後通過 vue.js（使用v-model這個指令）完成中間的底層邏輯，實現繫結的效果。 （1

vue雙向繫結實現原理

當我們學會使用一個東西的時候，就開始想要去知道這個東西是怎麼實現的，這個也是我們一直繼續探究下去的動力，博主學了vue的時間也比較長了，自己也寫了一個demo，還在不定時更新，有興趣的小夥伴可以去看看，如果這個專案能讓您有所收穫，那也是博主希望看到的，接下來也是

詳解 vue 雙向資料繫結的原理，並實現一組雙向資料繫結

1：vue 雙向資料繫結的原理： Object.defineProperty是ES5新增的一個API，其作用是給物件的屬性增加更多的控制Object.defineProperty(obj, prop, descriptor)引數 obj: 需要定義屬性的物件（目標物件）prop: 需被定義或修改的屬性名（物

vue雙向資料繫結的原理

有關雙向資料繫結的原理 最近兩次面試的時候，被問到了vue中雙向資料繫結的原理，因為初學不精，只是使用而沒有深入研究，所以答不出來。之後就在網上查找了別人寫的部落格，學習一下。 下面是部落格園一篇部落格，以及MDN上講解Object.defineProper

vue的思中雙向資料繫結的原理

我們在面試中經常會被問道什麼是mvc 什麼是 mvvm  還有雙向資料繫結的原理：MVC：對專案的整體把控,M代表的是資料庫中的資料,V代表的是前端的檢視層，C用於處理M和V之間進行互動的業務邏輯(業務

深入vue原始碼，瞭解vue的雙向資料繫結原理

大家都知道vue是一種MVVM開發模式，資料驅動檢視的前端框架，並且內部已經實現了雙向資料繫結，那麼雙向資料繫結是怎麼實現的呢？ 先手動擼一個最最最簡單的雙向資料繫結 1 <div> 2 <input type="text" name="" id="te

Vue.js雙向綁定的實現原理

監聽 事件 中修改 center set 添加 rom 示例 對象 Vue.js 最核心的功能有兩個，一是響應式的數據綁定系統，二是組件系統。本文僅探究雙向綁定是怎樣實現的。先講涉及的知識點，再用簡化得不能再簡化的代碼實現一個簡單的 hello world 示例。 　　

面試題：你能寫一個Vue的雙向資料繫結嗎？

在目前的前端面試中，vue的雙向資料繫結已經成為了一個非常容易考到的點，即使不能當場寫出來，至少也要能說出原理。本篇文章中我將會仿照vue寫一個雙向資料繫結的例項，名字就叫myVue吧。結合註釋，希望能讓大家有所收穫。 1、原理 Vue的雙向資料繫結的原理相信大家也都十分了解了，主要是通過 Obje

簡單實現VUE的雙向資料繫結

<!DOCTYPE html> <html> <head> <title>vue-雙向資料繫結的簡單實現</title> </head> <body> <input type="text" name="" id

Vue實現雙向資料繫結的新姿勢

在Vue中實現資料繫結還是相當靈活的，可以通過屬性和指令兩種方式來實現 先來看看第一種方式使用ref屬性來來實現雙向資料繫結 <!DOCTYPE html> <html> <head> <meta charset="UTF-

寫一個Vue的雙向資料繫結

在目前的前端面試中，vue的雙向資料繫結已經成為了一個非常容易考到的點，即使不能當場寫出來，至少也要能說出原理。本篇文章中我將會仿照vue寫一個雙向資料繫結的例項，名字就叫myVue吧。結合註釋，希望能讓大家有所收穫。 1、原理 Vue的雙向資料繫結的原理相信大家也都

【react】react實現類似vue的雙向資料繫結

import React from 'react' import ReactDOM from 'react-dom' class Comment extends React.Component { constructor() { sup

vue的雙向資料繫結

已經接觸vue有一段時間了，只知道v-model，和v-bind等的繫結雙向資料 <div id="app"><div>{{message}}</div> <input type="text" v-model='me

手寫VUE mvvm雙向資料繫結

當你開啟這篇文章時，你肯定已經使用過vue，當你改變資料時，與之繫結的UI自動更新，當你觸發一些表單元素時，與之繫結的資料也會自動更新。我剛開始學vue的時候對vue的雙向資料繫結很好奇，所以今天我給大家實現一個簡單的vue。 首先，你得明白為什麼我們要使用雙向資料繫結，在

單項資料繫結、雙向資料繫結及其原理（髒檢查）

參考文章： https://segmentfault.com/q/1010000002511449/a-1020000002514653 單向資料繫結：指的是我們先把模板寫好，然後把模板和資料（資料可

vue.js動態資料繫結學習

對於vue.js的動態資料繫結，經過反覆地看原始碼和部落格講解，總算能夠理解它的實現了，心累~ 分享一下學習成果，同時也算是做個記錄。完整程式碼GitHub地址：https://github.com/hanrenguang/Dynamic-data-bindin