Vue--侦听器和计算属性

侦听器watch:

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

计算属性computed:

我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。

浅监听:适用于基本数据类型

watch: {
      // 基本数据类型
      a(newVal, oldVal) {},
      // 引用数据类型(如果用普通监听，只能监听到引用地址的改变)
      obj: {
        handler(newVal, oldVal) {},
        deep: true
      },
      // 监听引用数据类型内部某个具体值
      'obj.username': {
        handler(newVal, oldVal) {},
        deep: true
      }
    }

深度监听：需要监听一个对象内的属性的变化是采用深度监听方法

 <div id="app">
        {{msg}}
        <br>
        {{obj}}
        <button @click="changeObj">更改obj</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                a: 1,
                obj: {
                    name: 'zhangsan',
                    age: 12
                },
            },
            watch: {
                a(newValue, oldValue) {
                    console.log('a数据发生变化...');
                }, 
               //引用数据类型监听需要使用obj对象封装的函数handler()进行监听，深监听
               obj: {
                    handler(newValue, oldValue) {
                        console.log('obj数据发生变化...');
                    },
                    // 深度监听
                    deep: true
                }
            },
            methods: {

             //点击按钮触发事件
                changeObj() {
                    // 更改内部数据
                    this.obj.name = 'lisi';
                    this.obj.age=20                
                }
            }
        })
    </script>

watch和computed的区别
  computed
    1. 具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
  watch
    1. 监听值的变化，执行异步操作【axios请求】
    2. 无缓存性，页面重新渲染时值不变化也会执行