计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。对比普通函数方式，每次访问都需要执行一遍函数。
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。
例子
<script>
// @ is an alias to /src
export default {
data () {
return {
title: ‘标题‘,
}
},
computed: {
// 第一钟写法
ctitle () {
return this.title
},
// 第二种写法
ctitle2: function () {
return this.title
},
// 第三种写法
ctitle3: {
// 默认只有getter
get: function () {
return this.title
},
}
}
}
</script>
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
例子
watch: { // 监听一个对象属性变化 obj: { handler (newVal, oldVal) { console.log(‘监听对象的属性变化：‘, newVal) }, deep: true }, // 监听对象中name属性变化 ‘obj.name‘: { handler (newVal, oldVal) { console.log(‘监听对象中name属性：‘, newVal) } }, // 监听基数数据类型第一种写法 info (newVal, oldval) { console.log(oldval, newVal) }, // 监听基数数据类型第二种写法 title: { handler (newVal, oldVal) { this.obj.name = newVal } } }
<template>
<div class="home">
<p>侦听属性：obj.name={{obj.name}}</p>
<p>计算属性检测：obj.name={{comName}}</p>
<input type="text" style="width:100%;height:30px;border:1px solid" v-model="title">
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: ‘home‘,
data () {
return {
title: ‘‘,
obj: { name: ‘对象标题‘ }
}
},
computed: {
comName () {
return this.obj.name
}
},
watch: {
// 第一种写法
obj: {
handler (newVal, oldVal) {
console.log(‘监听对象的属性变化：‘, newVal)
},
deep: true
},
// 第二种写法
‘obj.name‘: {
handler (newVal, oldVal) {
console.log(‘监听对象中name属性：‘, newVal)
}
},
title: {
handler (newVal, oldVal) {
this.obj.name = newVal
}
}
}
}
</script>
2.监听data中基本数据类型属性变化
<template>
<div class="home">
<p>{{ctitle}}</p>
<input type="text" style="width:100%;height:30px;border:1px solid" v-model="title">
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: ‘home‘,
data () {
return {
title: ‘标题‘
}
},
computed: {
ctitle () {
return this.title
}
},
watch: {
title: {
handler (newVal, oldVal) {
console.log(newVal, oldVal)
}
}
}
}
</script>
原文：https://www.cnblogs.com/web-record/p/12191722.html