快捷導(dǎo)航

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

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

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

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

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

下面是一個(gè)簡(jiǎn)單的示例：

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

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

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

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

需要注意的是，直接訪問(wèn) _data 不是 Vue 推薦的做法，因?yàn)?Vue 提供了更高級(jí)的 API 來(lái)訪問(wèn)和操作數(shù)據(jù)，如計(jì)算屬性、觀察屬性等。直接操作 _data 可能繞過(guò) Vue 的響應(yīng)式系統(tǒng)，導(dǎo)致數(shù)據(jù)不被正確地追蹤和更新。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>更新時(shí)的一個(gè)問(wèn)題</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 準(zhǔn)備好一個(gè)容器-->
		<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實(shí)例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ù)組的第一個(gè)元素會(huì)失效，原因是Vue把data封裝為_data時(shí)做了響應(yīng)式處理(代理)，給所有的屬性都加了get和set,類似于Object.defineProperty，但是這里的直接通過(guò)索引整個(gè)賦值并不會(huì)做響應(yīng)式處理（不會(huì)把data數(shù)據(jù)代理到_data），也就導(dǎo)致并不會(huì)實(shí)際修改_data，也就是vue的實(shí)際數(shù)據(jù)，除非使用Vue.set做響應(yīng)式設(shè)值。

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

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

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

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

您可能感興趣的文章: