[笔记][Vue.js]打开Vue.js世界的大门(5)-太複杂的事情就交给computed吧！

嗨啊！大家好！经过昨天耍了一天废后，今天继续闯蕩Vue世界吧！

孔子说「温故而知新」所以在进入正文之前我们先简单複习一下资料绑定，看能不能因此获得新的知识XD
HTML

<div id="baseVue">    {{text}}</div>

JavaScript

let textData = {    text:'Hello!World!'}let showText = new Vue({    el:'#baseVue',    data:textData})

OK！不管有看前几篇，或是没看过的大大们，应该都知道textData.text的资料会绑定到HTML的{{text}}上面，这叫做单向绑定，双向绑定小弟在此就不说了，其实包着text的两个括号内，是可以写下JavaScript的表达式的，什么是表达式呢？让我们在不动到JavaScript的状态下看一下HTML的改变：

<div id="baseVue">{{ '这是加在前面的文字' + text}}</div>

看(我不是在骂髒话XD)！画面上除了原本繫结的Hello!World!外又多了前面加上去的字串，这时候你可能会想说，我是在装笑维吗？要这样写不如直接写成这是加在前面的文字{{text}}，还可以不用单引号和加号！没错！如果你心中有闪过一丝这样子的想法就对了，不过这只是个小例子嘛！再给我一次机会吧！一样在修改一下HTML：

<div id="baseVue">    {{text.split('').reverse().join('')}}</div>

贴心PS时间：

str.split(s)：把字串str用s分隔成一个阵列，空字串就是每个字元都放一个位置。arr.reverse()：把阵列中的内容反转，[1,2,3]变[3,2,1]。arr.join(s)：把阵列内的所有内容串成字串，每个索引间都穿插字元s，空字串就是不穿插。

好的，结束PS时间，结果如下：

没看错！在Vue.js的{{}}中可以使用任何函式，就算我把他切割成阵列，再反转，再组合成字串，只要确定该行是一个表达式，那我保证Vue.js不会让你失望。

好的，那就继续...什么？你说表达式到底是什么？简单来说，就是可以产生出一个值的句子，就叫做表达式，但是别想在{{}}中宣告变数哦！那个就做叙述句而不是表达式。

那接下来我们就会想，可是如果把处理资料的逻辑写在前面的繫结，这边一块那边一块，也太不方便了吧！而且如果以后要改一个地方，又要去找哪边有这些表达式去一个一个改...所以！我们就有了一个救星！

computed！

这个计算属性是继el、data、methods之后出现的第四个团员，官方直接翻译他叫计算属性，如果有需要像上面那样把data的资料放在画面上的许多地方，又必须做一些处理后再绑定，那就可以直接把处理资料的逻辑写在计算属性中，例如我将上一个例子修改一下：
HTML

<div id="baseVue">    <!--这里改成繫结computed内的属性名称-->    {{reText}}</div>

JavaScript

let textData = {    text:'Hello!World!'}let showText = new Vue({    el:'#baseVue',    data:textData,    computed:{        //在computed中创建一个reText属性来放刚刚的表达式        reText:function(){            /*这里的this指向showText这个实体            可以从实体物件去取我们放在data中的资料            也可以直接透过textData去取值*/            return this.text.split('').reverse().join('')        }    }})

我可没有用同一张图，是得出来的结果真的和上方一模一样，所以把逻辑整理在computed，HTML就轻鬆的绑定资料，如果以后要改直接从computed中去修改，而且上述例子的reText因为有使用到textData中text的资料，所以当textData.text的资料发生改变了，computed就会重新计算新值并绑定到画面上：

但是相反的，如果值没有发生改变computed是不会重新计算值绑定到画面上的，他会把第一次的值存在缓存中，一直到资料改变了，才会重新计算并写入新值到缓存里，所以官方举了下面的例子：
HTML

<div id="timeVue">    {{now}}</div>

JavaScript

let timeVue = new Vue({    el:'#timeVue',    computed:{        now:() => Date()    }})

他会让剎那变永恆，因为没有他并没有使用到data中的任何资料(当然上面的例子也没有data)，所以没有使用的data发生改变，那computed就不会重新计算新值！

这样看起来computed不只会让HTML更乾净，还可以把整理好的逻辑整理在物件中，但是更想不到的是我们刚刚做的只是一半而已，上半段使用的名字是耳熟能详的getter；既然有getter那绝对也少不了setter！

等等，虽然功能是一样的，但为什么刚刚都没去指定getter属性？好的，这个问题非常容易，因为getter在computed的属性中是预设的！如果需要用到setter的话就必须像下方的例子一样，好好写清楚才行！
HTML

<div id="nameVue">    {{name}}</div>

JavaScript

let nameData = {    //这边如果有打反了还请留言告诉我XD，我再修正    firstName : 'Tom',    lastName : 'Cruise',}//把计算属性拆出来let nameComputed = {    name:{        //取值，把姓氏和名字加起来回传        get:() => nameData.firstName + ' ' + nameData.lastName,                //设值，这里的val是指定给name的值        set:(val) => {            //把val用一个空格分割成阵列，因为姓和名中间通常有空白            let name = val.split(' ')            //给值，姓给firstName，名字给lastName            nameData.firstName = name[0]            nameData.lastName = name[1]        }    }}let nameVue = new Vue({    el:'#nameVue',    data:nameData,    computed:nameComputed,})

getter的结果：

setter的结果：

上面例子的nameComputed是我把资料逻辑的物件拆出来，之后再指定给nameVue的computed属性，可以看到和之前不一样的是，我在name里面又放了两个属性「get和set」，分别区分取值的时候执行什么，设值的时候又执行什么，而set的function有一个参数，那里是我们赋予他的新值，所以可以直接拿来处理写入的部分！

小小题外话，不知道有没有人注意到在最后一个例子的computed中，我是直接对nameData做操作和取值，并没有使用this，因为在JavaScript的ES6语法，箭头函式是依照定义函式时的物件去指定this，而不是使用时的物件，这点是我刚刚不小心踩到的雷点，想说怎么值都跑不出来XD，和大家分享一下！

---

连存取器都可以用上，是不是觉得computed是个好东西XD，就算我现在还没在实务中使用到他，光想着就对他爱不释手了！文章的最后还是感谢各位大大的观看！如果内容有任何观念错误或解释不清楚的地方，再麻烦留言告诉我，我会尽快修正的！谢谢大家