Vue中watch、computed、updated三者的区别及用法

//在一个vue实例中
  new Vue({
    el:"#myApp",
    data:{
      num1:1,
      num2:2
    },
    methods:{},
    watch:{
     //这里两个属性，第一个值是变化后最新的值，第二个是变化前
      num1(after,before){
        this.num2 = after +1
      }
      immediate:true  //页面首次加载的时候做一次监听。
     //这里的意思就是，监听num1的变化，当num1的数据发生变化的时候，来操作num2的值
    }
  })

 new Vue({
    el:"#myApp",
    data:{
      obj:{
        userName:"caicai"
      }
    },
    watch:{
      obj:{
        handler(newValue,oldValue){
          // handler函数是当你的obj发生变化的时候你要做什么          
         console.log(newValue.userName,oldValue.userName);
        },
        deep:true //是否深度侦听，true开启，false关闭,默认false
        //加了deep之后相当于在对象obj每一层的属性都加上了handler侦听器。否则的话侦听到的只是引用地址，不会执行handler函数
      }
    }
  });

  <div id="myApp">
    <input type="text" v-model="str">
  1、第一种操作，写在模板里，导致模板过重，难于维护
    <p>{{str.split("").reverse().join("")}}</p> 
  2、第二种，使用一个方法来调用，若多处使用，就执行多次，降低运行速度，性能减少
    <p>{{fn(str)}}</p>
  3、第三种，使用过滤器，具有缓存，只要str不发生变化，就不会再次进行运算
    <p>{{reverseStr}}</p>
  </div>
<script type="text/javascript">
new Vue({
  el:"#myApp",
  data:{
    str:"abcd"
  },
  methods:{
    fn(v){
     //若多出调用，就执行多次
     return v.split("").reverse().join("")//炸开--反转--组合
    }
  },
  computed:{
    reverseStr(){
     //str不发生变化的话，我只执行一次，具有缓存
      return this.str.split("").reverse().join("")
    }
  }
})
</script>

<row-list 
 v-if="dataList.rules" 
 :canSelect="!isClose" 
 :dataList="dataList.rules[0].subLotteryRule[0].subLotteryRule.reverse()" 
 @selectRow="selectRow"></row-list>