Vue2：属性监听器

属性监听器watch

格式：

             var vm = new Vue({
                el: '#app',
                data: {},
                methods: { },
                watch: {
                    fn() {},
                    obj: {
                        deep: true,
                        handler: () => {}
                    }
                }
            })

 

watch:{x(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性
当侦听器监听的属性发生变化时,就会调用watch中对应的方法
*侦听器属性，比计算属性计算效率消耗大

 

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

1、计算属性-方法：

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

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

3、过滤器往往用于数据渲染前的数据处理除了用法跟方法不一样其他都一-样，它没有被劫持

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

 

为什么要把这些函数分开设计？

1、为了业务更加明显，功能更好调试