vue初学篇----监视器（watch和computed）

监视器使用方法

---

<template>
  <div class="watchAndComputed">
    <h1 v-text="watchAndComputedTitle"></h1>
    <input v-model="watchAndComputedText"/>
    <button @click="changeArrayLsit">改变实体数据</button>
    <span>新数据:{{watchNew}}   老数据:{{watchOld}}</span>
    <hr/>
    <input v-model="n1"/>+<input v-model="n2"/>*<input v-model="rate"/> = {{resultComputed}}
  </div>
</template>
<script>
  let vm ;
  export default {
    name: 'watchAndComputed',
    data() {
      vm = this;
      return {
        watchAndComputedTitle: 'vue监视用法',
        watchAndComputedText:'1',
        watchNew:'1',
        watchOld:'1',
        arrayList: [
          {
            "code": "1",
            "value": "北京市"
          },
          {
            "code": "2",
            "value": "上海市"
          },
          {
            "code": "3",
            "value": "广州市"
          },
          {
            "code": "4",
            "value": "深圳市"
          },
          {
            "code": "5",
            "value": "杭州市"
          },
          {
            "code": "6",
            "value": "天津市"
          },
          {
            "code": "7",
            "value": "西安市"
          },
          {
            "code": "8",
            "value": "武汉市"
          },
          {
            "code": "9",
            "value": "长沙市"
          }
        ],
        n1:'',
        n2:'',
        rate:'',
      }
    },
    methods:{
      changeArrayLsit:function(){
          console.log(vm.arrayList);
          for(let b of vm.arrayList){
            b.code +="code";
          }
      }
    },
    /*
    单个的监听
     */
    watch:{
      arrayList: {
        deep: true,
        handler: function (newV, oldV) {
          vm.watchAndComputedText = Number(vm.watchAndComputedText)+1;
          console.log(newV, oldV);
        }
      },
      watchAndComputedText:function(newV,oldV){
        vm.watchNew = newV;
        vm.watchOld = oldV;
      }
    },
    computed:{
      resultComputed:function(){
        return (Number(vm.n1)+Number(vm.n2))*Number(vm.rate);
      }
    }
  }
</script>

监视器主要就是熟练的使用，在这里展示出来一个例子，一个是文本框里面的基本书记类型新老数据变化一个是复杂数据类型的变化，一个是监控多个的变化，具体结果如下图所示：