计算属性

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

经过一系列计算后得到的属性值，这个值可以被模板结构或methods方法使用

• 计算属性定义到computed节点下
• 计算属性在定义的时候，要定义成方法格式
• 计算属性必须有返回值
• 计算属性必须当作普通属性使用

本例中主要使用``对字符串拼接，内部引用数据格式为${}

computed节点下，定义用的是方法，使用时是属性

    <div id="app">
        R:<input type="text" v-model="r">
        G:<input type="text" v-model="g">
        B:<input type="text" v-model="b">
        <div class="box" :style="{background:rgb}">
            {{rgb}}
        div>
    div>

    <script src="./lib/vue-2.6.12.js">script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                r: 0,
                g: 0,
                b: 0
            },
            computed: {
                //rgb作为一个计算属性，被定义成了方法格式
                //最终在这个方法中要返回
                rgb() {
                    return `rgb(${this.r},${this.g},${this.b})`
                }
            }

        })
    script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

好处：实现代码复用，只要计算属性中依赖的data变了，计算属性会自动求值

上面的用法使用了计算属性中的getter

接下来讲解一下setter

// 计算属性默认是这样使用的
// 但如果我们还想在rgb修改的情况下，反过来获取r,g,b
// 就需要用到setter
            computed: {
                //rgb作为一个计算属性，被定义成了方法格式
                //最终在这个方法中要返回
                rgb: {
                    get(){
                        return `rgb(${this.r},${this.g},${this.b})`s
                    },
                    set(newVal){
                        // newVal即为新的rgb
                        
                    }
                    
                }
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

计算属性和方法的区别

• 计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时(r,b,g)，才会重新计算，性能更好；而函数每次都会执行
• 也要注意一点，如果计算属性中没有响应式依赖，则计算属性将不会再更新，且计算属性的更新是判断地址改变，而不是值改变

// 例如
computed: {
  now: function () {
    return '123'
  }
}
// '123'不是响应式，所以不会再更新
1
2
3
4
5
6
7

所以：如果想要缓存数据，就使用计算属性；不想缓存就是使用函数

// 函数的使用方法
{{no()}}

  methods: {
    no(){
      return Date.now()
    }
  },
1
2
3
4
5
6
7
8

计算属性和watch的区别

1. 缓存
2. 计算属性不能调用异步，因为计算属性需要return返回值，但是异步中不能return；watch则没有问题

为什么异步不能return