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>