vue.js中的watch监听和set方法使用

一、vue中的watch使用

1、watch是什么？

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

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

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

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

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

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

2、watch的使用

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

<div class="app">
    <div>
    	<p>watch方法使用</p>
    	<input v-model="data"/>
    </div>
</div>
<script>
var vm = new Vue({
    el: '.app',
    data: {
    	data: '111',
    	obj: {
    	    arr: [
                {value: ''}
            ],
    	    data: ''
    	}		
    },
    watch: {
    	data(newVal, oldVal) {
    	    console.log(newVal, oldVal) 
    	}
    },
});
</script>
复制代码

结果如图所示：

---

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

<script>
var vm = new Vue({
    el: '.app',
    data: {
    	data: '111',
    	obj: {
            arr: [
                {value: ''}
            ],
            data: ''
    	}		
    },
    watch: {
    	data(newVal, oldVal) {
    	    console.log(newVal, oldVal)
    	},
    	'obj': {
            deep: true,
            handler (newVal, oldVal) {
                console.log(newVal)
            }					
    	}
    },
    methods: {
    	addInput () {
    	    this.obj.arr.push({value: '111'})
    	}
    }
});
复制代码

结果如下：

当对象中的某一项数据发生变化时，都会被监听到。如果想监听对象中的某一项，可以用对象名.属性名，如"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不能检测属性被添加的限制。

---

<div class="app">
    <div>
    	<p>set方法使用</p>
    	<ul>
    	    <li v-for="(item, index) in arr">{{item}}</li>
    	</ul>
    </div>
</div>
<script>
    var vm = new Vue({
    	el: '.app',
    	data: {
    	    arr: ['aaa', 'bbb', 'ccc']
    	}
    });
    vm.arr[1] = 'ddd'
    console.log(vm.arr) // ['aaa','ddd','ccc']
复制代码

运行结果：

（界面显示）

（控制台显示）

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

---

<script>
    var vm = new Vue({
    	el: '.app',
    	data: {
    	    arr: ['aaa', 'bbb', 'ccc']
    	}
    });
    Vue.set(vm.arr, 1, 'ddd')
    console.log(vm.arr) // ['aaa','ddd','ccc']
复制代码

运行结果：

（界面显示）

（控制台显示）

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

转载于:https://juejin.im/post/5d0b3e31f265da1bd260f1ff