强制更新($forceUpdate)

点击打开视频讲解更加详细

在vue中，如果data中有基本数据类型变量:age，修改他，页面会自动更新。
但如果data中的变量为数组或对象（引用数据类型），我们直接去给某个对象或数组添加属性，页面是识别不到的，不会同步更新；

<template>   <div id="app">     name：<p>{{userInfo.name}}</p>     age：<p>{{userInfo.age}}</p>     <button @click="updateName">增加age属性</button>   </div> </template>  <script> export default {   name: 'App',   data(){     return {       userInfo:{         name:'末晨曦吖'       }     }    },   mounted() {        },   components:{        },   methods:{     updateName(){       this.userInfo.age = 18     }   } } </script>  <style scoped>   </style> 

我们尝试给userInfo对象添加属性值，发现页面其实并没有变化

<template>   <div id="app">     name：<p>{{userInfo.name}}</p>     age：<p>{{userInfo.age}}</p>      <div v-for="(item,index) in list" :key="index">{{ item.name }} --- {{ item.age }}</div>      <button @click="updateName">增加age属性</button>   </div> </template>  <script> export default {   name: 'App',   data(){     return {       userInfo:{         name:'末晨曦吖'       },       list:[         { name:'末' }       ]     }    },   mounted() {        },   components:{        },   methods:{     updateName(){       // 对象       // this.userInfo.age = 18       // this.$forceUpdate()     // 第一种解决方式： this.$forceUpdate(); 强制刷新  同等效果的：window.location.reload()  不推荐       // this.$set(this.userInfo,'age',18)   // 第二种解决方式 推荐使用        // 数组       // this.list[0].age = 18        // this.$forceUpdate()        // this.$set(this.list[0],'age',18)     }   } } </script>  <style scoped>   </style> 

通过 v-once 创建低开销的静态组件

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来，就像这样：

Vue.component('terms-of-service', {   template: `     <div v-once>       <h1>Terms of Service</h1>       ... a lot of static content ...     </div>   ` })