2020-9-3 VUE计算属性与侦听器

一、computed 与 methods 的区别

• computed 是属性调用，methods 是函数调用

• computed 带有缓存功能，而 methods 没有

下面我们来看例子：

 <div id="app">
        <div>{{ message }}</div>
        <div>{{ message.split('').reverse().join('') }}</div>
        <div>{{ reversedMessage }}</div>
        <div>{{ getReversedMessage() }}</div>
        <div>{{ fullname }}</div>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 创建 Vue 实例，ViewModel
        const vm = new Vue({
            el: '#app', // View
            data: {
                // Model 数据
                message: 'Hello Vue.js',
                firstname: '小明',
                lastname: '吴'
                    // fullname: '吴小明'
            },
            methods: {
                getReversedMessage() {
                    return this.message.split('').reverse().join('')
                }
            },
            computed: {
                // 计算属性
                // reversedMessage() { // getter
                //   return this.message.split('').reverse().join('')
                // }
                reversedMessage: {
                    get() {
                            console.log('调用 getter 方法')
                            return this.message.split('').reverse().join('')
                        }
                        // set() {}
                },
                fullname() {
                    return this.lastname + this.firstname
                }
            }
        })
    </script>

我们可以发现：
①、computed 的方法我们以属性访问的形式来调用，{{ reversedMessage }}，{{ fullname }}
②、而 methods 里的方法我们必须加上（）来调用，否则会出现报错，{{ getReversedMessage() }}

二、computed 的缓存属性

计算属性是基于它们的响应式依赖进行缓存的：就是说计算属性的值会被缓存，只有当其依赖项发生改变后，才会重新计算新的值并继续进行缓存

计算属性 vs 方法(methods)

计算属性值可被缓存，如果依赖项未发生改变，每次直接使用计算属性的缓存值就行了，而方法的调用，每调用一次，都会重新执行方法主体的任务（逻辑运算）

三、侦听器（watch 与其 immediate 属性）

	watch: {
                // 侦听属性
                firstname(newVal, oldVal) {
                    // console.log('firstname 变化', a, b, c)
                    this.fullname = this.lastname + newVal
                }
            }

计算属性 vs 侦听属性：

通常，计算属性是可以由多个数据项生成一个计算值，而侦听属性可以由一个数据项的变化影响多个其它数据项。

计算属性可以被缓存，而侦听属性不能缓存。

计算属性中不能使用到异步任务，而侦听属性中可以使用异步任务。

watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      immediate: true
    }
  } 

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。