vue2之響應式雙向綁定,在對象或數(shù)組新增屬性頁面無響應的情況

更新時間：2023年04月20日 15:50:11 作者：潮汐未見潮落

這篇文章主要介紹了vue2之響應式雙向綁定,在對象或數(shù)組新增屬性頁面無響應的情況及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue2響應式雙向綁定,在對象或數(shù)組新增屬性頁面無響應

問題描述

vue2 中可以將數(shù)據(jù)與視圖進行綁定，修改 data 對象的屬性值將引起對應視圖的改變。

Vue2的數(shù)據(jù)視圖綁定是通過JS特性這一語法實現(xiàn)，其使用中存在數(shù)據(jù)屬性丟失的這一 bug，主要針對 對象或數(shù)組 屬性丟失。

使用 antv 的 a-select （下拉框）組件，使用 v-mode 綁定對象的值，但是對象之前是沒有賦值的，是一個空對象，這就導致了頁面視圖不刷新，但是屬性值有變化，這可以說是 vue2 的一個缺陷。

// 空對象

queryParam:?{

??????},

解決方法

方法一（設置初始值）

給綁定的對象 賦初始值 null 或者 ' '

  queryParam: {
        approveStatus : null ,    
      },

如果是普通 輸入框 input ，這樣的方法沒什么問題，但是我的頁面使用 a-select 下拉框，默認有提示消息（ placeholder），如果賦初始值為空，下拉框會填充空白內(nèi)容，覆蓋之前的提示消息，這樣的頁面會比較不美觀且不友好

  <a-select  v-model="queryParam.approveStatus" placeholder="審核狀態(tài)" :allowClear="true">
        <a-select-option v-for="status of videoApproveStatus" :key="status.id">
                 {{  status.text }}
        </a-select-option>
 </a-select>
                    
  <a-select  v-model="queryParam.videotypeid" placeholder="視頻類型" :allowClear="true">
         <a-select-option v-for="d in videotype" :key="d.myid">
                 {{ d.name }}
          </a-select-option>
   </a-select>

雖然這種方法可以解決綁定對象屬性丟失問題，但是如果給 每個屬性設置初始值為 null，那么所有的下拉框都是空白，可以看到下拉框賦初始值為 null ，頁面的效果非常不友好，沒有提示信息，所有這種方法不推薦

方法二（創(chuàng)建一個新的對象,替換原對象）

這種方法可以用于需要添加多個新屬性,再把原對象與新屬性合并到新對象中

Object.assign(目標對象,原對象, 新屬性)

this.queryParam = Object.assign({}, this.queryParam, obj)

我這里是利用 a-select 下拉框自帶的下拉框改變方法，@change ，該方法有兩個參數(shù) value 和 option ，value 代表你改變的值，option （我也不太明白，反正里面東西很多），然后我利用這個 @change 方法和 Object.assign(目標對象,原對象, 新屬性)，解決了狀態(tài)丟失問題，大家可以參考下面的代碼，根據(jù)自己的實際情況進行調(diào)整（每個人的情況都不一樣）

 <a-select @change="handleChange"  v-model="queryParam.approveStatus" placeholder="審核狀態(tài)" :allowClear="true">
       <a-select-option v-for="status of videoApproveStatus" :key="status.id">
               {{  status.text }}
       </a-select-option>
 </a-select>

 handleChange(value,option) { 
      if(option) {
        //  解決雙向綁定狀態(tài)丟失
          this.queryParam = Object.assign({}, this.queryParam, option.context.queryParam)
      } else {
        return 
      } 
    },

vue2實現(xiàn)響應式數(shù)據(jù)

JS中的對象屬性

JS的對象有兩種屬性進行描述分別是數(shù)據(jù)屬性和訪問器屬性。

數(shù)據(jù)屬性有四個值：

[[Configurable]] 表示是否可以刪除定義，是否可以修改屬性，默認為true
[[Enumberable]] 是否可以迭代
[[Writable]] 是否可以被修改
[[Value]] 對象具體的值

