1:为什么要有计算属性?
初衷是什么? -模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
-在这个模板里面就不是简单的声明式逻辑了,必须需要看一段时间才能看懂,所以对于任何复杂的逻辑你都应该用计算属性
-这里我们声明了一个计算属性reversedMessage. 我们提供的函数将用作property Vm.reversedMessage的getter 函数: -你可以打开浏览器的控制台,自行修改例子中的vm. message -触发set见写好的html
<div class="app">
<p>{{message}}</p>
<p>reverse{{reverseMessage}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello'
},
computed: {
// 反转
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
2.计算属性vs方法
-可以通过在表达式中调用方法来达到同样的效果
-两种方式的最终结果确实是完全相同的。 -然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要nessage 还没有发生改变,多次访问reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。(只要message没变过,我就永远不会动第二下,动了算我输)
<div class="app">
<p>{{message}}</p>
<p>reverse{{reverseMessage}}</p>
<p>reverse{{getMessage}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello'
},
// 计算属性
computed: {
// 反转
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
},
// 方法
methods:{
getMessage(){
return this.message.split('').reverse().join('')
}
}
})
</script>
计算属性的set
<div class="app">
<p>{{message}}</p>
<p>reverse{{reverseMessage}}</p>
<p>reverse{{getMessage}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello'
},
// 计算属性
computed: {
// 简写
// reverseMessage: function () {
// 反转
// return this.message.split('').reverse().join('')
// }
// 全写
reverseMessage: {
get: function () {
return this.message.split('').reverse().join('')
},
// 当用计算属性设置值的时候,可用set取获取这个值
set:function(val){
console.log(val);
}
}
},
// 方法
methods: {
getMessage() {
return this.message.split('').reverse().join('')
}
}
})
</script>