下边只是对vue文档 + 自己理解的记录，加深印象。

​​程序化的事件侦听器​​

假如一个页面开启计时器时，当且患页面时，需要清楚它，因为setInterval时全局的，之前做法是：

data() {
  return {
    timer:null
  }
},
mounted() {
  this.setTime()
},
beforeDestroy() {
  clearInterval(this.timer)
},
methods: {
  setTime() {
      this.timer = setInterval(() => {
          console.log('计时器执行了')
      }, 1000)
  }
}

vue边界情况处理_json

上边做法不光在实例上挂载了timer，而且在独立的钩子函数中去清除计时器，这使得我们比较难于程序化地清理我们建立的所有东西。

vue 给我们提供了另一种很优雅的写法, 通过一个程序化的侦听器解决这两个问题：

mounted() {
  this.setTime()
},
methods: {
  setTime() {
      let timer = setInterval(() => {
          console.log('计时器执行了')
      }, 1000)
      // 
      this.$once('hook:beforeDestroy', () => {
          clearInterval(timer)
          console.log('计时器销毁了')
      })
  }
}

vue边界情况处理_数据_02

这样写法，使代码更加完整，独立。

​​vm.$forceUpdate()​​

迫使Vue实例重新渲染。

注意：注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

额外知识点：数据的重新渲染，都会触发 beforeUpdate 钩子函数。

我们可以利用这个api实现：向数据添加任何值，都会导致页面的重新渲染，当然这种操作不建议使用，除非迫不得已！

<template>
  <div class="home">
    {{JSON.stringify(componentsList)}}
    <button @click="btn">click</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      componentsList: ['com', 'comOne', 'comTwo']
    }
  },
  methods: {
    btn() {
      this.componentsList[3] = 1
      this.$forceUpdate()
    }
  }
}
</script>

vue边界情况处理_json_03

vue边界情况处理_json_04vue边界情况处理_钩子函数_05