Vue提供了watch来监听双向绑定过程中data的变化

      
        
        
                    
    
      
     重置      
     
        
      
watch状态改变
        
      
arrchange：{
   {watch.arr}}
        
      
objchange：{
   {watch.obj}}
        
      
objnamechange:{
   {watch.objname}}
        
      
stringchange：{
   {watch.string}}
        
      
numchange：{
   {watch.num}}
      
     
      
     
        
      
数据展示
        
      
arr:{
   {arr}}
        
      
obj:{
   {obj}}
        
      
string:{
   {string}}
        
      
num:{
   {num}}
      
     
      
     
        
      
arr操作
        
      改变arr[0]的name        
      改变arr[0]的name($set)        
      删除arr[0]        
      删除arr[0].name        
      删除arr[0].name($delete)        
      unshift一个对象到arr        
      arr[0]重新赋值        
      arr[0]重新赋值($set)        
      arr重新赋值        
      arr重新赋值($set)      
     
      
     
        
      
object操作
        
      修改obj的name字段        
      修改obj的name字段($set)        
      添加age属性        
      添加age属性($set)        
      删除obj的name字段        
      删除obj的name字段($delete)        
      对obj重新赋值      
     
      
     
        
      
String操作
        
      修改str字段      
     
      
     
        
      
Num操作
        
      修改num字段      
     
    
    
    

测试结果

会触发watch的

Array

1. 删除arr[0]
2. 删除arr[0].name($delete)
3. unshift一个对象到arr
4. arr[0]重新赋值($set)
5. arr重新赋值
6. arr重新赋值($set)

Object

1. 修改obj的name字段(obj并没有触发watch，但是属性name触发了watch)
2. 修改obj的name字段($set)(同上)
3. 添加age属性($set)
4. 删除obj的name字段($delete)（同时触发了name的watch）
5. 对obj重新赋值（同上）

String、Number 可以触发watch

所以需要触发watch时尽可能重新赋值

代码地址

添加了vuex的测试实现