computed计算属性

Vue2中计算属性：计算属性和侦听器 — Vue.js (vuejs.org)

对于任何复杂逻辑，你都应当使用计算属性。

computed: {
    a:{
        get() {
           return ...
       },
        set(value) { 
           return ...
       }
    }
},
简写：(省去set)
computed: {
    a(){
        return ...
    }
},

若想修改a，必须设置set。

注意：在get和set中若想使用data中的属性，应使用this调用，this所指vm

html:
<div id="app">
    今天天气很{{info}}
    <button @click="changeWeather">切换天气</button>
</div>

script:
let vm = new Vue({
    el: '#app',
    data() {
        return {
            isHot: true,
        }
    },
    methods: {
        changeWeather() {
            this.isHot = !this.isHot
        }
    },
    computed: {
        info() {
            return this.isHot ? '炎热' : '凉爽'
        }
    },
})

总结

计算属性 ：

1. 定义：要用的属性不存在，要通过已有属性计算得来。
2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3. get函数什么时候执行？
   1. 初次读取时会执行一次。
   2. 当依賴的数据发生改变时会被再次调用。
4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5. 备注：
   1. 计算属性最终会出现在vm上，直接读取使用即可。
   2. 如果计算属性要被修改，那必须写 set 函数去响应修改，且set中要引起计算时依賴的数据发生改变。