Vue 初学遇到的一些问题

1、关于定时器

使用了定时器，页面关闭或切换时要将定时器进行销毁。不销毁就会一直存在。

 mounted() {
      var _this = this;
      //   //创建定时器更新最新的时间
      this.timeId = setInterval(function () {
        _this.datatime = new Date();
      }, 1000);
    },

  // 退出页面要执行的钩子函数
    beforeDestroy() {
      //退出界面销毁定时器
      if (this.timeId) {
        clearInterval(this.timeId);
      }
    }

2、关于图片引用

//建议这样使用
①　首先给图片地址绑定变量

<template>
    <img :src="imgUrl">
</template>

②　在script中设置变量

<script>
    //方法1.直接将图片引入为模块
    require imgUrl from "@/assets/test.png"
    //方法2.将imgUrl放在数据里
    data(){
        return {
imgUrl：imgUrl , 方法1 使用
            //imgUrl:require("@/assets/test.png")
        }
    }
</script>

3、接口同时body和params传值

this.axios.post(url,body,{params:{ xx：xxx}}

4、过滤器this指向问题

如果filters的方法里带有this，那么将要在data：{return{that：this}}，然后在filters方法里this用that代替。使用的时候要将that传入{{data|filterType（that）}}。

 filters: {
      filterType(row, that) {
        let name = Number(row + 1)
        var str = row.name
        that.dataList.forEach(element => {
          if (Number(element.id) === name) {
            str = str + element.name
            return str
          }
        });
        return str
      },
    },

5、关于v-if与v-show在选择器中的使用

在使用选择器类的组件时尽量采用v-show，因为在使用v-if的时候选择器下拉框可能会存在错位、点击不会有下拉框等情况。

1. v-if是动态的向DOM树内添加或者删除DOM元素；
2. v-show是通过设置DOM元素的display样式属性控制显隐；

6、关于双向绑定会失效

this.data.x=x1 或者this.data[1]=x1 可能会存在双向绑定会失效的问题