057_末晨曦Vue技术_处理边界情况之强制更新($forceUpdate)与通过 v-once 创建低开销的静态组件

  • 057_末晨曦Vue技术_处理边界情况之强制更新($forceUpdate)与通过 v-once 创建低开销的静态组件已关闭评论
  • 30 次浏览
  • A+
所属分类:Web前端
摘要

点击打开视频讲解更加详细在vue中,如果data中有基本数据类型变量:age,修改他,页面会自动更新。
但如果data中的变量为数组或对象(引用数据类型),我们直接去给某个对象或数组添加属性,页面是识别不到的,不会同步更新;


强制更新($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>   ` })