10分鐘學習vue響應式更新機制及不使用框架實現簡單的數據雙向綁定

時間 2019-11-08

標籤 10分學習 vue 響應更新機制不使框架實現簡單數據雙向綁定简体版

原文原文鏈接

1 前言

最近看到有些人說vue是雙向數據綁定的，有些人說vue是單向數據流的，我認爲這兩種說法都是錯誤的，vue是一款具備響應式更新機制的框架，既能夠實現單向數據流也能夠實現數據的雙向綁定。html

2 單向數據流與數據雙向綁定

單向數據流是指model中的數據發生改變時引發view的改變。vue

雙向數據綁定是指model中的數據發生改變時view的改變，view的改變也會引發model的改變。

//這個是單向數據流，改變這個input的value值並不能是data中的text屬性發生改變。
<input type="text" :value="text">
data:{
    return {
        text:'文本輸入框'
    }
}
//這個是雙向數據綁定，不管是修改model仍是修改view都能引發另外一方的改變。
<input type="text" v-model="text">
data:{
    return {
        text:'文本輸入框'
    }
}
複製代碼

3 vue中的單向數據流實現原理

首先咱們來看如何實現單向數據流git

vue的單向數據流涉及到Object.defineProperty()這個API。github

Object.defineProperty用法:bash

//Object.defineProperty用於數據劫持，能夠監聽一個變量的讀取與寫入，並在發生讀取與寫入的時候執行回調函數
Object.defineProperty(obj,prop,desc);
//obj是要定義的對象，prop是要定義的屬性名，desc是屬性的描述符
複製代碼

舉例：app

//定義一個對象並監聽他的text屬性的存值操做與取值操做
let data={};
Object.defineProperty(data,'text',{
    get() {
        console.log('取值操做');
    },
    set(newVal) {
        console.log('存值操做');
    }
});
console.log('data');
===>輸出:
===>{}
===>取值操做
data.text='文本輸入框';
===>輸出
===>存值操做
複製代碼

有了Object.defineProperty()這個API就能夠監聽model中數據的改變並在數據改變的時候修改視圖達到單向數據流的效果。框架

4 vue中的數據雙向綁定實現原理

vue給咱們提供了實現數據雙向綁定的兩種語法糖，分別v-model和.sync修飾符，v-model用於爲表單元素提供數據雙向綁定，.sync修飾符用於爲任意屬性提供數據雙向綁定，接下來咱們來嘗試不使用vue提供的語法糖，本身實現視圖的數據的改變引發模型的數據的改變。函數

要想view發生改變的時候引發model的改變首先要監聽到view的改變，view發生改變時再去改變model，有了思路以後下面是代碼實現。ui

//首先經過input事件監聽視圖的改變
<input type="text" :value="inputTitle" @input="onInput">
data:{
    return {
        text:'文本輸入框'
    }
},
methods:{
    //視圖發生改變的時候，將視圖的值賦予模型的值，實現數據雙向綁定
    onInput(event) {
        this.text=event.target.value;
    }
}
複製代碼

5 實現一個簡易的數據雙向綁定

下面實現一個簡易的數據雙向綁定，目標是在修改view能夠使model中的變量發生改變，修改model能夠使視圖發生改變。this

//html
<div id="app">
    <input type="text" id="input">
</div>
//js
let input = document.querySelector('#input');
//定義model
let data={
    text:''
};
//監聽model中text的變化，首先實現數據單向流
Object.defineProperty(data,'text',{
   get() {
   
   }，
   //text發生改變的時候，修改input元素的value值 
   set(newVal) {
        input.value=newVal;
   }
});
//監聽input元素的改變並修改model的值，實現數據雙向綁定
input.addEventListener('input',event=> {
    data.text=event.target.value;
});
複製代碼