The specific content is as follows
idea
When initializing, vue will make getter and setter modifications to data. In modern browsers, although JS is fast enough, there is still room for optimization.
The data structure of the list page is:
list: [
// Each item has a different source, and the data from different sources are different, so put it in an array [{
sourceId: 'xmla', // Unique identification of source id: 3001, // Unique identification of the resource source: 'Himalaya', // Source title: 'Kunqu's Peony Pavilion',
imageUrl: '/',
album: 0, // Is it an album or not hot: 1345,
anchor: 'Green Snow'
}, {
sourceId: 'xmla', // Unique identification of source id: 3005, // Unique identification of the resource source: 'Baidu mobile phone', // Source title: 'Kunqu's Peony Pavilion',
imageUrl: '/',
album: 0, // Is it an album or not hot: 1345,
anchor: 'Green Snow'
}],
[{
sourceId: 'xmla',
id: 3002, // Unique identification of the resource source: 'Himalaya', // Source title: 'Kunqu Opera's Spring Flower Moon Night',
imageUrl: '/',
album: 0, // Is it an album or not hot: 1345,
anchor: 'Green Snow'
}],
]
}
Vue will set getters and setters for each value in the array to listen for their changes.
But in fact, the list data will not change, and these operations are redundant.
Method 1:use()
() is a new API added by ES5, which is used to freeze an object and prohibit the object from being modified. After vue 1.0.18+, you will not convert getter or setter to frozen data.
If you make sure that a data does not require tracking dependencies, you can use it to freeze it. It should be noted that the value of the object is frozen, and the entire reference can still be replaced. See the following example:
<p v-for="item in list">{{ }}</p>
new Vue({
data: {
// vue will not bind getter or setter to the object in the list list: ([
{ value: 1 },
{ value: 2 }
])
},
created () {
// The interface will not respond [0].value = 100;
// The interface will respond in the following two ways = [
{ value: 100 },
{ value: 200 }
];
= ([
{ value: 100 },
{ value: 200 }
]);
}
})
When using Vuex for state management, you should use () before assigning values:
[LIST_INIT](state, {list}) {
(list);
= list;
},
Getters and setters are gone.
Method 2:Passing string method
Since the data retrieved from the backend is a string, if () is not directly stored in the state, Vue can be prevented from being transformed.
When using it, a string is introduced into the page component, and after () it can be assigned directly to it. If necessary, further subcomponents can be further.
= {
a:{
c:1,
d:2
},
b:2
}
<list-item :test=""></list-item>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.