二、computed 和 watch，method

computed 和 watch，method

二者都可用于监听某个数据的变化，进而处理Data数据，进行页面重新渲染；

<div id="myDiv">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>

computed用例

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

watch用例

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

不同点：

computed

1. computed是计算属性，即通过依赖某些属性值来获得新的数据，只要有一个依赖改变了，就会触发该计算该函数以获得新的数据
2. computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理,因此，computed函数常需要return一个实例对象或者具体数据
3. computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

watch

1. watch是监听data数据中的某个属性值，只要该属性值改变，则会触发watch()函数
2. watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
3. $注意:$
   • 当watch监听对象数据时，example 1为错误使用，example 2才是正确打开方式

    //example 1
     watch:
     { goodsList.price(newVal,oldVal){}
     }
   

   正确打开方式:

    watch: {
    "dialogForm.appversionName"(newVal, oldVal) {  console.log("新值："+newVal,"旧值："+ oldVal);} 
   },
   

computed和watch组合使用

在某些应用场景中，需要computed和watch联合使用，见example3

computed: {
  goodAndCargoList() {
   const {
     GoodInfo,
     defaultData: { cargoList },
   } = this;
   return { GoodInfo, defaultData: { cargoList } };
 },
},

watch: {
 goodAndCargoList: {
   immediate: true,
   handler(newValue) {
     newValue.defaultData.cargoList.map(item => {
       let val = item.cargoId;
       if (newValue.GoodInfo.length) {
         newValue.GoodInfo.map(good => {
           if (val === good.value) {
             item.GoodTypes = good.goodType;
           }
         });
       }
     });
   },
   deep: true,
 },
},
//immediate属性:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行
//deep表示是否深度监听

参考：
引用：https://www.cnblogs.com/gunelark/p/8492468.html