聊聊Vue中的计算属性、方法与侦听器

<div id="app">
  {{fullName}}

  {{age}} <!-- 2️⃣把 age 渲染到模板上； -->
  
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'Oli',
      lastName: 'Zhao',

      age: 18 // 1️⃣data 中添加 age 为 18；
    },
    computed: {
      fullName() {
        console.log('计算了一次') // 3️⃣每当执行时 console.log 一次。
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

<div id="app">

  <!-- ❗️注意：在插值表达式内，计算属性通过属性的名字就可以用，但调用方法时，
	一定要加上 () 来进行调用！ -->
  {{fullName()}}

  {{age}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'Oli',
      lastName: 'Zhao',
      age: 18
    },

    methods: { // ❗️在 methods 中定义 fullName 方法，逻辑上与计算属性一样；
      fullName() { 
        console.log('计算了一次')
        return this.firstName + ' ' + this.lastName
      }
    }

  })
</script>

<div id="app">

  {{fullName}} <!-- 1️⃣-②：插值表达式内不需要 ()； -->

  {{age}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'Oli',
      lastName: 'Zhao',
      fullName: 'Oli Zhao', // 1️⃣-①：data 中定义 fullName；
      age: 18
    },

    watch: {  // 2️⃣在实例中定义侦听器 watch；

      firstName() { 
        console.log('计算了一次')
        this.fullName = this.firstName + ' ' + this.lastName
      },

      lastName() { 
        console.log('计算了一次')
        this.fullName = this.firstName + ' ' + this.lastName
      }
    }

  })
</script>