Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析
前言
之前公司招人，面試了一些的前端同學(xué)，因為公司使用的前端技術(shù)是Vue，所以免不了問到其響應(yīng)式原理和Vue的雙向數(shù)據(jù)綁定。但是這邊面試到的80%的同學(xué)會把兩者搞混，通常我要是先問響應(yīng)式原理再問雙向數(shù)據(jù)綁定原理，來面試的同學(xué)大都會認(rèn)為是一回事，那么這里我們就說一下二者的區(qū)別。
響應(yīng)式原理
是Vue的核心特性之一，數(shù)據(jù)驅(qū)動視圖，我們修改數(shù)據(jù)視圖隨之響應(yīng)更新，就很優(yōu)雅~
Vue2.x是借助Object.defineProperty()實現(xiàn)的，而Vue3.x是借助Proxy實現(xiàn)的，下面我們先來看一下2.x的實現(xiàn)。
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
//攔截get，當(dāng)我們訪問data.key時會被這個方法攔截到
get: function getter () {
//我們在這里收集依賴
return obj[key];
},
//攔截set，當(dāng)我們?yōu)閐ata.key賦值時會被這個方法攔截到
set: function setter (newVal) {
//當(dāng)數(shù)據(jù)變更時，通知依賴項變更UI
}
})
我們通過Object.defineProperty為對象obj添加屬性，可以設(shè)置對象屬性的getter和setter函數(shù)。之后我們每次通過點語法獲取屬性都會執(zhí)行這里的getter函數(shù)，在這個函數(shù)中我們會把調(diào)用此屬性的依賴收集到一個集合中 ；而在我們給屬性賦值(修改屬性)時，會觸發(fā)這里定義的setter函數(shù)，在次函數(shù)中會去通知集合中的依賴更新，做到數(shù)據(jù)變更驅(qū)動視圖變更。
3.x的與2.x的核心思想一致，只不過數(shù)據(jù)的劫持使用Proxy而不是Object.defineProperty，只不過Proxy相比Object.defineProperty在處理數(shù)組和新增屬性的響應(yīng)式處理上更加方便。
let nObj=new Proxy(obj,{
//攔截get，當(dāng)我們訪問nObj.key時會被這個方法攔截到
get: function (target, propKey, receiver) {
console.log(`getting ${propKey}!`);
return Reflect.get(target, propKey, receiver);
},
//攔截set，當(dāng)我們?yōu)閚Obj.key賦值時會被這個方法攔截到
set: function (target, propKey, value, receiver) {
console.log(`setting ${propKey}!`);
return Reflect.set(target, propKey, value, receiver);
}
})
Proxy的詳細(xì)使用方法參考ES6教程。
Vue的響應(yīng)式原理的實現(xiàn)細(xì)節(jié)相信大多數(shù)同學(xué)已經(jīng)很熟悉了，這里就不在展開細(xì)談了，如果還想更詳細(xì)的了解，或者想要做一個簡易的Vue實現(xiàn)，可以參考這篇Vue原理，相信你會有不小收獲。
雙向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定通常是指我們使用的v-model指令的實現(xiàn)，是Vue的一個特性，也可以說是一個input事件和value的語法糖。 Vue通過v-model指令為組件添加上input事件處理和value屬性的賦值。
<template> <input v-model='localValue'/> </template>
上述的組件就相當(dāng)于如下代碼
<template>
<!-- 這里添加了input時間的監(jiān)聽和value的屬性綁定 -->
<input @input='onInput' :value='localValue' />
<span>{{localValue}}</span>
</template>
<script>
export default{
data(){
return {
localValue:'',
}
},
methods:{
onInput(v){
//在input事件的處理函數(shù)中更新value的綁定值
this.localValue=v.target.value;
console.log(this.localValue)
}
}
}
</script>
<template>
<div>
<input @input='onInput' :value='localValue' />
<span>{{localValue}}</span>
</div>
</template>
<script>
// import Vue from 'vue';
export default{
data(){
return {
localValue:'hello',
}
},
methods:{
onInput(v){
this.localValue=v.target.value;
console.log(this.localValue)
}
}
}
</script>
<style>
.count {
color: red;
}
</style>
因此當(dāng)我們修改input輸入框中的值時，我們通過v-model綁定的值也會同步修改，基于上述原理，我們可以很容易的實現(xiàn)一個數(shù)據(jù)雙向綁定的組件。
v-model實踐
首先我們定義一個Vue組件，相信大家已經(jīng)很熟悉了。
<tempalte>
<div class="count" @click="addCount">click me {{value}}</div>
</template>
<script>
export default{
props:{
//關(guān)鍵的第一步：設(shè)置一個value屬性
value:{
type:Number,
default:0
}
},
watch:{
//監(jiān)聽value變化，更新組件localvalue狀態(tài)
value(v){
this.localvalue=v;
}
},
methods:{
//關(guān)鍵的第二步：事件觸發(fā)localvalue變更，通過事件同步父組件狀態(tài)變更
addCount(){
this.localvalue++;
this.$emit('input',this.localvalue);
}
},
data(){
return{
//組件狀態(tài)，遵守單項數(shù)據(jù)流原則，不直接修改props中的屬性
localvalue:0
}
},
created(){
//初始化獲取value值
this.localvalue=this.value;
}
}
</script>
上面的組件定了我們通過在props中添加value屬性，并且在值更新時觸發(fā)input事件。created鉤子和watch中為localvalue賦值是為了同步父組件狀態(tài)到子組件中。
通過上面??的組件定義，我們就可以在組件上使用v-model指令做雙向數(shù)據(jù)綁定了。
<template>
<add-one v-model="count"></add-one>
<span>父組件{{count}}</span>
</tempalte>
<script>
export default{
data() {
return {
count: 0,
};
},
methods: {
},
created(){
}
}
</script>
下面是實際效果
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
Vue.directive('mymodel', {
bind(el, binding, vnode, oldVnode) {
//組件和原生input標(biāo)簽需要分別處理，
el.value = binding.value;
if (vnode.tag == 'input') {
//監(jiān)聽綁定的變量
vnode.context.$watch(binding.expression, (v) => {
el.value = v;
})
//添加inout事件監(jiān)聽
el.addEventListener('input', (e) => {
//context是input所在的父組件，這一步是同步數(shù)據(jù)
vnode.context[binding.expression] = e.target.value;
})
} else { //組件
//vnode的結(jié)構(gòu)可以參見文檔。不過我覺得最直觀的方法就是直接在控制臺打印處理
let {
componentInstance,
componentOptions,
context
} = vnode;
const {
_props
} = componentInstance;
//處理model選項
if (!componentOptions.Ctor.extendOptions.model) {
componentOptions.Ctor.extendOptions.model = {
value: 'value',
event: 'input'
}
}
let modelValue = componentOptions.Ctor.extendOptions.model.value;
let modelEvent = componentOptions.Ctor.extendOptions.model.event;
//屬性綁定，這里直接修改了屬性，沒有想到更好的辦法，友好的意見希望可以提出
console.log(binding)
_props[modelValue] = binding.value;
context.$watch(binding.expression, (v) => {
_props[modelValue] = v;
})
//添加事件處理函數(shù),做數(shù)據(jù)同步
componentInstance.$on(modelEvent, (v) => {
context[binding.expression] = v;
})
}
},
inserted() {},
update() {},
componentUpdated() {},
unbind() {},
})
Vue.component('add-one', {
template: '<div class="count" @click="addCount">click me {{localvalue}}</div>',
props: {
value: {
type: Number | String,
default: -1
}
},
//自定義value和事件
// model: {
// value: 'count',
// event: 'change'
// },
watch: {
//監(jiān)聽value變化，更新組件localvalue狀態(tài)
value(v) {
this.localvalue = v;
}
},
methods: {
//事件觸發(fā)localvalue變更，通過事件同步父組件狀態(tài)變更
addCount() {
this.localvalue++;
this.$emit('input', this.localvalue);
}
},
data() {
return {
localvalue: 0
}
},
created() {
//初始化獲取value值
console.log(this.value)
this.localvalue = this.value;
}
})
new Vue({
el: '#app',
data() {
return {
count: 0,
};
},
methods: {},
created() {
}
})當(dāng)然我們也可以不使用value和input事件這樣的組合，為了更使得組件的定義更加符合語義，我們也可以自定義要實現(xiàn)雙向綁定的屬性和事件。 我們在組件的model選項中設(shè)置value和event即可。如下：
export default{
//這里做了一個value和event的映射
model:{
value:'count',
event:'change'
},
props:{
//關(guān)鍵的第一步：設(shè)置一個value屬性
count:{
type:Number,
default:0
}
},
methods:{
//關(guān)鍵的第二步：事件觸發(fā)localvalue變更，通過事件同步父組件狀態(tài)變更
addCount(){
this.localvalue++;
this.$emit('change',this.localvalue);
}
},
}
通過上面的組件定義
<add-one v-model="count"></add-one>
就相當(dāng)于
<template>
<add-one @change='onChange' :count='count'></add-one>
<span>{{count}}</span>
</template>
<script>
export default{
data(){
return {
count:0,
}
},
methods:{
onChange(v){
this.count=v;
console.log(this.count)
}
}
}
</script>
只不過v-model指令幫我們做上面的事件添加，屬性綁定和狀態(tài)同步操作罷了。
以上就是Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析的詳細(xì)內(nèi)容，更多關(guān)于Vue響應(yīng)式雙向數(shù)據(jù)綁定的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)
這篇文章主要介紹了Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue 2.0組件與v-model的相關(guān)資料，文中介紹的非常詳細(xì)，本文適合初學(xué)組件編寫的同學(xué)閱讀，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
在Vue頁面中,可以使用多種方法來監(jiān)聽鍵盤按鍵,這篇文章主要為大家整理了五種常用的方法,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考下2023-10-10
Vue組件間的通信pubsub-js實現(xiàn)步驟解析
這篇文章主要介紹了Vue組件間的通信pubsub-js實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
vue項目中的數(shù)據(jù)變化被watch監(jiān)聽并處理
這篇文章主要介紹了vue項目中的數(shù)據(jù)變化被watch監(jiān)聽并處理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Elementui表格組件+sortablejs實現(xiàn)行拖拽排序的示例代碼
這篇文章主要介紹了Elementui表格組件+sortablejs實現(xiàn)行拖拽排序，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)簡單購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個頁面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue項目安裝scss常見報錯處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vite創(chuàng)建一個標(biāo)準(zhǔn)vue3+ts+pinia項目
本文主要介紹了vite創(chuàng)建一個標(biāo)準(zhǔn)vue3+ts+pinia項目，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05