本节内容
在模板内(即{{num+1}})计算虽然方便 但vue设计的初衷是用于简单运算,如果在模板中放入过多的逻辑运算会使模板过重且难以维护
言外之意就是将模板中的运算单独拿出来放在methods或computed或watch中进行处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
-->
<hr>
<h2>计算属性 - 在模板中直接进行业务计算</h2>
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
<hr>
<!--
在这个地方,模板不再是简单的声明式逻辑。
你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理
{{ message.split('').reverse().join('') }}
所以,对于任何复杂逻辑,你都应当使用计算属性
计算属性的取值需要使用computed中定义的function函数名字
-->
<h2>计算属性 - 抽取计算的业务到computed中</h2>
<div id="example2">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<button @click="change">动态改变值</button>
</div>
<hr>
<!--
其实我们可以在表达式中通过调用方法(method)来达到同样的计算效果,为什么还需要计算属性呢?
虽然计算属性缓存和方法最终效果是完全相同的 然而计算属性是基于他们的响应式以来进行缓存的,只有在相关响应的依赖发生改变时才会重新请求值
这就意味着只要message值没有发生改变 多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必在次执行函数进行计算
方法则是每次访问reversedMessage时都会去执行一次
计算属性 - 值不发生改变的情况下 直接在缓存取
方法 - 实时执行
*** 注意 *** 计算属性直接使用reversedMessage 但如果访问的是方法必须加小括号
-->
<h2>计算属性和方法</h2>
<div id="example3">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p >Method reversed message: "{{ reversedMessageASD() }}"</p>
<p >Method reversed message: "{{ reversedMessageASD() }}"</p>
</div>
</div>
<script type="text/javascript" src="../js/vue2.6.js"></script>
<script type="text/javascript">
let count=0;
new Vue({
el:'#app',
data:{
message:'Hello'
},
methods:{
change(){
this.message='etjava'
},
reversedMessageASD () {
count++;
return this.message.split('').reverse().join('')+'--'+count
}
},
computed:{
// 计算属性的取值
reversedMessage(){
count++;
// this.message 指向的是data中定义的message
return this.message.split('').reverse().join('')+'--'+count
}
}
});
</script>
</body>
</html>