Vue中computed(计算属性)、methods、watch的区别

<div id="app">
    <!-- 监听到文本框数据的改变 -->
    <input type="text" v-model="firstname" @keyup="getFullName">+
    <input type="text" v-model="lastname" @keyup="getFullName">=
    <input type="text" v-model="fullname">
</div>

        let vm = new Vue({
            el: ‘#app‘,
            data: {
                firstname: ‘‘,
                lastname: ‘‘,
                fullname: ‘‘
            },
            methods: {
                getFullName() {
                    this.fullname = this.firstname + ‘+‘ + this.lastname;
                }
            }
        });

var vm = new Vue({ 
  data: { 
    a: 1, 
    b: 2 
  }, 
  watch: { 
    a: function (newVal, oldVal) { 
      console.log(‘new: %s, old: %s‘, newVal, oldVal) 
    }, 
    // 方法名 
    b: ‘someMethod‘, 
    // 选项的对象 
    c: { 
      handler: function (newVal, oldVal) { /* ... */ }, 
      deep: true， 
      immediate: true 
    } 
  } 
})

<div id="app">
    <!-- 监听到文本框数据的改变 -->
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
</div>

        let vm = new Vue({
            el: ‘#app‘,
            data: {
                firstname: ‘‘,
                lastname: ‘‘,
                fullname: ‘‘
            },
            watch: {
                // 使用这个属性，可以监听 data 中指定数据的变化，
                // 然后触发 watch 中对应的 function 处理函数
                // 其中传参：第一个（newVal）是指改变后的值，第二个（oldVal）是原值
                firstname: function (newVal, oldVal) {
                    // this.fullname = this.firstname + this.lastname;
                    this.fullname = newVal + ‘+‘ + this.lastname;
                },
                lastname: function (newVal, oldVal) {
                    // this.fullname = this.firstname + this.lastname;
                    this.fullname = this.firstname + ‘+‘ + newVal;
                }
            }
        });

<div id="app">
    <!-- 监听到文本框数据的改变 -->
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
</div>

    let vm = new Vue({
        el: ‘#app‘,
        data: {
            firstname: ‘‘,
            lastname: ‘‘
        },
        computed:{
            // 在 computed 中，可以定义一些属性，这些属性叫做【计算属性】，
            // 本质就是一个方法，只是使用这些计算属性的时候，是把他们的名称，
            // 之间当做属性来使用，并不会把计算属性当做方法调用；

            // 注意 1：计算属性在引用的时候，不要加小括号调用，直接当做普通属性去使用
            // 注意 2：只要计算属性，这个 function 中，所用的任何 data 中的数据发生了变化，就会
            // 立即重新计算这个计算属性的值，否则不会对计算属性从新求值
            // 注意 3：计算属性的求值结构，会被缓存起来，方便下次直接使用
            fullname:function () {
                return this.firstname+‘+‘+this.lastname
            }
        }
    });