淺談vue中的data與_data的關(guān)系是什么

更新時間：2023年12月24日 15:53:54 作者：厭世小晨宇yu.

在Vue實例中,data屬性是用戶定義的用于存儲數(shù)據(jù)的對象,而_data是Vue內(nèi)部用于存儲數(shù)據(jù)的對象,本文主要介紹了淺談vue中的data與_data的關(guān)系是什么,感興趣的可以了解一下

在 Vue 實例中，data 屬性是用戶定義的用于存儲數(shù)據(jù)的對象，而 _data 是 Vue 內(nèi)部用于存儲數(shù)據(jù)的對象。它們之間的關(guān)系是 Vue 實例的 data 屬性實際上是對 _data 的代理。

當你在創(chuàng)建 Vue 實例時，Vue 會將用戶定義的 data 屬性與內(nèi)部的 _data 對象建立關(guān)聯(lián)，并在代理過程中添加一些訪問和觀察的邏輯。這樣，你在訪問 Vue 實例中的數(shù)據(jù)時實際上是在訪問 _data 中的數(shù)據(jù)。

下面是一個簡單的示例：

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

console.log(app._data.message); // 這里訪問的是內(nèi)部的 _data 對象的數(shù)據(jù)
</script>

在這個示例中，app.data 是用戶定義的數(shù)據(jù)，而 app._data 是 Vue 內(nèi)部存儲數(shù)據(jù)的對象。message 屬性實際上是通過代理從 app._data 中取得的。

需要注意的是，直接訪問 _data 不是 Vue 推薦的做法，因為 Vue 提供了更高級的 API 來訪問和操作數(shù)據(jù)，如計算屬性、觀察屬性等。直接操作 _data 可能繞過 Vue 的響應式系統(tǒng)，導致數(shù)據(jù)不被正確地追蹤和更新。

下面是一個實例，直接修改數(shù)組中第一個元素對象的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>更新時的一個問題</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 準備好一個容器-->
		<div id="root">
			<h2>人員列表</h2>
			<button @click="updateMei">更新馬冬梅的信息</button>
			<ul>
				<li v-for="(p,index) of persons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'馬冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰倫',age:18,sex:'男'},
						{id:'004',name:'溫兆倫',age:19,sex:'男'}
					]
				},
				methods: {
                    //注意vm是vue實例vm._data.student =vm.student ，原理vue的數(shù)據(jù)代理，把vm中的屬性代理到了_data
					updateMei(){
						// this.persons[0].name = '馬老師' //奏效
						// this.persons[0].age = 50 //奏效
						// this.persons[0].sex = '男' //奏效    
						// this.persons[0] = {id:'001',name:'馬老師',age:50,sex:'男'} //失效                      
                        Vue.set(this.persons, 0, {id:'001',name:'馬老師',age:50,sex:'男'})//奏效
						this.persons.splice(0,1,{id:'001',name:'馬老師',age:50,sex:'男'})//奏效
					
                    }
				}
			}) 

		</script>
</html>

上面案例直接修改數(shù)組的第一個元素會失效，原因是Vue把data封裝為_data時做了響應式處理(代理)，給所有的屬性都加了get和set,類似于Object.defineProperty，但是這里的直接通過索引整個賦值并不會做響應式處理（不會把data數(shù)據(jù)代理到_data），也就導致并不會實際修改_data，也就是vue的實際數(shù)據(jù)，除非使用Vue.set做響應式設值。

Vue在實現(xiàn)響應式數(shù)據(jù)時，會使用一些特殊的技巧來監(jiān)聽對象的屬性變化，但這些技巧對數(shù)組的處理比較復雜。Vue能夠檢測到通過索引直接修改數(shù)組元素的情況，因為Vue會攔截數(shù)組的變異方法（例如 push、pop、shift、unshift、splice 和 sort），從而能夠在這些方法執(zhí)行時觸發(fā)視圖更新。

然而，直接通過索引賦值的方式修改數(shù)組元素this.persons[0] = {id:'001',name:'馬老師',age:50,sex:'男'}，繞過了 Vue 的代理，Vue 無法檢測到這樣的變化，因此不會觸發(fā)視圖更新。

this.persons[0].name = '馬老師' 這種方式可以生效的原因是因為name是vue實例的一個屬性，可以觸發(fā)響應式代理的更新.也就是會觸發(fā)vue實例身上為name屬性添加的get與set。

到此這篇關(guān)于淺談vue中的data與_data的關(guān)系是什么的文章就介紹到這了,更多相關(guān)vue data與_data內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: