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个方法
- 在定时器函数外部，定义一个that变量把this保存下来作为参数传入。
- 使用bind方法（es5标准，低版本ie有兼容性问题），可以把函数的this指针绑定到bind的第一个参数上
- es6语法，箭头函数，函数体的this对象就是定义时所在的对象
总结 ，定时器函数配合箭头函数使用比较合适
修改成下面这样后，程序可以正常运行了。
mounted: function () {
setInterval(() => {
const currentDate = new Date()
this.currentTimeStamp = currentDate.getTime()
}, 1000)
}
