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

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