vue中的计算属性 computed

发表于 | 更新于 | 分类于 | 阅读次数：
vue中使用 computed 时，改变对象的属性，vue无法检测到，通常直接改变这个对象的索引；

vue中使用计算属性 computed

html Vue:

1
2
3
4
5
6
7
8
<template>
    <div>
        <p>{{cpu_number}}</p>
        <p>{{cpu_numObj}}</p>

        <p>{{cpu_numObj2}}</p>
    </div>
</template>

javaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

data() {
    return {
        number: 1,
        numObj: {},
        numObj2: {},
    }
},
computed: {
    cpu_number: function() {
        return this.number ++
    },
    cpu_numObj: function() {
        this.numObj.type = '直接改变对象属性'    // 计算属性不会检测到
        return numObj.type
    }
    cpu_numObj2: function() {
        this.numObj2 = Object.assign({}, {type: '改变了对象索引'})    // 计算属性会检测到
        return numObj2
    }
}

总结： vue 计算属性computed可以检测到 变量 数组 对象的变化； 但是 对象的属性变化是不会被检测到的