上一節(jié)寫了Vue實例的生命周期藤乙，我們心里有了個Vue里的數(shù)據(jù)綁定至DOM猜揪，那么具體怎么實現(xiàn)的呢？
要實現(xiàn)只需要在Vue綁定的DOM元素中使用mustache語法即可坛梁，簡單例子如下
<div id="app">
<h2>{{message}}</h2>
<hr>
<h3>全名：{{fullName}}</h3>
<h3>lastName：{{lastName}}</h3>
<h3>firstName：{{firstName}}</h3>
<h3>computed:{{name}}</h3>
<button @click="getFullName">點擊顯示全名</buuton>
</div>
<script src="./../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello vue",
firstName: 'keobe',
lastName: 'bryant',
fullName: '請點擊按鈕'
},
methods: {
getFullName(){
this.fullName = this.firstName + " " +this.lastName
}
},
computed: {
name(){
return this.firstName + " " +this.lastName
}
}
})
</script>
效果如下：
第一行：hello vue而姐，這是data中的message變量，從這里可以看出來划咐，這里的mustache語法拴念，可以看做所有Vue實例掛載的DOM元素中的{{變量}}都替換成變量的值钧萍。
再分析一下Vue的實例對象，這段代碼比上一篇文章中的代碼在實例中多了兩個對象政鼠，一個是methods风瘦，另一個就是computed。其中methods里存放的是方法公般，computed里存儲的是計算屬性万搔。
我們在初始化Vue對象時，可以傳入哪些參數(shù)呢官帘？接下來就統(tǒng)一分析一下瞬雹。然后一個一個的解釋解釋。
el ：提供一個頁面上的DOM元素作為Vue實例的掛載目標(biāo)遏佣，可以是選擇器或者DOM實例
data ：存儲響應(yīng)式的數(shù)據(jù)
methods ：用于存儲需要使用的方法
computed ：計算屬性挖炬？揽浙？状婶？？
components ：存放子組件對象
生命周期函數(shù) ：存放上一節(jié)講的各種生命周期函數(shù)
el和data上一節(jié)就講過了馅巷，就不在復(fù)述膛虫。這里重點描述一下computed（計算屬性）。細(xì)心的已經(jīng)發(fā)現(xiàn)問題了钓猬，為什么它叫計算屬性稍刀，但是在例子中確實一個方法？敞曹？账月？還有它到底是一個什么東西，如此的難以理解澳迫。為什么要使用它局齿，用方法來替代不是更香嗎？
為什么需要計算屬性：用小白語言解釋官方的標(biāo)準(zhǔn)話術(shù)就是橄登，當(dāng)模板中的數(shù)據(jù)運算太多抓歼，就會難以維護(hù)，因此引入計算屬性拢锹。再簡化一下就是谣妻，計算屬性就是為了把一些運算封裝，然后引入卒稳。哪些運算呢蹋半？比如字符翻轉(zhuǎn)，大小寫轉(zhuǎn)化充坑，數(shù)值相加減乘除减江，以及這些全部混用闻蛀。當(dāng)任何你覺得復(fù)雜的運算出現(xiàn)時，你都應(yīng)該使用計算屬性您市。
怎么使用：<h3>computed:{{name}}</h3>這一行就是使用觉痛，看上面例子應(yīng)該能了解。
使用計算屬性的優(yōu)勢：假設(shè)我們有一個性能開銷比較大的計算屬性 A 茵休，它需要遍歷一個巨大的數(shù)組并做大量的計算薪棒。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存榕莺，我們將不可避免的多次執(zhí)行 A 的 getter俐芯！如果你不希望有緩存，請用方法來替代钉鸯。
這也完美的解釋了為什么不用方法而要使用計算屬性吧史，因為計算屬性會緩存。計算屬性在多次調(diào)用的時候唠雕，只會執(zhí)行一次贸营，結(jié)果就會緩存，下一次調(diào)用直接使用緩存好的岩睁。而方法則是調(diào)用幾次钞脂，就執(zhí)行幾次。
計算屬性到底是什么：真實的計算屬性是下面代碼中的前面部分捕儒，后面部分就是我們常用的簡寫形式冰啃。
name: {
set: function(){},
get: function(){return 'abc'}
}
}
//簡寫后
computed: {
name: function(){
return 'abc'
}
}
因此<h3>computed:{{name}}</h3>中調(diào)用計算屬性name時，沒加小括號刘莹，實質(zhì)上是返回了get方法阎毅。計算屬性一般沒有set方法，絕大多多多數(shù)情況下都是這樣点弯。
小作業(yè)：接下來我們用代碼實現(xiàn)一下計算屬性與方法的區(qū)別扇调，直觀的觀察一下計算屬性的緩存：
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
</div>
<script src="./../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Li',
lastName: 'KUN'
},
computed: {
fullName: function(){
console.log('fullName')
return this.firstName + ' '+ this.lastName
}
},
methods: {
getFullName: function (){
console.log("getFullName()")
return this.firstName + ' '+ this.lastName
}
}
})
</script>
結(jié)果如下：可以明顯的看到方法執(zhí)行了6次（這里打印一次，即為執(zhí)行一次）蒲拉。而計算屬性只打印了一次肃拜，所以只執(zhí)行了一次。
