这期的主题是Vue的计算属性computed。
我们都知道插值表达式{
{}}，{
{}}可以实现双向的数据绑定，并且可以在其中进行一些常规的算数运算和逻辑运算。
但是模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，在之前我们可以使用methods实现这种效果，但是computed相比methods来说，速度更快，因为computed是基于依赖缓存的，缓存的特点就是一个字，快！
我们来看一下具体的代码实现。
这是利用methods完成字符串反转的方法。
<div id="app">
<h3>{
{reverseMsg()}}</h3>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'Hello World!'
},
methods: {
reverseMsg:function(){
return this.msg.split('').reverse().join('');
},
}
});
</script>
这是利用计算属性computed实现字符串反转的方法。
<div id="app">
<h3>{
{reverseMsg}}</h3>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'Hello World!',
},
computed: {
reverseMsg:function(){
return this.msg.split('').reverse().join('');
}, }
});
</script>
都可以正常地完成我们的需求，但是，它们之间还是有区别的。
Vue的官方文档为我们提示了
计算属性是基于它们的响应式依赖进行缓存的，只有相应的响应式依赖发生改变时它们才会重新求值。
这句话是啥意思呢，就是，methods实现这个反转字符串的时候，每次都会执行reverseMsg这个函数，请注意，是每次。。。
但是computed实现这个反转字符串的时候，只有第一次才真正的执行这个函数，并把结果存入缓存中，之后再需要用到的时候，它直接去缓存里面取，不会重复执行这个函数。这还是很有意义的，computed才能在这种需求中实现最佳性能。
<div id="app">
<h3>{
{reverseMsg}}</h3>
<h3>{
{fullName}}</h3>
<button @click="handeClick">改变</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'Hello World!',
firstName:'Creator',
lastName:'Ray'
},
methods: {
handeClick(){
this.msg = '计算属性computed生效!';
this.lastName = 'God';
}
},
computed: {
reverseMsg:function(){
return this.msg.split('').reverse().join('');
},
fullName:function(){
return this.firstName + this.lastName;
}
}
});
</script>
再看一下这段代码，我们用计算属性关联了fullName，并且我们写了一个按钮，用来改变fullName中这些data值得数据，看一下计算属性发生什么改变。
很明显，我们点击按钮之后，msg和lastName的值都发生了变化，并且，因为我们是用计算属性实现这一功能的，所以计算属性的reverseMsg和fullName也被执行了。这说明计算属性的绑定是持久性的，并且当对应的值发生变化后，计算属性会立即被执行，还是很方便的。
有微信小程序课设、毕设需求联系个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！
