1、事件监听watch

1. 监听值类型变量：字符串（string）、数值（number）、布尔值（boolean）

// 数据
data:{
	num:0
}

// 监听
watch: {
// 如果 `num` 发生改变，这个函数就会运行
num: function (newNum, oldNum) {
	// newNum：数据更新后的值 oldNum：数据更新前的值
	console.log(newNum, oldNum)
  }
},

2. 监听引用类型变量：对象（Object）、数组（Array）

data:{
	obj:{
		a:'1'
	}
}
// 键路径: 监听对象`obj`下的`a`变量的改变
'obj.a': {
  handler:function(newA, oldA) {
	console.log(newA, oldA)
  },
  deep: true   // 深度监听
}

// 监听数组变化（不常用）
watch: {
    ar: {
        deep: true,
        handler(array, oldArray) {
        
        }
    }
}

应用：
父组件传值给子组件一个对象时，出现负组件值改变，子组件值未改变，可通过深度监听解决

3. 数组数据更新视图不更新bug解决：
   通过数组下标直接更新数组的值时会出现数据修改而视图不更新的bug，解决方法如下：

// .vue组件中使用$set来修改数组的数据
this.$set(arr,index,item)  // arr：要更改的数组对象，index：下标，item：更新值（类似于将arr的下标为index的值替换为item）

// 使用 map/forEach等循环的方法修改值
arr.forEach((item,i)=>{
  item.num = i + 1
})

arr = arr.forEach((item,i)=>{
  item.num = i + 1
  return item
})