博客

一、什么是监听器

Vue提供了一个watch选项，提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步代码或者开销比较大的操作时，这个方式是最有用的。

二、普通监听

普通监听是简单的数据类型：数字，布尔值，字符串

写法一：设有两个参数，一个是新的数据，一个是旧的数据

el:
data:
watch:{
要监听的变量名称:function(newVal,oldVal){},
要监听的变量名称N(newVal,oldVal){
	...
	}
}

写法二：在监听器中，被监听的变量除了可以写成函数，还可以是一个对象

  el:
data:
watch:{
要监听的变量名称:{
	handler:function(newVal,oldVal){
		...
	  }
  	}
 }

watch:{
msg:{
handler(new,old){
console.log('msg 被改变了，原来的值是：'+old+'，新的值是'+new)
}}}

在watch监听器中写的内容就是要监听的变量名（变化之后的值，变化之前的值），只要监听的值发生了变化，那么监听器中的函数就会被触发。

三、深度监听

watch里面msg（）{ }这种形式只是浅监听，只适合监听一层，如果想监听对象或者数组内部的值，这种形式就不适合了，这个时候需要深度监听，deep属性，它的默认值是false

 new Vue({
    el:"#app",
    data:{
          msg:{
                 name:'sherlock'
                }
            },
            watch:{
              
                msg:{
                     // handler是固定的配置选项，不能改变它的名称
                    handler:function(){
                        console.log('msg改变了...')
                    },
                    deep:true//显式的改为true，表示要进行深度监听
                }
            }
        })

四、计算属性与监听的区别：

因为计算属性也是实时变化，那么监听和它什么区别呢

1.监听是在数据发生变化时才会触发对应的函数

2.计算属性在页面中使用了其结果或者依赖的数据发生变化的时候就会触发对应的函数

3.计算属性是基于变量的值进行缓存的，只要在他关联的变量值发生变化时计算属性就会重新执行，这意味着只要价格和数量信息不发生变化，计算属性就会返回之前的计算结果，而不必再次执行函数，而methods没有缓存，所以每次访问都会重新执行。