使用

調(diào)用data

onLoad(option) {

_self = this;

_self.$data.xxxx = "te";

}

綁定節(jié)點(diǎn)

元素~~~~

方法

methods: {

tabSelect(e) {

this.TabCur = e.currentTarget.dataset.id;

},

}

雙向綁定原理

https://www.cnblogs.com/wangjiachen666/p/9883916.html

原理

Vue內(nèi)部通過(guò)Object.defineProperty方法屬性攔截的方式，把data對(duì)象里每個(gè)數(shù)據(jù)的讀寫轉(zhuǎn)化成getter/setter，當(dāng)數(shù)據(jù)變化時(shí)通知視圖更新。

也就是說(shuō)：

輸入框內(nèi)容變化時(shí)，data 中的數(shù)據(jù)同步變化。即 view => model 的變化。

data 中的數(shù)據(jù)變化時(shí)，文本節(jié)點(diǎn)的內(nèi)容同步變化。即 model => view 的變化。

使數(shù)據(jù)對(duì)象變得“可觀測(cè)”

Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性， 并返回這個(gè)對(duì)象。

依賴收集

完成了數(shù)據(jù)的'可觀測(cè)'，即我們知道了數(shù)據(jù)在什么時(shí)候被讀或?qū)懥?#xff0c;那么，我們就可以在數(shù)據(jù)被讀或?qū)懙臅r(shí)候通知那些依賴該數(shù)據(jù)的視圖更新了，為了方便，我們需要先將所有依賴收集起來(lái)，一旦數(shù)據(jù)發(fā)生變化，就統(tǒng)一通知更新。其實(shí)，這就是典型的“發(fā)布訂閱者”模式，數(shù)據(jù)變化為“發(fā)布者”，依賴對(duì)象為“訂閱者”。

訂閱者Watcher

訂閱者Watcher 是一個(gè) 類，在它的構(gòu)造函數(shù)中，定義了一些屬性：

vm:一個(gè)Vue的實(shí)例對(duì)象；

exp:是node節(jié)點(diǎn)的v-model或v-on：click等指令的屬性值。如v-model="name"，exp就是name;

cb:是Watcher綁定的更新函數(shù);

總結(jié)

實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，首先要對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽(tīng)，所以我們需要設(shè)置一個(gè)監(jiān)聽(tīng)器Observer，用來(lái)監(jiān)聽(tīng)所有屬性。如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新。因?yàn)橛嗛喺呤怯泻芏鄠€(gè)，所以我們需要有一個(gè)消息訂閱器Dep來(lái)專門收集這些訂閱者，然后在監(jiān)聽(tīng)器Observer和訂閱者Watcher之間進(jìn)行統(tǒng)一管理的。

代碼

index.html

Document

function myVue (data, el, exp) {

this.data = data;

observable(data); //將數(shù)據(jù)變的可觀測(cè)

el.innerHTML = this.data[exp]; // 初始化模板數(shù)據(jù)的值

new Watcher(this, exp, function (value) {

el.innerHTML = value;

});

return this;

}

var ele = document.querySelector('#name');

var input = document.querySelector('input');

var myVue = new myVue({

name: 'hello world'

}, ele, 'name');

//改變輸入框內(nèi)容

input.oninput = function (e) {

myVue.data.name = e.target.value

}

//改變data內(nèi)容

function changeInput(){

myVue.data.name = "難涼熱血"

}

observer.js

/**

* 把一個(gè)對(duì)象的每一項(xiàng)都轉(zhuǎn)化成可觀測(cè)對(duì)象

* @param { Object } obj 對(duì)象

*/

function observable (obj) {

if (!obj || typeof obj !== 'object') {

return;

}

let keys = Object.keys(obj);

keys.forEach((key) =>{

defineReactive(obj,key,obj[key])

})

return obj;

}

/**

* 使一個(gè)對(duì)象轉(zhuǎn)化成可觀測(cè)對(duì)象

* @param { Object } obj 對(duì)象

* @param { String } key 對(duì)象的key

* @param { Any } val 對(duì)象的某個(gè)key的值

*/

function defineReactive (obj,key,val) {

let dep = new Dep();

Object.defineProperty(obj, key, {

get(){

dep.depend();

console.log(`${key}屬性被讀取了`);

return val;

},

set(newVal){

val = newVal;

console.log(`${key}屬性被修改了`);

dep.notify() //數(shù)據(jù)變化通知所有訂閱者

}

})

}

class Dep {

constructor(){

this.subs = []

}

//增加訂閱者

addSub(sub){

this.subs.push(sub);

}

//判斷是否增加訂閱者

depend () {

if (Dep.target) {

this.addSub(Dep.target)

}

}

//通知訂閱者更新

notify(){

this.subs.forEach((sub) =>{

sub.update()

})

}

}

Dep.target = null;

watcher.js

class Watcher {

constructor(vm,exp,cb){

this.vm = vm;

this.exp = exp;

this.cb = cb;

this.value = this.get(); // 將自己添加到訂閱器的操作

}

get(){

Dep.target = this; // 緩存自己

let value = this.vm.data[this.exp] // 強(qiáng)制執(zhí)行監(jiān)聽(tīng)器里的get函數(shù)

Dep.target = null; // 釋放自己

return value;

}

update(){

let value = this.vm.data[this.exp];

let oldVal = this.value;

if (value !== oldVal) {

this.value = value;

this.cb.call(this.vm, value, oldVal);

}

}

}

總結(jié)

以上是生活随笔為你收集整理的data为long 怎么设置vue_vue基础之data的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。