computed计算属性和data_Vue 计算属性computed和监听属性watch比较

1、计算属性

介绍：

避免在模板中使用冗余代码处理data中的数据

当依赖的data对象中的属性值发生变化时，将会触发计算方法，在data对象中生成新的变量，并且会将新的变量缓存起来；(只要依赖的data对象属性值不发生改变，将不会触发计算方法；)

可以用计算属性实现的，也就可以用方法methods实现，但是methods性能不如computed高；因为methods每次渲染后都会被调用，而computed只要响应式依赖(data中的属性)没有发生改变，将不会重新计算，并且计算后会重新被缓存；

同样，可以用计算属性实现的，也就可以用侦听器watch实现，只要所依赖的相应数据不是频繁变化，开销不大的时候，就是用计算属性，反之用监听器；

计算属性不需要再data中进行定义；

使用：

(1)、监听firstName和lastName计算fullName

{{fullName}}

export default {

data() {

return {

firstName: "wang",

lastName: "wu"

}

},

computed: {

fullName: function () { // 监听data中的firstName和lastName值的变化, 得到新变量fullName，且fullName不需要再data中定义

return this.firstName + "-" + this.lastName;

}

}

}

(2)、使用setter和getter方法

firstName: {{firstName}}

lastName: {{lastName}}

{{fullName}}

更改

export default {

data() {

return {

firstName: "wang",

lastName: "wu"

}

},

computed: {

fullName: { // 监听data中的firstName和lastName, 得到新变量fullName

get: function() {

return this.firstName + "-" + this.lastName;

} ,

// set方法作用：通过参数修改计算的依赖属性firstName和lastName值

set: function(newValue) {

this.firstName = newValue[0];

this.lastName = newValue[newValue.length-1];

}

}

},

methods: {

changeValue() {

// 调用计算属性的set方法，修改firstName和lastName

this.fullName="yyyyy";

}

}

}

2、侦听器

介绍：

用于侦听变化较为频繁，开销较大的数据；

监听的变量需要在data中进行定义；

使用：

export default {

data() {

return {

question: "",

answer: ""

}

},

watch: {

question: function () { // 监听question值的变化, 只要question发生变化，这个函数将会被执行；

this.answer="---------------------";

this.getAnswer();

}

},

methods: function() {

getAnswer() {

console.log("question属性值发生变化了。。。");

}

}

}