007-定时器清理终篇

问题背景

产品经理：实现一个列表（包含：人员名称、在线状态 等字段），每 10 秒更新一次列表中 在线状态 字段。
开发 SE： 后台实现推送比较复杂，项目要求紧急上线，临时采用前台定时器查询方案。
开发实现：列表查询页面（ personList.vue ）调用列表查询接口（ /queryListApi ），前台查询成功后，判断有数据，则开启 setTimeout 10 秒查询列表接口，更新列表状态数据。

具体代码如下：

<script>
// 项目基于 Vue 框架
export default {
   
  data() {
   
    return {
   
      personList: [],
      timer: null
    }
  },
  created() {
   
    this.queryList()
  },
  beforeDestory() {
   
    this.clearQueryListTimer()
  },
  methods: {
   
    queryList() {
   
      axios.get('/queryListApi').then(data => {
   
        if (data && data.length) {
   
          this.personList = [...data]
          this.clearQueryListTimer()
          this.timer = setTimeout