vue2.0 給data對(duì)象新增屬性，并觸發(fā)視圖更新

如下代碼，給 student對(duì)象新增 age 屬性

data () {
  return {
    student: {
      name: '',
      sex: ''
    }
  }
}

眾所周知，直接給student賦值操作，雖然可以新增屬性，但是不會(huì)觸發(fā)視圖更新

mounted () {
  this.student.age = 24
}

原因是：受 ES5 的限制，Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)?Vue.js 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對(duì)象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。

要處理這種情況，我們可以使用$set()方法，既可以新增屬性,又可以觸發(fā)視圖更新。

但是，值得注意的是，網(wǎng)上一些資料寫(xiě)的$set()用法存在一些問(wèn)題，導(dǎo)致在新接觸這個(gè)方法的時(shí)候會(huì)走一些彎路！

錯(cuò)誤寫(xiě)法：this.$set(key,value)（ps: 可能是vue1.0的寫(xiě)法）

mounted () {
  this.$set(this.student.age, 24)
}

正確寫(xiě)法：this.$set(this.data,”key”,value')

mounted () {
  this.$set(this.student,"age", 24)
}

補(bǔ)充知識(shí)：Vue 中 $set() 與 Vue.set() 原理及使用

1. 前言

問(wèn)題： 在使用 vue 進(jìn)行開(kāi)發(fā)的過(guò)程中，可能會(huì)遇到一種情況：當(dāng)生成vue實(shí)例后，再次給數(shù)據(jù)賦值時(shí)，有時(shí)候并不會(huì)自動(dòng)更新到視圖上去。也就是如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會(huì)觸發(fā)視圖更新。

案例：

<template>
 <div class="home">
  <div v-for="(item,index) in items" :key="index">{{item}}</div>
 <button @click="btn()">修改</button>
 </div>
</template>

<script>
export default {
 name: 'Home',
 data(){
  return{
  items:[1, 2, 3]
   }
 },
 methods:{
 btn(){
     this.items[1] = 'two'
  console.log(this.items);
 }
  }
}
</script>

頁(yè)面：

控制臺(tái)：

原因： 受 ES5 的限制，Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)?Vue.js 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對(duì)象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。

因此： Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：

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

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

例如：使用 this.arr[0] 去更新 array 的內(nèi)容，視圖沒(méi)有刷新

使用 Vue.set(this.arr, 0, !this.arr[0]) 去更新 array 的內(nèi)容，視圖被刷新

使用 this.arr[0] = !this.arr[0] 和 this.obj.a = !this.obj.a 同時(shí)更新，視圖被刷新

結(jié)論：

如果方法里面單純的更新數(shù)組 Array 的話，要使用 Vue.set()；

如果方法里面同時(shí)有數(shù)組和對(duì)象的更新，直接操作 data 即可;

2. 原理

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象，它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴(lài)，之后當(dāng)依賴(lài)項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

受現(xiàn)代 JavaScript 的限制 (而且 Object.observe 也已經(jīng)被廢棄)，Vue 不能檢測(cè)到對(duì)象屬性的添加或刪除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過(guò)程，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。

3. $set() 與 Vue.set() 的使用

3.1 通過(guò) Vue.set() 改寫(xiě)

語(yǔ)法：

Vue.set( target, propertyName/index, value )

參數(shù)：

{Object | Array} target

{string | number} propertyName/index

{any} value

返回值：設(shè)置的值。

用法：

向響應(yīng)式對(duì)象中添加一個(gè) property，并確保這個(gè)新 property 同樣是響應(yīng)式的，且觸發(fā)視圖更新。

它必須用于向響應(yīng)式對(duì)象上添加新 property，因?yàn)?Vue 無(wú)法探測(cè)普通的新增 property (比如 this.myObject.newProperty = 'hi')

注意：

對(duì)象不能是 Vue 實(shí)例，或者 Vue 實(shí)例的根數(shù)據(jù)對(duì)象。

<template>
 <div class="home">
  <div v-for="(item,index) in items" :key="index">{{item}}</div>
  <button @click="btn()">修改</button>
 </div>
</template>

<script>
import Vue from 'vue' // 別忘了引入
export default {
 name: 'Home',
 data(){
  return{
  items:[1, 2, 3]
  }
 },
 methods:{
 btn(){
      Vue.set(this.items, 1, 'two')
  console.log(this.items);
 }
 }
}
</script>

3.2 通過(guò) $set() 改寫(xiě)

語(yǔ)法：

vm.$set( target, propertyName/index, value )

參數(shù)：

{Object | Array} target

{string | number} propertyName/index

{any} value

返回值：設(shè)置的值。

用法：

這是全局 Vue.set 的別名。

參考：Vue.set

<template>
 <div class="home">
  <div v-for="(item,index) in items" :key="index">{{item}}</div>
 <button @click="btn()">修改</button>
 </div>
</template>

<script>
export default {
 name: 'Home',
 data(){
  return{
  items:[1, 2, 3]
   }
 },
 methods:{
 btn(){
    this.$set(this.items, 1, 'two')
  console.log(this.items);
 }
 }
}
</script>

頁(yè)面：

控制臺(tái)：

3.3 Vue.set() 和 this.$set() 的區(qū)別

Vue.set() 源碼：

import { set } from '../observer/index'
...
Vue.set = set
...

this.$set() 源碼

import { set } from '../observer/index'
...
Vue.prototype.$set = set
...

可以發(fā)現(xiàn) Vue.set() 和 this.$set() 這兩個(gè) api 的實(shí)現(xiàn)原理基本一模一樣，都是使用了set函數(shù)。

set 函數(shù)是從 …/observer/index 文件中導(dǎo)出的。

區(qū)別在于 Vue.set( ) 是將 set 函數(shù)綁定在 Vue 構(gòu)造函數(shù)上，this.$set() 是將 set 函數(shù)綁定在 Vue原型上。

以上這篇Vue2.0 $set()的正確使用詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論