vue計算屬性的簡單使用

    <div id="app">
      <input type="text" v-model="firstName">
      <input type="text" v-model="lastName">
      <p>全名：{{fullName}}</p>
      <p>全名：{{fullName}}</p>
      <p>全名：{{fullName}}</p>
    </div>
    <script>
      // 計算屬性是根據data中已有的屬性，計算得到一個新的屬性
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: '李',
          lastName: '白'
        },
        // 定義計算屬性在computed屬性中
        computed: {
          // 這個屬性中寫函數，但是這個函數名字非常特殊，它可以作爲一個屬性直接使用
          // 計算屬性依賴緩存，當頁面多次使用同一個計算屬性的時候，它會將第一次計算出來的結果緩存起來，後續直接調用第一次的結果就行了，而不必再走計算邏輯
          fullName() {
            console.log('通過計算屬性實現');
            // 必須有return, 但這裏面不能處理異步操作
            // setTimeout(() => {
            //   return this.firstName + this.lastName
            // }, timeout);
            return this.firstName + this.lastName
          }
        }
      })
    </script>