Vue的侦听器

watch:{x(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性

当侦听器监听的属性发生变化时,就会调用watch中对应的方法。

new Vue({
	el:"",//关联界面元素
	data:{a:'小狮子'},//vm的数据源
	watch:{a(){}} //x就是监听了data中的x属性的一个监听器
})

注意：

1、侦听器属性，比计算属性计算效率消耗大

2、修改了引用数据内部的属性值:页面会重新渲染,但是侦听器属性不会触发

如：

  <div class="app">
          <button @click="up">+10</button>
          <div>age：{{msg.age}}</div>

    </div>

        new Vue({
            el:".app",
            data:{
                msg:{
                    age:50,
                    name:"Crystalls"
                }
            },
            methods:{
                up(){
                    this.msg.age+=10
                },
            },
            watch:{
                msg(){
                    console.log("watch触发了")
                }
            }
        })

当点击按钮时界面和控制台：

 

  说明

 3 、 如果修改了引用数据内部的属性值也想触发侦听器属性,必须深度监听 deep:true

如将上述例子的js代码修改为

  new Vue({
            el:".app",
            data:{
                msg:{
                    age:50,
                    name:"Crystalls"
                }
            },
            methods:{
                up(){
                    this.msg.age+=10
                },
            },
            watch:{
                msg:{
                    deep:true,
                    handler(){
                        console.log("触发了watch")
                    }
                }
            }
        })

则在点击按钮，界面和控制台

 

 区分点：

            计算属性,属性侦听器,方法,过滤器有什么区别? 哪些是被this对象劫持过的?

            计算属性-方法  

            计算属性（computed）会把计算的结果缓存起来,并监听计算过的数据源 如果监听的数据源发生变化才会重新计算(没有监听的属性发生变化  模板会重新渲染)

            方法（methods）一般是提供给模板事件和其他方法(比如钩子函数)使用,如果在模板中使用了方法,而且不是事件,如果模板中的渲染的任意数据源改变了 它都会重新调用

            过滤器（filters）往往用于数据渲染前的数据处理  除了用法跟方法不一样其他都一样,它没有被劫持

            属性侦听器:只有侦听的属性发生变化才会触发(可以深度侦听,但是更消耗内存)                      

            为什么要把这些函数 分开设计:计算属性,属性侦听器,方法,过滤器

            为了业务更明显  功能更好调试