而訪問器屬性也有四個值：

[[Configurable]] 表示是否可以刪除定義，是否可以修改屬性，默認為true
[[Enumberable]] 是否可以迭代
[[Get]] 獲取函數(shù)，讀取屬性值時使用
[[Set]] 設置函數(shù)，寫入屬性時調(diào)用

那么如何實現(xiàn)數(shù)據(jù)響應呢？

利用Object.defineProperty()進行數(shù)據(jù)劫持

實現(xiàn)響應式的前提是可以捕捉到到數(shù)據(jù)的更改，獲取數(shù)據(jù)同理，這就需要利用JS對象的訪問器屬性，而更改這些屬性就要用到JS中的一個方法 Object.defineProperty() 上述的屬性在更改時，哪怕更改一個屬性，所有屬性都會變?yōu)槟J值。

具體使用方法如下：

let obj = {name:'Ton', age: 19}
_value = obj.name
Object.defineProperty(obj, name, {
? ? get(){
? ? ? ? return _value
? ? },
? ? set(newValue){
? ? ? ?_value = newValue
? ? }
})

方法的參數(shù)分別是 Object.defineProperty(對象名, 屬性名, {執(zhí)行器})

而get 函數(shù)在讀取該對象屬性時調(diào)用，返回的值為讀取的值； set 函數(shù)會在設置新值時調(diào)用傳入的newValue為新值。

在Vue中會用data一個對象包裹所有的值，因此可以用遍歷的方法給每個屬性加上該方法。

將該邏輯封裝到一個函數(shù)中：

let data = {
? ? name: 'Ton',
? ? age: 19,
? ? salary: '10k'
}

Object.keys(data).forEach( key => {?
? ? observe(data, key, data[key])
})
//形成閉包 內(nèi)部的變量不會消失
function observe(obj, key, value){
? ? Object.defineProperty(obj, key, {
? ? ? ? get(){
? ? ? ? ? ? return value
? ? ? ? },
? ? ? ? set(newValue){
? ? ? ? ? ? value = newValue
? ? ? ? }
? ? })
}

這樣data中的所有變量都會被綁定，但如果嵌套對象或數(shù)組，內(nèi)部的對象不會被檢測到。（可以用vue提供的 $set和 $delate 處理或使用內(nèi)部重寫的數(shù)組方法）

與標簽聯(lián)動

與標簽聯(lián)動的方法有許多，最簡單的是使用id 來綁定，而Vue中是使用指令的方式。

過程主要分兩步：

獲取dom
將數(shù)據(jù)放上去

...
<div id="app">
? ? <div v-test="name" class="box"></div>
? ? <div v-test="age" class="box"></div>
</div>
...
function compile(){
? ? let app = document.getElementById('app')
? ? //獲取所有的子節(jié)點 值為3的是text節(jié)點 1為子標簽節(jié)點
? ? app.childNodes.forEach( node => {
? ? ? ? if(node.nodeType === 1){
? ? ? ? ? ? //遍歷該節(jié)點的屬性 找出 v-text?
? ? ? ? ? ? //node.attributes是個類數(shù)組對象, 先轉(zhuǎn)化為數(shù)組
? ? ? ? ? ? Array.from(node.attributes).forEach( key => {
? ? ? ? ? ? ? ? //解構對象 nodeName 找到屬性
? ? ? ? ? ? ? ? let { nodeName, nodeValue } = key?
? ? ? ? ? ? ? ? ?//如果存在 則修改值（關鍵步驟）
? ? ? ? ? ? ? ? if(nodeName === 'v-test'){
? ? ? ? ? ? ? ? ?? ?node.innerText = data[nodeValue]
? ? ? ? ? ? ? ??? ?}
? ? ? ? ? ? })
? ? ? ? }
? ? })
}
compile()
...

此時可以獲取節(jié)點，并賦值數(shù)據(jù)，與數(shù)據(jù)劫持聯(lián)動，最終結果如下：

