In the Vue instance,dataAttributes are user-defined objects used to store data, and_dataIt is an object used to store data within Vue. The relationship between them is of the Vue instancedataThe attribute is actually correct_dataagent.
When you are creating a Vue instance, Vue will use the user-defineddataAttributes and internal_dataThe object is associated and adds some access and observation logic in the proxy process. In this way, you are actually accessing data in Vue instance_datadata in .
Here is a simple example:
<div >
<p>{{ message }}</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
(app._data.message); // What you are accessing here is the internal _data object data</script>
In this example,is user-defined data, andapp._dataIt is an object that stores data internally by Vue.messageAttributes are actually fromapp._dataObtained in.
It should be noted that directly access_dataNot recommended by Vue, because Vue provides more advanced APIs to access and manipulate data, such as calculating properties, observing properties, etc. Direct operation_dataMay bypass Vue's responsive system, resulting in data not being tracked and updated correctly.
Below is an example that directly modify the value of the first element object in the array.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>An issue during update</title>
<script type="text/javascript" src="../js/"></script>
</head>
<body>
<!-- Get a container ready-->
<div >
<h2>Personnel List</h2>
<button @click="updateMei">Update Ma Dongmei's information</button>
<ul>
<li v-for="(p,index) of persons" :key="">
{{}}-{{}}-{{}}
</li>
</ul>
</div>
<script type="text/javascript">
= false
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'Ma Dongmei',age:30,sex:'female'},
{id:'002',name:'Zhou Dongyu',age:31,sex:'female'},
{id:'003',name:'Jay Chou',age:18,sex:'male'},
{id:'004',name:'Wen Zhaolun',age:19,sex:'male'}
]
},
methods: {
//Note that vm is the vue instance vm._data.student = , the data proxy of vue is proxyed to _data updateMei(){
// [0].name = 'Teacher Ma' //It works // [0].age = 50 //Effect // [0].sex = 'male' // works // [0] = {id:'001',name:'Teacher Ma',age:50,sex:'Male'} //Invalid (, 0, {id:'001',name:'Teacher Ma',age:50,sex:'male'})//It works (0,1,{id:'001',name:'Teacher Ma',age:50,sex:'male'})//It works
}
}
})
</script>
</html>
The above case directly modifying the first element of the array will fail because VuedataPackaged as_dataResponsive processing (agent) is performed, and all attributes are added with get and set, similar to, but the entire assignment directly through the index will not be responsive processing (notdataData proxy to_data), which will not actually modify _data, that is, the actual data of vue, unless it is used as responsive set values.
When Vue implements responsive data, it uses some special techniques to listen to object property changes, but these techniques are more complicated to process arrays. Vue can detect the situation where the array elements are modified directly through the index, because Vue will intercept the array's mutation methods (e.g.push、pop、shift、unshift、spliceandsort), thus enabling the view update to be triggered when these methods are executed.
However, the array elements are modified directly by index assignment[0] = {id:'001',name:'Teacher Ma',age:50,sex:'Male'}, bypassing Vue's proxy, Vue cannot detect such a change, so the view update will not be triggered.
[0].name = 'Teacher Ma'The reason why this method can be effective is that name is an attribute of the vue instance, which can trigger the update of the responsive proxy. That is, it will trigger the get and set added to the name attribute on the vue instance.
This is the end of this article about briefly discussing the relationship between data and _data in vue. For more related vue data and _data content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!