vue中改变data中的值，页面数据不变化的问题（js定时器函数

vue中改变data中的值，页面数据不变化的问题（js定时器函数，箭头函数的this指针问题）

​ 我这次写了一个实时显示时间戳的功能，但是我发现修改了data里面的时间戳变量以后，页面上不变化，并且在浏览器用vue官方的浏览器调试插件，发现组件中对应的时间戳变量并没有发生变化。

​ 这个现象让我很费解，最后在网上检索一番后找到了答案。

​ 一开始我的写法是这样的,在mounted函数里面，放了一个定时器，用来时刻改变currentTimeStamp的值。

​ 调试的时候，在mounted函数里面输出 console.log(this.currentTimeStamp)会发现是实时变化的，但是vue浏览器插件看到组件的变量没有发生变化。

​ 这是因为两个定时器函数setInterval和setTimeout的this指向，默认都是window，所以我们需要手动改变this指针。

<script>
export default {
  name: 'unix-timestamp',
  props: {
  },
  data () {
    return {
      // 存放当前时间数据的变量
      currentTimeStamp: this.getCurrentTimeStamp()
    }
  },
  methods: {
    // 获取当前时间戳使用的函数
    getCurrentTimeStamp () {
      const currentDate = new Date()
      return currentDate.getTime()
    }
  },
  mounted () {
    setInterval(function() {
      const currentDate = new Date()
      this.currentTimeStamp = currentDate.getTime()
    }, 1000)
  }
}
</script>

改变定时器函数this指针的3个方法

1. 在定时器函数外部，定义一个that变量把this保存下来作为参数传入。
2. 使用bind方法（es5标准，低版本ie有兼容性问题），可以把函数的this指针绑定到bind的第一个参数上
3. es6语法，箭头函数，函数体的this对象就是定义时所在的对象

总结 ，定时器函数配合箭头函数使用比较合适

修改成下面这样后，程序可以正常运行了。

 mounted: function () {
    setInterval(() => {
      const currentDate = new Date()
      this.currentTimeStamp = currentDate.getTime()
    }, 1000)
  }