vue入门系列之计算属性和侦听器

计算属性和侦听器

计算属性
模版语法中的插值表达式非常便利，但是当表达式逻辑比较复杂的时候会模版难以维护。
处理复杂的逻辑，我们可以使用计算属性来解决问题。
下面举个例子

<!--下列表达式中需要得到的值是，message的反转字符串-->
<div id="example">
    {{ message.split('').reverse().join('') }}
</div>

现在我们将这个插值表达式改写成计算属性的方式

<div id="example">
    {{ reverseMessage }}
</div>

var vm = new Vue({
    el: '#example',
    data: {
        message: 'hello'
    },
    computed: {
        // 计算属性的getter
        reverseMessage: function() {
                    // this指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
})

计算属性缓存
- 根据上面的列子，我们可以看出，计算属性是一个方法，写在computed对象中。为什么我们不直接用一个方法去代替计算属性呢。因为计算属性存在缓存，只有当计算属性依赖的数据（例子中的message）有变化的时候，计算属性才会去执行方法，返回数据。如果没有变化，则直接返回上次得到的数据。
- 如果用方法代替，那么每次使用的时候都会执行一次方法，当方法逻辑复杂的时候会影响性能
计算属性的getter和setter方法
- 计算属性默认只有getter方法
- 当需要的时候也可以写个setter方法
- 在下面的例子中，因为有了setter方法，此时fullName这个计算属性就有了改变他所依赖的数据的能力了。
- 当vm.fullName = 'John Doe'的时候，firstName和lastName就会变成John 和 Doe。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: {
      // getter 方法 数据引起计算属性的变化
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter 方法 对计算属性赋值，改变这个计算属性以来的数据
      set: function(newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  } 
})

侦听器
- 监听某一个值，当被监听的值发生变化时，执行对应的操作 (比如请求后台接口等这样的异步操作)
- 监听对象的时候，如何过对象属性的值发生变化的时候，是不会被监听到的。必须将deep: true配置上，例子中有
- 注意看例子中的注释，需要注意东西都写在注释里面

new Vue({
    el: '#id',
    template: `<div>
        // ...
    </div>`,
    data: {
        firstName: 'Leo',
        lastName: 'Alan',
        obj1: {
            a: 0
        }
    },
    watch: {
        // 监听firstName,当firstName发生变化时就会执行该函数
        firstName () {
            // 执行需要的操作...
            // 注:初始化不会执行，只有当被监听的值(firstName)发生变化时才会执行
        },

        // 监听lastName
        lastName: {
            handler (newName, oldName) {
                // 执行需要的操作...
            },
            immediate: true // true: 初始化时就会先执行一遍该监听对应的操作    
        },

        obj1: {
            handler () {
                // 执行需要的操作...
            },
            deep: true // 该属性默认值为false. 
            // 当被监听的值是对象,只有deep为true时,对应属性的值(obj1.a)发生变化时才能触发监听事件，但是这样非常消耗性能
        },

        // 监听对象具体的属性， deep就不需要设置为true了
        'obj1.a': {
            handler () {
                // 执行需要的操作...
            }
        }

    }
})

侦听器和计算属性的区别
- 侦听器与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)
- 计算可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性。具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据
- 侦听器损耗性能，在组件开发中，在组件销毁的时候要移除侦听器
- 不要在计算属性或者侦听器中去改变依赖的数据，容易进入死循环

最后编辑于：2019.10.17 16:48:09