项目中使用的效果
下面是一个demo
看了大佬的博客https://juejin.im/post/6844903913410314247vue项目性能优化里面提到如果是纯粹用来列表展示不需要改变里面属性的数据，可以用Object.freeze()冻结对象，避免被Object.defineProperty数据劫持，从而来实现优化。下面我写了个简单的demo，通过断点调试的方式来验证了一下，
<!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>
用Object.freeze冻结对象只需要执行33步，不会进入Object.defineProterty，直接赋值会执行100步加（点到一百懒得点了）