vue2與vue3雙向數(shù)據(jù)綁定的區(qū)別說明

更新時(shí)間：2022年04月01日 10:46:30 作者：star@星空

這篇文章主要介紹了vue2與vue3雙向數(shù)據(jù)綁定的區(qū)別說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue2與vue3雙向數(shù)據(jù)綁定區(qū)別

新的響應(yīng)式機(jī)制采用了ES6的ProxyApi，拋棄了Object.defineProperty()

Vue2雙向數(shù)據(jù)綁定存在的問題

關(guān)于對象： Vue 無法檢測 property 的添加或移除。由于 Vue 會在初始化實(shí)例時(shí)對property執(zhí)行 getter/setter轉(zhuǎn)化，所以property必須在 data對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。

關(guān)于數(shù)組： Vue 不能檢測以下數(shù)組的變動：

當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue

當(dāng)你修改數(shù)組的長度時(shí)，例如：vm.items.length = newLength

在官網(wǎng)深入響應(yīng)式原理一章有較詳細(xì)闡述，針對以上兩種情況解決方法，官網(wǎng)也有給出答案，那就是使用set方法。

原理

Vue2.0使用Object.defineProperty對象以及對象屬性的劫持+發(fā)布訂閱模式，只要數(shù)據(jù)發(fā)生變化直接通知變化并驅(qū)動視圖更新。

?<input type="text" id="in"/> 輸入的值為：<span id="out"></span>

var int = document.getElementById('in');
var out = document.getElementById('out');
// 定義一個(gè)對象
const data={name:'peak',age:10}
// 遍歷對象 實(shí)現(xiàn)對對象的屬性進(jìn)行劫持
Object.keys(data).forEach((key) => {
? ?Object.defineProperty(data, key, {
? ? ?// 當(dāng)且僅當(dāng)該屬性的enumerable為true時(shí)，該屬性才能夠出現(xiàn)在對象的枚舉屬性中
? ? ?enumerable: true,
? ? ?// 當(dāng)且僅當(dāng)該屬性的 configurable 為 true 時(shí)，該屬性描述符才能夠被改變，同時(shí)該屬性也能從對應(yīng)的對象上被刪除
? ? ?configurable: true,?
? ? ?get: ()=>{ // 一個(gè)給屬性提供 getter 的方法
? ? ? ?console.info(`get ${key}-${val}`)
? ? ? ?return val;
? ? ?},
? ? ?set: (newVal)=>{ // 一個(gè)給屬性提供 setter 的方法
? ? ? ?// 當(dāng)屬性值發(fā)生變化時(shí)我們可以進(jìn)行額外操作 如調(diào)用監(jiān)聽器
? ? ? ?if(newVal === val ){ // 如果未發(fā)生變化 不做其他操作
? ? ? ? return;
? ? ? ?}?
? ? ? ?console.log(`觸發(fā)視圖更新函數(shù)${newVal}`);
? ? ? ?out.innerHTML = newVal;
? ? ?},
? ?}); ??
});
int.addEventListener('input', function(e) {
? ? obj.name = e.target.value;
})
data.age=25 // 觸發(fā)set方法?

vue3.0雙向數(shù)據(jù)綁定Proxy

Vue3.0中的響應(yīng)式采用了ES6中的Proxy方法。

Proxy 對象用于定義基本操作的自定義行為（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）

語法：

const p = new Proxy(target, handler)

參數(shù)target表示要使用Proxy包裝的對象（可以是任何類型的對象，包括原生數(shù)組，函數(shù)，甚至另一個(gè)代理）

參數(shù)handler是一個(gè)通常以函數(shù)作為屬性的對象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時(shí)代理p 的行為

let obj = {
? ? a: 1,
? ? b: 2
}
const proxy = new Proxy(obj, {
? ? get: function(target, prop, receiver) {
? ? ? ? return prop in target ? target[prop] : 0
? ? },
? ? set: function(target, prop, value, receiver) {
? ? ? ? target[prop] = 666
? ? }
})
console.log(proxy.a) // 1
console.log(proxy.c) // 0
proxy.a = 10
console.log(proxy.a) // 666
obj.b = 10
console.log(proxy.b) // 不是666 而是10?

以上代碼中obj是我們要代理的目標(biāo)對象，get，set方法是參數(shù)handler的兩個(gè)屬性，具體如下：

handler.get()接收三個(gè)參數(shù)，第一個(gè)參數(shù)target為代理的目標(biāo)對象，第二個(gè)參數(shù)prop是代理的目標(biāo)對象的屬性，第三個(gè)參數(shù)是Proxy或者繼承Proxy的對象，通常是proxy本身。
handler.set()接收四個(gè)參數(shù)，其中三個(gè)參數(shù)都與get方法相同，唯獨(dú)多出來一個(gè)value表示新的屬性值。

上述代碼表示當(dāng)訪問proxy的屬性時(shí)，進(jìn)行攔截判斷，該屬性是否是目標(biāo)對象的屬性，如果是那么就將其值返回出來，否則就返回0。

當(dāng)對proxy上的屬性進(jìn)行重寫時(shí)，將重寫的該屬性賦值為666。

注意：此時(shí)對數(shù)據(jù)的劫持，只是劫持了代理對象proxy，而跟原對象obj沒有任何關(guān)系，對obj進(jìn)行操作，也不會監(jiān)聽到。

用proxy實(shí)現(xiàn)一個(gè)簡易版的數(shù)據(jù)響應(yīng)：

<body>
? ? <h2 id="app"></h2>
? <input id="input" type="text" />
</body>

