vue中watch侦听器

vue中watch侦听器

vue中watch侦听器

vue通过watch选项，提供一个通用的方法，用来响应数据的变化
常应用于，在数据变化时，执行异步或开销较大的操作

watch 是 一个对象

一、watch

键

watch的键，是对象key值，是需要观察的表达式

键类型

1. 通常对象类型

   		- 例：- watch: {  msg: 'msgChange' }
   
   				- watch: { msg () { } }
   

2. 字符串类型
   可以实现监听对象当中的某一个属性

   		- 例：-  watch: {'personObj.name' () {console.log('123'); } }
   

值

值类型

1. 函数类型
   第一个参数- newVal- 被改变的数据
   第二个参数- oldVal- 赋值新值之前的值

2. 字符串类型
   此时，值为：方法名字，被侦听的数据改变时，会执行该方法

   	例：- watch: {  msg: 'msgChange' },
                        methods: {
                        msgChange () {
                       console.log('123');
                  }}
   

3. 对象类型
   可以提供选项
   （1）handler（必需）
   是被侦听的数据改变时执行的回调函数
   handler值类型为函数 例：- watch: {msg: { handler () {console.log('msg的值改变啦'); } } }
   handler值类型为字符串，此字符串是方法的名字
   （2）deep
   默认情况下，侦听器侦听对象， 只侦听引用的变化，只有在给对象赋值时，该对象才能被监听到
   deep可以让侦听器发现对象内部值的变化
   deep用于深度监听对象里面的属性，此时，只能打印新值，拿不到旧值
   deep值为true，无论该对象被嵌套的有多深，都会被侦听到

            例 ：handler: function (newValue, oldValue) {
					 console.log('新值age', newValue);
					console.log('旧值age', oldValue); },
					      deep: true

（3）immediate
回调将会在侦听开始之后立刻被调用，即：侦听器立即执行

			例：- watch: {
			           msg: {
                         handler () { },
                        immediate: true} } 

5. 数组类型
   可以将多种不同值类型，写在一个数组中

   		例：- watch: {
   		msg:[ 'msgChange1', function () {},
   		 {
             handler () {},
              deep: true,
            immediate: true}  ]}
   

二、vm.$watch

Vue实例将会在实例化时调用$watch，用于遍历watch对象的每一个属性

侦听某个数据

• 三个参数

  • 第一个参数- 被侦听的数据

  • 第二个参数- 数据改变时执行的回调函数

  • 第三个参数（可选）- 选项对象

• 二个参数

  • 第一个参数- 被侦听的数据

  • 第二个参数- 选项对象

      - handler属性（必需）- 是数据改变时执行的回调函数
    
      - 其他属性（可选）
    

侦听某个对象属性

• vm.$watch(‘obj.name’, /*参数同上/)

不确定侦听数据时

• 第一个参数- 写成函数类型

    - 例：
    	vm.$watch(function () {   return this.a + this.b;   },
    	function () {}, 
    	{
          deep: true, 
          immediate: true })
  

vm.$watch返回

侦听函数执行后，会返回一个取消侦听函数，用来停止触发回调

带有immediate选项时，不能在第一次回调时取消侦听数据

三、Watch和computed的区别

缓存

Watch- 不支持缓存- 数据改变,直接会触发相应的操作

computed- 支持缓存- 依赖数据发生改变,才会重新求值

异步

Watch- 支持异步
computed- 不支持异步- 有异步操作时无效，无法监听数据的变化

监听

Watch- 只能监听- 一个变量（有子变量可以监听）- 可监听- 多个变量

处理场景

Watch- 擅长处理的场景是：一个数据影响多个数据
computed- 擅长处理的场景是：多个数据影响一个数据