前言

在 Vue 開發(fā)中，我們經(jīng)常會(huì)遇到“明明修改了數(shù)據(jù)，視圖卻不更新”的尷尬場景。這通常與 Vue 的初始化順序及響應(yīng)式實(shí)現(xiàn)原理有關(guān)。本文將從 Data 屬性的本質(zhì)出發(fā)，解析響應(yīng)式“丟失”的根本原因及解決方案。

一、 組件中的 Data 為什么必須是函數(shù)？

在 Vue 2 中，根實(shí)例的 data 可以是對(duì)象，但組件中的 data 必須是函數(shù)。

核心原因：數(shù)據(jù)隔離

• 對(duì)象形式：JavaScript 中的對(duì)象是引用類型。如果 data 是對(duì)象，所有組件實(shí)例將共享同一個(gè)內(nèi)存地址。修改實(shí)例 A 的數(shù)據(jù)，實(shí)例 B 也會(huì)跟著變。
• 函數(shù)形式：當(dāng) data 是一個(gè)函數(shù)時(shí)，每次創(chuàng)建新實(shí)例，Vue 都會(huì)調(diào)用該函數(shù)，返回一個(gè)全新的數(shù)據(jù)對(duì)象拷貝。這保證了每個(gè)組件實(shí)例數(shù)據(jù)的獨(dú)立性。

二、 Props 與 Data 的優(yōu)先級(jí)之爭

在組件初始化時(shí)，Vue 會(huì)按照特定的順序處理選項(xiàng)。

初始化順序

Props → Methods → Data → Computed → Watch

因?yàn)?Props 最先被初始化，所以我們可以在 data 中直接引用 props 傳來的值：

// Vue 3 + TS 示例
const props = defineProps<{ initialCount: number }>();
const count = ref(props.initialCount); // 合法，因?yàn)?props 優(yōu)先初始化

三、 Vue2動(dòng)態(tài)添加新屬性的“失效”困局

1. 故障場景

vue2中當(dāng)我們直接給對(duì)象添加一個(gè)原本不存在的屬性時(shí)，視圖不會(huì)產(chǎn)生任何變化。

<p v-for="(value,key)in item" :key="key">
    {{ value }}
</p>
<button@click="addProperty">動(dòng)態(tài)添加新屬性</button>

const app = new Vue({
  el: '#app',
  data: {
    item: {
      oldProperty: 'l日屬性'
    }
  },
  methods: {
    addProperty() {
      this.items.newProperty = '新屬性'; // 為items添加新屬性
      console.log(this.items); // 輸出帶有newProperty的items
    }
  }
})

2. 原因剖析

• Vue 2 局限性：使用 Object.defineProperty 實(shí)現(xiàn)響應(yīng)式。它只能劫持對(duì)象已有的屬性。對(duì)于后來新增的屬性，Vue 無法感知其 getter/setter，因此無法觸發(fā)視圖更新。
• Vue 3 的進(jìn)化：改用 Proxy 代理整個(gè)對(duì)象。Proxy 可以攔截到屬性的新增與刪除，因此 Vue 3 不再有這個(gè)問題。

四、 解決方案（Vue 2 必備技巧）

如果你仍在使用 Vue 2，可以通過以下三種方式解決：

1. 推薦方案：Vue.set/this.$set

這是最正統(tǒng)的方法，它會(huì)手動(dòng)將新屬性轉(zhuǎn)為響應(yīng)式，并觸發(fā)依賴更新。

語法： this.$set(target, propertyName/index, value)

• target：data中要修改的對(duì)象或者數(shù)組
• propertyName/index：要添加或修改的屬性名稱（對(duì)于對(duì)象）或索引（對(duì)于數(shù)組）
• value：要設(shè)置的值

addProperty() {
   this.$set(this.item, 'newProperty', '新屬性'); 
}

2. 對(duì)象整體替換：Object.assign

通過創(chuàng)建一個(gè)包含新屬性的新對(duì)象，并將這個(gè)新對(duì)象賦值給原有對(duì)象,觸發(fā) Vue 對(duì)原對(duì)象引用的變更感知。

addProperty() {
   this.item = Object.assign({}, this.item, { newProperty: '新屬性' });
   // 或者使用展開運(yùn)算符
   this.item = { ...this.item, newProperty: '新屬性' };
}

3. 暴力方案：$forceUpdate

迫使 Vue 重新渲染組件。

• 注意：這只是“治標(biāo)”。雖然視圖刷新了，但該屬性依然不是響應(yīng)式的。后續(xù)再次修改 newProperty 時(shí)，視圖依然不會(huì)動(dòng)。

五、 Vue 3 + TS 最佳實(shí)踐

在 Vue 3 中，借助 TypeScript 的類型定義，我們可以規(guī)避大部分因“動(dòng)態(tài)添加”導(dǎo)致的邏輯混亂。

<script setup lang="ts">
import { reactive } from 'vue';

// 定義接口，提前聲明可選屬性
interface Item {
  oldProperty: string;
  newProperty?: string; // 聲明可選屬性
}

const item = reactive<Item>({
  oldProperty: '舊屬性'
});

const addProperty = () => {
  // Vue 3 Proxy 自動(dòng)處理響應(yīng)式，無需 $set
  item.newProperty = '新屬性'; 
};
</script>

到此這篇關(guān)于Vue中Data屬性避坑指南的文章就介紹到這了,更多相關(guān)Vue Data屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論