系列文章目录
Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器
文章目录
系列文章目录一、计算属性computed二、侦听器watch三、计算属性与侦听器的区别
一、计算属性computed
计算属性可以减少模板中的计算逻辑，进行数据缓存，提高性能。
<template>
<div>
<p>请输入字符串:
</p>
<input type="text" v-model="message" />
<br />
<p>反转后的字符串是:
</p>
<p>{{ reverseMessage }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "",
};
},
computed: {
reverseMessage: function () {
console.log("执行计算属性：反转字符串");
return this.message.split("").reverse().join("");
},
},
};
</script>
<template>
<computed></computed>
</template>
<script>
import Computed from './components/Computed.vue';
export default {
name: "App",
components: {
Computed
},
}
</script>
二、侦听器watch
watch可以对事件进行侦听并执行逻辑，比如函数节流，Ajax异步获取数据，甚至操作DOM.
<template>
<div>
<p>{{ a }}
</p>
<button @click="add">随机赋值
</button>
<p>a原来的值为:{{ old }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
a: 1,
old: null,
};
},
watch: {
a: function (val, oldVal) {
console.log("a old value=" + oldVal);
console.log("a new value" + val);
this.old = oldVal;
},
},
methods: {
add() {
this.a = Math.random();
},
},
};
</script>
<template>
<Watch></Watch>
</template>
<script>
import Watch from './components/Watch.vue';
export default {
name: "App",
components: {
Watch
},
}
</script>
三、计算属性与侦听器的区别
计算属性能做的，侦听器都能做侦听器能做的，计算属性不一定能做能用计算属性的尽量用计算属性
