Effects used in the project
Below is a demo
I read the https://juejin.im/post/6844903913410314247performance optimization of the Vue project in the blog of the big guy. It is mentioned that if it is purely used to display data that does not need to change the properties inside, you can use Object.freeze() to freeze the object to avoid being hijacked by the Object.defineProperty data to achieve optimization. . Below I wrote a simple demo, verified by breakpoint debugging,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 50px;
height: 50px;
color: red;
border: 1px solid red;
margin-right: 4px;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-for="item in items" :key="item.name">{
{item.name}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
console.time()
new Vue({
el:'#app',
data(){
return{
items:[]
}
},
created(){
let items = [{
name:1,obj:{
id:11}},{
name:2,obj:{
id:22}},{
name:3,obj:{
id:33}}]
this.items = Object.freeze(items); //33步
// this.items = items; //100步+
}
})
</script>
</body>
</html>
Using Object.freeze to freeze an object only needs to perform 33 steps, without entering Object.defineProterty, direct assignment will perform 100 steps plus (point to 100 is too lazy to point)