setTimeout in vue methods（this与vue视图更新）

先来看一段代码

<template>
<div @click="fn">test{{obj}}</div> 
</template>
<script>
  export default {
    data() {
      return {
        obj:{}
      }
    },
    methods: {
      fn() {
        setTimeout(function(){
          this.obj.pro = 'clicked'
        },1000)
      }
    }
  }
</script>

已上代码存在的几个问题：

• Uncaught TypeError: Cannot set property ‘pro’ of undefined
• obj.pro修改后视图不会更新

原因分析及解决方案：

问题1：setTimeout的回调函数在执行时this指向window(全局对象)

• 使用bind()

fn() {
	setTimeout(this.f2.bind(this) ,1000)
}
f2() {
	this.obj.pro = 'clicked'
}

• 设定变量保存this

fn() {
	let self = this
	setTimeout(funciton() {
    	self.obj.pro = 'clicked'
    },1000)
}

• 使用箭头函数

fn() {
	setTimeout(() => {
    	this.obj.pro = 'clicked'
    },1000)
}

问题2：vue的视图更新原理是通过重写数据对象的set方法来实现的，this.obj.pro="clicked"触发的是pro属性的setter，而obj在data中定义时没有pro属性，pro的set并没有被重写，因此视图不会更新，解决方法就是想办法触发obj的setter就可以了

修改后的fn

fn() {
	setTimeout(() => 
    	this.obj.pro = 'clicked'
      	this.obj = {...this.obj}
    },1000)
}