vue event方法的使用

1.监听
$on(event, callback)：监听实例的自定义事件
$once(event, callback)：同上，但只能触发一次
$watch(property,callback(new, old)): 监听属性的变化，拿到变化前后的值

// 第一种写法
watch: {
  text(new, old) {
    console.log(`${new}：${old}`);
  }
}
// 第二种写法
const unWatch = this.$watch('text',(new,old)=>
  console.log(`${new}：${old}`);
})
// 2秒后销毁 unWatch
setTimeout(()=> {
  unWatch();
},2000)

// 两种写法的结果一样，只是第二种需要在组件销毁手动销毁$watch

2.触发
$dispatch(event,args)：派发事件，先在当前实例触发，再沿父链一层层向上，对应的监听函数返回false停止
$broadcast(event,args)：广播事件，遍历当前实例的$children，如果对应的监听函数返回false，就停止
$emit(event, args)：触发事件

3.删除
$off(event, callback)：删除时间监听

4.其他
$forceUpdate()：强制组件刷新
$set(ele,attr,value)：给对象设置属性
$delete(ele,attr,value)：删除对象属性

<template>
  <div id="app">
      <p>{{obj.a}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj:{}
    };
  }
  mounted(){
    let i = 0;
    setInterval(()=> {
      i++;
      // 第一种
      this.obj.a = i ;
      // obj.a没有定义，vue是无法监听到这个属性的变化，所以页面的值也不会变化，这时可以用$forceUpdate进行强制渲染，当然不推荐这种用法
      this.$forceUpdate();
      
      // 第二种
      this.$set(this.obj,'a',i);
    },1000)
  }
}
</script>