1. computed 计算属性
模板语法插值表达式非常便利 ,但在模板中放入太多的逻辑会让模板过重且难以维护,所以,对于复杂逻辑,应当使用计算属性。
<div id="app">
<h1>计算属性的使用</h1>
<!-- 计算属性是有缓存的 -->
<!-- 只有依赖data里面的数据发生变化了后 那么computed 才会会重新执行 -->
<p>{{getMsg}} </p>
<p>{{getMsg}} </p>
<h2>{{totalNum}}</h2> <!-- 5050 -->
<h2>{{totalNum}}</h2>
<h2>与 methods 对比</h2>
<p>{{getMsg1()}}</p>
<p>{{getMsg1()}}</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
getMsg1() {
console.log('methods'); // 会打印两次 methods methods
return ' 我是 methods 方法的返回值'
}
},
computed: {
getMsg(){
console.log("computed") // 只会打印一次 computed
return "我是computed的返回值" // 计算属性必须要有返回值 否则调用 getMsg 的时候无法拿到结果
},
totalNum(){
console.log("computed") //computed
let sum = 0;
for(var i = 1; i <= this.num; i++){ // this === vm
sum += i
}
return sum
}
}
});
计算属性(computed)与方法(methods)的区别: 计算属性是基于它们的响应式依赖进行缓存的,而方法不缓存