let data = { name: 'Ton', age: 19}
//劫持數(shù)據(jù)
Object.keys(data).forEach(key => {
? ? observe(data, key, data[key])
})
//形成閉包 內(nèi)部的變量不會消失
function observe(obj, key, value) {
? ? Object.defineProperty(obj, key, {
? ? ? ? get() {
? ? ? ? ? ? return value?
? ? ? ? },
? ? ? ? set(newValue) {
? ? ? ? ? ? value = newValue
? ? ? ? ? ? compile()
? ? ? ? }
? ? })
}
//獲取元素 將數(shù)據(jù)放入
function compile(){
? ? let app = document.getElementById('app')
? ? //獲取所有的子節(jié)點 包括很多節(jié)點 3 為text 節(jié)點 1為子標簽節(jié)點
? ? app.childNodes.forEach( node => {
? ? ? ? if(node.nodeType === 1){
? ? ? ? ? ? //遍歷該節(jié)點的屬性 找出 v-text?
? ? ? ? ? ? //node.attributes是個類數(shù)組對象, 先轉(zhuǎn)化為數(shù)組
? ? ? ? ? ? let result = Array.from(node.attributes).filter( key => {
? ? ? ? ? ? ? ? //結構屬性的 nodeName 找到屬性
? ? ? ? ? ? ? ? let { nodeName } = key?
? ? ? ? ? ? ? ? return nodeName === 'v-test'
? ? ? ? ? ? })
? ? ? ? ? ? if(result){
? ? ? ? ? ? ? ? node.innerText = data[result[0].nodeValue]
? ? ? ? ? ? }
? ? ? ? }
? ? })

}
compile()

每次修改也會引起DOM元素的修改，實現(xiàn)響應式。

v-model的實現(xiàn)

同v-test（v-on）的不同，v-model要實現(xiàn)雙向綁定，即 input框輸入的值也需要傳回data。實現(xiàn)的邏輯前面是相同的，都需要獲取元素，但需要新增將input輸入框的內(nèi)容，傳回。

let data = { name: 'Ton', age: 19}
//劫持數(shù)據(jù)
Object.keys(data).forEach(key => {
? ? observe(data, key, data[key])
})
//形成閉包 內(nèi)部的變量不會消失
function observe(obj, key, value) {
? ? Object.defineProperty(obj, key, {
? ? ? ? get() {
? ? ? ? ? ? return value?
? ? ? ? },
? ? ? ? set(newValue) {
? ? ? ? ? ? value = newValue
? ? ? ? ? ? compile()
? ? ? ? }
? ? })
}
//獲取元素 將數(shù)據(jù)放入
function compile(){
? ? let app = document.getElementById('app')
? ? //獲取所有的子節(jié)點 包括很多節(jié)點 3 為text 節(jié)點 1為子標簽節(jié)點
? ? app.childNodes.forEach( node => {
? ? ? ? if(node.nodeType === 1){
? ? ? ? ? ? //遍歷該節(jié)點的屬性 找出 v-text?
? ? ? ? ? ? //node.attributes是個類數(shù)組對象, 先轉(zhuǎn)化為數(shù)組
? ? ? ? ? ? let result = Array.from(node.attributes).filter( key => {
? ? ? ? ? ? ? ? //結構屬性的 nodeName 找到屬性
? ? ? ? ? ? ? ? let { nodeName } = key?
? ? ? ? ? ? ? ? return nodeName === 'v-model'
? ? ? ? ? ? })
? ? ? ? ? ? if(result){
? ? ? ? ? ? ? ? node.value = data[result[0].nodeValue]
? ? ? ? ? ? ? ? addEventLisener('input', e => {
?? ??? ??? ??? ??? ??? ?data[result[0].nodevalue] = e.target.value?
?? ??? ??? ??? ??? ?}
? ? ? ? ? ? ? ? )
? ? ? ? ? ? }
? ? ? ? }
? ? })

}
compile()

但目前的方法并不完美，需要添加一個防抖函數(shù)

