如果有這麼一段程式碼【兩個變數輸出 但是之間要加一個空格】：

   <div class="app">
        <p>{{title + " " + name}}</p>
    </div>

    <script>
        const app = new Vue({
            el:'.app',
            data:{
                title:"歡迎您：",
                name:"Bi-Hu"
            }
        })
    
 
</script>

那麼 如果有很多操作的時候 肯定是是很繁瑣 程式碼健壯性也是不好的，所以我們能想到用方法：

    <div class="app">
        <p>{{join()}}</p>
    </div>

    <script>
        const app = new Vue({
            el:'.app',
            data:{
                title:"歡迎您：",
                name:"Bi-Hu"
            },
            methods:{
                join:
 
function (){
                    return this.title + " " + this.name;
                }
            }
        })
    </script>

當然我們知道這樣行得通 但是問題來了 每個{{}} 鬍鬚表示式裡面都要有一個括號，是不是很煩？ 所以有了 計算屬性：

computed 指令

它類似於 methods 指令，但是呢 他裡面定義的方法不用加括號 ，而且 識別符號一般不加上動詞（get、set 什麼什麼的）：

所以：

<div class="app">
 

    <p>{{join}}</p> <!--這裡的join是不用括號的 因為Vue當他是一個變數來解析 這就是computed的強大之處-->
</div>

<script>
    const app = new Vue({
        el: '.app',
        data: {
            title: "歡迎您：",
            name: "Bi-Hu"
        },
        computed: {
            //不要加get set 等 那些動詞哦~
            join: function () {
                return this.title + " " + this.name;
            }
        }
    })
</script>

所所以呢 你自己對比上下兩個程式碼的不同即可.