vue watch 详解

一、watch用来干嘛
用来监控某个变量（对象）的值，每次变化都能被监控到。
例子1：给一个问题，在回答框内输入答案，每次输入更改都尝试判断是否正确。注意，没有提交按钮。

<template>
  <div>
    <span>题目为：</span>
    {{quiz}}
    <br>
     <span>请输入：</span>
    <el-input v-model="ans"></el-input>
    <br>
    {{judge}}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        quiz:'1+1=？',
        ans:'',
        judge:'not right'
      };
    },
    watch: {
      ans(val){
        if(val==2){
          this.judge='bingo'
        }else{
          this.judge='not right'
        }
      }
    },
  };
</script>

这里有一个错误理解，ans（val）的样子很像一个函数，这是一个误解。这是缩写，不是函数，只是缩写完刚好长得像函数而已。
完整的写法是

	watch: {
      ans:{
        handler(val,oldval){
          if(val==2){
            this.judge='bingo'
          }else{
            this.judge='not right'
          }
        },
        immediate:false,
        deep:false,
      }
    },

这样就好理解了，watch中填入的ans代表对ans这个变量的监视，handler才是函数。
二、immediate和deep的含义
接下来解释一下immediate和deep的含义。
immediate很好理解，就是当页面初始化以后，ans刚刚被监控覆盖。这个时候，vue把ans中的初始值记录下来，因为没有新值传入，没有变化，就不会执行handler函数。immediate的作用就是在刚覆盖监控的时候，让程序立即执行一次handler。
deep的作用看下一个例子。
例子2：当上面问题变成很多个的时候，存放答案的ans变量就是一个对象。

data() {
      return {
        quiz:'1+1=？',
        ans:{
          ans1:'',
          ans2:''
        },
        judge:'not right'
      };
    },

如果这个时候要监控ans1，按照正常写法会出错，错误如下图。

所以有对象的时候就要用到deep了。

<template>
  <div>
    <span>题目为：</span>
    {{quiz}}
    <br>
     <span>请输入：</span>
    <el-input v-model="ans.ans1"></el-input>
    <br>
    {{judge}}
    
  </div>
</template>
<script>
  export default {
    data() {
      return {
        quiz:'1+1=？',
        ans:{
          ans1:'',
          ans2:''
        },
        judge:'not right'
      };
    },
    computed:{

    },
    watch: {
      ans:{
        handler(val,oldval){
          if(val.ans1==2){
            this.judge='bingo'
          }else{
            this.judge='not right'
          }
        },
        immediate:false,
        deep:true,
      }
    },
  };
</script>

这里要注意的是handler中的val和oldval是ans，所以是一个对象。因此在使用的时候要选对象中的某个属性。
对比这个写法和上面错误的写法我们可以得出。watch无法监视对象内部值得变化，只能监视整个对象。但可以用deep，让内部值变化的时候，整个对象受到一次监控刷新。

三、
对于上一个例子，还有两个优化的方法。
回顾一下上面问题的矛盾点，想要监控对象的属性的时候。因为监控只能生效于data中的第一层的变量，所以我们不能监控对象中的某项属性。
回顾一下解决方法，开启深度监控，对象中的某项属性一产生变化，即视为对象全部变了，返回一整个对象。
优化方法一：
因为监控只能生效于data中的第一层的变量。所以只需要把这个对象中的属性一一和普通变量绑定即可。但是这样就违背了用对象的初心，本末倒置。因此可以创建一个暂时用的变量，暂时用的变量在computed中。
（computed就是一个中介。在以前的文章中，有一个例子。data里存着两个变量firstname和lastname。如果想在得到完整的姓名，又不想创新变量。就在computed中设置一个函数，这个函数的return值是firstname+lastname。）

<template>
  <div>
    <span>题目为：</span>
    {{quiz}}
    <br>
     <span>请输入：</span>
    <el-input v-model="ans"></el-input>
    <br>
    {{judge}}
    
  </div>
</template>
<script>
  export default {
    data() {
      return {
        quiz:'1+1=？',
        ans:{
          ans1:'',
          ans2:''
        },
        judge:'not right'
      };
    },
    computed:{
      checker(){
        return this.ans.ans1
      }
    },
    watch: {
      checker(val){
        if(val==2){
          this.judge='bingo'
        }else{
          this.judge='not right'
        }
      }
    },
  };
</script>

优化方法二：
可以看出启用deep的一个缺陷，如果这个对象有很多属性，那么监控就要监控很多方面，浪费资源。vue后来为了解决这个问题，解决了‘监控只能生效于data中的第一层的变量’这个问题。但是在编程逻辑上和正常逻辑不同，下面介绍这种写法。
观察上文中用正常逻辑写的那个出错的部分，因为监控识别不到对象.属性，所以在太深识别不到的部分加上引号，把整个转换成字符串。vue在解析的时候就会把watch中字符串当做对象.属性解析。

<template>
  <div>
    <span>题目为：</span>
    {{quiz}}
    <br>
     <span>请输入：</span>
    <el-input v-model="ans.ans1"></el-input>
    <br>
    {{judge}}
    
  </div>
</template>
<script>
  export default {
    data() {
      return {
        quiz:'1+1=？',
        ans:{
          ans1:'',
          ans2:''
        },
        judge:'not right'
      };
    },
    watch: {
      'ans.ans1'(val){
        if(val==2){
          this.judge='bingo'
        }else{
          this.judge='not right'
        }
      }
    },
  };
</script>