057_末晨曦Vue技术_处理边界情况之强制更新和创建低开销的静态组件

强制更新和创建低开销的静态组件

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

强制更新

如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。

你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。

然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新，那么你可以通过 $forceUpdate 来做这件事。

完整案例：

<template>
  <div id="app">
    name:<div>{{ obj.name }}</div>
    age:<div>{{ obj.age }}</div>

    <div v-for="(item,index) in list" :key="index">{{ item.name }} -- {{ item.age }}</div>

    <button @click="change">改变</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      // 对象
      obj :{
        name:'末晨曦吖'
      },
      // 数组
      list:[
        { name:'一笑而过' }
      ]
    } 
  },
  mounted() {
    
  },
  components:{
    
  },
  methods:{
    change(){
      // 对象
      // this.obj.age = 18
      // this.$forceUpdate()     // 第一种解决方式： this.$forceUpdate(); 强制刷新  同等效果的：window.location.reload()  不推荐
      // this.$set(this.obj,'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>
  `
})

再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！