let app = document.getElementById('app')
let input = document.getElementById('input')
let obj = { // 源數(shù)據(jù)
? text:'hello world'
}
let proxy = new Proxy(obj, {
? set: function(target, prop, value){ // input事件觸發(fā)進(jìn)行劫持，觸發(fā)update方法
? ? target[prop] = value
? ? update(value)
? }
})
function update(value){ // update方法用于同步dom更新
? ? app.innerHTML = value
? ? input.value = value
}
input.addEventListener('input',function(e){ // 監(jiān)聽input數(shù)據(jù)變化，并修改proxy的值
? proxy.text = e.target.value
})
proxy.text = obj.text // 初始化源數(shù)據(jù)

vue語法:數(shù)據(jù)的雙向綁定

1.指令v-model

使用v-model可以為輸入元素創(chuàng)建數(shù)據(jù)雙向綁定，他會根據(jù)元素的類型自動選取正確的方法來更新元素。下面的代碼演示了單行文本框、多行文本框、單選按鈕，復(fù)選框以及下拉選擇框做了一個(gè)簡單的演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令v-model</title>
</head>
<body>
<div id="app">
    <h3>1.單行文本框</h3>
    <input type="text" v-model="singleText" style="width: 240px;">
    <p>{{singleText}}</p>
    <h3>2.多行文本框</h3>
    <textarea v-model="multiText" style="width: 240px;"></textarea>
    <p>{{multiText}}</p>
    <h3>3.單選框</h3>
    <!--由于點(diǎn)擊被選中的單選項(xiàng)無法取消其被選中的狀態(tài)，所以一般沒有使用單個(gè)選項(xiàng)的場景，設(shè)置v-model共用一個(gè)變量(radioValue)可以實(shí)現(xiàn)RadioGroup的效果-->
    <input id="ra" type="radio" value="張三" v-model="radioValue">
    <label for="ra">A.張三</label>
    <input id="rb" type="radio" value="李四" v-model="radioValue">
    <label for="rb">B.李四</label>
    <p>{{radioValue}}</p>
    <h3>4.單個(gè)復(fù)選框</h3>
    <!--單個(gè)復(fù)選框被用于true和false的切換-->
    <input id="c" type="checkbox" v-model="toggleValue">
    <label for="c">噠噠噠</label>
    <p>{{toggleValue}}</p>
    <h3>5.多個(gè)復(fù)選框</h3>
    <!--多個(gè)復(fù)選框，v-model接受數(shù)組類型的變量-->
    <input id="ca" type="checkbox" value="AAA" v-model="checkedValues">
    <label for="ca">AAAA</label>
    <input id="cb" type="checkbox" value="BBB" v-model="checkedValues">
    <label for="cb">BBBB</label>
    <input id="cc" type="checkbox" value="CCC" v-model="checkedValues">
    <label for="cc">CCCC</label>
    <p>{{checkedValues.join(',')}}</p>
    <h3>6.單項(xiàng)下拉選擇框</h3>
    <select v-model="singleSelect">
        <!--如果沒有設(shè)置value值，則option節(jié)點(diǎn)的文本值會被當(dāng)做value值-->
        <option value="zhangsan">張三</option>
        <option >李四</option>
    </select>
    <p>{{singleSelect}}</p>
    <h3>7.多項(xiàng)下拉選擇框</h3>
    <select multiple v-modle="multiSelect">
        <!--按住Ctrl，可執(zhí)行多選-->
        <option value=1>語文</option>
        <option value=2>數(shù)學(xué)</option>
        <option value=3>歷史</option>
        <option :value="4">地理</option>
    </select>
    <p>{{multiSelect.join(',')}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                singleText:'',
                multiText:'',
                radioValue:'',
                toggleValue:false,
                checkedValues:[],
                singleSelect:'zhangsan',
                multiSelect:[1,3]
            }
        },
        methods:{
        }
    });
</script>
</body>
</html>

2.v-model與修飾符

修飾符	可用版本	說明
.lazy	所有	將用戶輸入的數(shù)據(jù)賦值于變量的時(shí)間有輸入時(shí)延遲到數(shù)據(jù)改變時(shí)
.number	所有	自動轉(zhuǎn)換用戶輸入為數(shù)值類型
.trim	所有	自動過濾用戶輸入的首尾的空白字符

下面的代碼展示了trim和number的簡單用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model與修飾符</title>
</head>
<body>
<div id="app">
    <input type="text" v-model.trim.number="text" @keyup="handleKeyUp">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:()=>({
           text:''
        }),
        methods:{
            handleKeyUp(event) {
                console.log(this.text,typeof this.text)
            }
        }
    });
</script>
</body>
</html>

3.v-model與自定義組件

在自定義組件中，value屬性和input事件尤為重要，value屬性用于接收外部傳入的值以更新組件內(nèi)部的狀態(tài)，input事件由開發(fā)者決定在什么事件調(diào)用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model與修飾符</title>
</head>
<body>
<div id="app">
    <!--自定義組件-->
    <custom-screen v-model="text"></custom-screen><br>
    <input type="text" v-model.trim.number="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    Vue.component('custom-screen',{
        //使用value屬性接收外部傳入的值
        props:['value'],
        methods: {
            handleReset(){
                console.log('重置為\'\'');
                this.$emit('input','');//使用$emit發(fā)送input事件，并將目標(biāo)值作為參數(shù)傳出
            }
        },
        template:'<div>\n' +
            '    <h2>輸入值為：{{value}}</h2>\n' +
            '    <button @click="handleReset">重置為空</button>\n' +
            '</div>'
    })
    var app = new Vue({
        el:'#app',
        data:()=>({
           text:''
        }),
        methods:{
        }
    });
</script>
</body>
</html>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: