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属性值发生变化了。。。");

}

}

}

你可能感兴趣的:(computed计算属性和data_Vue 计算属性computed和监听属性watch比较)