watch、computed和methods之间的区别及用法

watch、computed和methods之间的区别

watch一般用于监听虚拟的东西，比如 url的地址；computed计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所有用到的数据都没发生改变， 则不会重新对计算属性求值；一般和数据模型结合使用；methods一般用于函数的调用

watch的用法

• handler方法当内容发生改变时 就会自动触发这个方法；它有两个参数：
  第一个： 更新的最新值(改变之后的值)；
  第二个参数：更新之前的值(改变之前的值)；
• deep为true监听多层数据(深度监听)； 这样会影响性能；
• immediate:true 代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
  代码：

<div id="app">
    <input type="text" v-model="obj.inputValue">
    <span>{{ msg }}</span>
</div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        obj: {
          inputValue: ''
        },
        msg: ''
      },
      watch: {
        // 要监听的对象；
        'obj.inputValue': {
          // 监听的是父级(obj.inputValue)值的改变；函数的参数返回的也是它的值；
          handler: function (newValue, oldValue) {
            console.log(newValue);
            console.log(oldValue);
            if (newValue.length > 10) {
              this.msg = "密码长度太长了"
            } else if (newValue.length < 2) {
              this.msg = "密码太短了"
            } else {
              this.msg = ""
            }
          },
          deep: true,
          immediate: true,
          // 如果监听的是路由的改变    获取路由的 url 参数可以这么写：
          '$route.path' : function(newVal,oldVal){
            console.log(newVal,oldVal);
          }
        }
      }
    })
  </script>

computed的用法

在computed 中，可以定义一些属性，叫做【计算属性】，计算属性的本质，就是一个 ‘方法’ 只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用；并不会把 计算属性，当作方法去调用，使用的时候需注意：

1. 相当于监听 它需要返回(return) 当函数里的内容发生改变时就会触发该函数(data 中的数据发生法改变)；
2. 计算属性，在引用的时候，不能加() 去调用；
3. 计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所有用到的数据都没发生改变， 则不会重新对 计算属性求值；

代码：

<div id="app">

      <input type="text" v-model = "changeText1">+
      <input type="text" v-model = "changeText2">=
      <input type="text" v-model = "changeValue">
      <p>{{ changeValue }}</p>
      <p>{{ changeValue }}</p>

  </div>

  <script src="./node_modules/vue/dist/vue.min.js"></script>
  <script>
  
    let vm = new Vue({
      el : '#app',
      data : {
        changeText1 : '',
        changeText2 : ''
      },
      computed : {
        changeValue(){
          console.log('它有缓存，当里面的值没有发生变化，多次使用同一个 计算属性方法，只调用一次；')
          return this.changeText1 + "+" + this.changeText2;
        }
      }
    })
  </script>

结果：写三遍 changeValue只调用一次，说明有缓存；