一、vue中的watch使用

1、watch是什么？

watch是vue中提供的一个方法，用来观察数据变动，进行数据监听的一种方式。也可以这样说 watch是一个对象，可以看作对象使用，是对象就有键，有值。

• 键：是需要监听的目标，可以是data中的某个变量。

• 值可以是函数：就是当你监听的变量发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是更新后的值。

• 值可以是函数名：不过这个函数名要使用单引号来标注。

• 值可以是选项中的对象：选项包括有三个。

  • 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
  • 第二个是deep：其值是true或false；确认是否深入监听。（一般用来监听一个对象里面的值）
  • 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

2、watch的使用

（1）用watch来监听一个普通变量

    
    
     
    	
      
watch方法使用
    	
          
     
    
复制代码

结果如图所示：

---

（2）用watch来监听一个对象

结果如下：

当对象中的某一项数据发生变化时，都会被监听到。如果想监听对象中的某一项，可以用对象名.属性名，如"obj.data"，双引号必须加上。

二、vue中set方法的使用

在最近的项目中，我遇到了这样一个问题，在用watch监听对象的时候，对象里面数组的变动无法实时渲染到页面中，也因为这个问题卡了很久～～～最后，通过set方法解决了这样的问题，下面我来总结一下自己对set方法的理解。

1、 set方法存在的意义

由于javaScript的限制，vue不能检测以下变动的数组

• 当你利用索引直接设置一个项时，vue不会为我们自动更新。例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，vue不会为我们自动更新。vm.items.length = newLength，不会更新数组。
• 注意： 对象不能是vue实例，或是vue实例中的根数据对象。

为了解决以上的问题，set方法就能发挥它的作用了～

---

2、set方法简单的使用

vue.set(target,key,value)

• 参数设置：

  • target: 要更改的目标数据 {Object | Array}
  • key: 数据的第几项 {String | Number}
  • value: 更改后的数据 {any}

• 返回值：

  • 设置的值

• 用法：

  设置对象的属性，同时触发视图更新。这个方法主要是用于为了避开vue不能检测属性被添加的限制。

---

    
    
     
    	
      
set方法使用
    	
      
    	    
       
{
   {item}}
    	
      
    
     
    

运行结果：

（界面显示）

（控制台显示）

由上面的结果的可以看出，数组的第一项的值被改变了，在控制下面的数据已经是更新的了，但在界面中显示的依旧是原来数组里面的值，由此可见，变动的数据并没有实时更新到视图中。出现这种情况，那我们就可以使用set方法来解决啦～

---

运行结果：

（界面显示）

（控制台显示）

由以上结果可以看出，利用set方法则更新数组的同时也触发了视图的更新。