let data = { name: 'Ton', age: 19}
//劫持數(shù)據(jù)
Object.keys(data).forEach(key => {
? ? observe(data, key, data[key])
})
//形成閉包 內(nèi)部的變量不會消失
function observe(obj, key, value) {
? ? Object.defineProperty(obj, key, {
? ? ? ? get() {
? ? ? ? ? ? return value?
? ? ? ? },
? ? ? ? set(newValue) {
? ? ? ? ? ? value = newValue
? ? ? ? ? ? compile()
? ? ? ? }
? ? })
}
//獲取元素 將數(shù)據(jù)放入
function compile(){
? ? let app = document.getElementById('app')
? ? //獲取所有的子節(jié)點 包括很多節(jié)點 3 為text 節(jié)點 1為子標簽節(jié)點
? ? app.childNodes.forEach( node => {
? ? ? ? if(node.nodeType === 1){
? ? ? ? ? ? //遍歷該節(jié)點的屬性 找出 v-text?
? ? ? ? ? ? //node.attributes是個類數(shù)組對象, 先轉(zhuǎn)化為數(shù)組
? ? ? ? ? ? let result = Array.from(node.attributes).filter( key => {
? ? ? ? ? ? ? ? //結構屬性的 nodeName 找到屬性
? ? ? ? ? ? ? ? let { nodeName } = key?
? ? ? ? ? ? ? ? return nodeName === 'v-model'
? ? ? ? ? ? })
? ? ? ? ? ? if(result){
? ? ? ? ? ? ? ? node.value = data[result[0].nodeValue]
? ? ? ? ? ? ? ? addEventLisener('input', debounce(handel, result[0].nodeValue)
? ? ? ? ? ? }
? ? ? ? }
? ? })
?? ?function debounce(fn, key, timer = 1000){
?? ??? ?let t = null
?? ??? ?return function(){
?? ??? ??? ?if(t) { clearTimeout(t) }
?? ??? ??? ?t= setTimeOut( _ => {
?? ??? ??? ??? ?t = null
?? ??? ??? ??? ?fn.call(this, key, arguments)
?? ??? ??? ?},timer)
?? ??? ?}
?? ?}
?? ?function handel(key, event){
?? ??? ?data[key] = event.target.value
?? ?}
}
compile()

總結

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

您可能感興趣的文章:

復刻畫龍產(chǎn)品vue實現(xiàn)新春氣泡兔
這篇文章主要為大家介紹了復刻畫龍產(chǎn)品之使用vue實現(xiàn)新春氣泡兔示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
詳解Vue 多級組件透傳新方法provide/inject
這篇文章主要介紹了詳解Vue 多級組件透傳新方法provide/inject，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue內(nèi)置組件Teleport的使用
Teleport是一個內(nèi)置組件，它可以將一個組件內(nèi)部的一部分模板“傳送”到該組件的?DOM?結構外層的位置去，本文就來介紹一下如何使用，感興趣的可以了解一下
2023-05-05
Vue中使用mixin擴展組件功能的基本步驟
Mixin是面向?qū)ο蟪绦蛟O計語言中的類,提供了方法的實現(xiàn),其他類可以訪問mixin類的方法而不必成為其子類在Vue中,可以使用mixin來擴展組件的功能,本文給大家介紹了Vue中如何使用mixin擴展組件功能,需要的朋友可以參考下
2024-11-11
vue組件實現(xiàn)可搜索下拉框擴展
這篇文章主要為大家詳細介紹了vue組件實現(xiàn)可搜索下拉框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-06-06
Vue CLI 3搭建vue+vuex最全分析(推薦)
這篇文章主要介紹了Vue CLI 3搭建vue+vuex最全分析(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
跟混亂的頁面彈窗說再見
這篇文章主要介紹了跟混亂的頁面彈窗說再見，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法
這篇文章主要給大家介紹了關于Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2023-02-02
淺談vue+webpack項目調(diào)試方法步驟
本篇文章主要介紹了淺談vue+webpack項目調(diào)試方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vuex中的5個屬性使用方法舉例講解
vuex是專門為Vue.js應用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關于vuex中5個屬性使用方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04