入門學習Vue，計算屬性、方法、偵聽器是不可或缺的知識點。為了方便簡單，這次我們用同樣一個例子分別用計算屬性、方法、偵聽器三種方法來實現同樣的效果。話不多說，直接上車。
效果：
我在Vue中定義了name1和name2兩個值，預期效果是在html中輸出name，而name也就是name1 name2拼接而成。無論name1改變或name2改變，name都會隨著改變。
<div id="root">
{{name}}
</div>
<script>
// 父组件
new Vue({
el:"#root",
data:{
name1:'jiang',
name2:'he',
name:'jiang he',
}
})
</script>瀏覽器效果：
#1、計算屬性實作效果
<div id="root">
{{name}}
</div>
<script>
// 父组件
new Vue({
el:"#root",
data:{
name1:'jiang',
name2:'he',
},
computed:{
name:function(){
return this.name1+' '+this.name2;
}
}
})
</script>分析：computed就是計算屬性，從字面意思也能計算也就是把name1和name2拼接起來，最後產生了name。
要注意計算屬性是有快取的，也就是只要當name1或name2發生變化，和快取中的值不同的時候，才會重新計算。
如果name1或name2沒有發生變化，computed不會重新計算。
2、method方法實現效果
<div id="root">
{{name()}}
</div>
<script>
// 父组件
new Vue({
el:"#root",
data:{
name1:'jiang',
name2:'he',
},
methods:{
name:function(){
return this.name1+' '+this.name2;
}
}
})
</script>注意：插值表達式{{name()}}必須有括號。
和計算屬性不同，只要頁面載入一次，那麼方法就執行一次，沒有快取一說。
3、監聽器實現效果
<div id="root">
{{name}}
</div>
<script>
// 父组件
new Vue({
el:"#root",
data:{
name1:'jiang',
name2:'he',
name:'jiang he',
},
watch:{
name1:function(){
this.name= this.name1+' '+this.name2;
},
name2:function(){
this.name= this.name1+' '+this.name2;
}
}#注意：監聽器實現，從字面意思上也是能理解，監聽既是監聽name1和name2的變化，如果有變化，那麼name就會被重新賦值。這裡呢，有一個name預設值的。
最後
三種方法都可以實作同樣的方法，那麼最佳的又是哪一個呢？
最佳的是第一個計算屬性，計算屬性同第二種methods相比有緩存，節省效能，而同第三種相比又簡潔了程式碼。
大家在熟練後會越來越了解它們了。
以上是一個實例入門Vue計算屬性、方法、偵聽器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
