watch 与 computed

有三个输出框，第三个输出框的值等于第一个输出口的值加上第二个输出框的值（这里是字符串相加）。
如果你在 data 中写 fullName: this.firstName + this.lastName 显然是不行的。

1. 使用 computed

   <div id="app">
   <input type="text" placeholder="firstName" v-model="firstName"><br>
   <input type="text" placeholder="lastName" v-model="lastName"><br>
   <input type="text" v-model="fullName"><br>
   </div>
   <script>
   const vm = new Vue({
       el: '#app',
       data: {
           firstName: 'A',
           lastName: 'B'
       },
       computed: {
           fullName () {
               return this.firstName + this.lastName;
           }
       }
   })
   </script>

   此时我们就需要用到计算属性，当 firstName 和 lastName 的值发生改变时计算属性 fullName() 就会执行一次，fullName 的值就会更新（初始化的时候也会执行一次）。

2. watch

   <div id="app">
   <input type="text" placeholder="firstName" v-model="firstName"><br>
   <input type="text" placeholder="lastName" v-model="lastName"><br>
   <input type="text" v-model="fullName"><br>
   </div>
   <script>
   const vm = new Vue({
       el: '#app',
       data: {
           firstName: 'A',
           lastName: 'B',
           fullName: ''
       },
       watch: {
           firstName (newValue, oldValue) {
               this.fullName = newValue + this.lastName;
           },
           lastName (newValue, oldValue) {
               this.fullName = this.firstName + newValue;
           }
       }
   })
   </script>

   使用 watch 就需要监视 firstName 和 lastName 两个值了，只有当 firstName 和 lastName 的值发生改变的时候，fullName的值才会变化。