vue中的computed与watch与methods

计算属性computed和watch以及methods的作用区别

---

前言

本篇文章主要总结了，vue当中必会的知识。计算属性computed、监听器watch、方法methods的用法，以及作用和区别。

---

一、methods是什么？

在vue中定义的methods属性，用来存放所有需要实现的方法。
例如：

var app = new Vue({
    methods:{
    //在此处定义方法
    方法名：function(){
    }
  }
});

二、什么是computed？

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。

computed: {
   get: function () { 
      return this.firstName + ' ' + this.lastName;// 必须要有return
  },
}

三、什么是watch?

当页面中某一个数据变动的时候，需要进行其它数据联动变换的时候。
实例：见下文

watch: {// 数据变化时执行异步或开销较大的操作
  nameValue(value) {
    this.checkName(value);
    this.tip = "正在验证......";
  }
}

四、计算属性computed和methods的区别？

computed 能实现的，methods 肯定也能够实现。
不同之处在于，computed 是基于他的依赖进行缓存的，computed 只有在他的的相关依赖发生改变的时候才会重新计算。
如果他的相关依赖并没有发生改变，每次访问都是返回他的缓存的值。
methods,则是每次触发重新渲染之后，调用方法会再次执行函数。
总结：当我们不希望有缓存的时候，就使用methods

五、计算属性和watch的区别？

computed 和 watch 的相同和不同之处

1、相同点

computed 和 watch 都是以vue的依赖追踪为基础的，都是希望当依赖发生改变的时候，被依赖的数据根据预定好的函数发生改变。

2、不同点

watch 监听，一般是监听一个数据，从而影响多个数据
computed 计算属性， 一般是计算一个属性，这个属性受多个数据影响
总结：一般使用computed,但是如果需要异步，或者数据开销太大的情况下，使用watch.

六、归纳三者不同点

methods，watch和computed都是以函数为基础的，但各自却都不同；

1、methods

不存在缓存，执行一次运行一次，执行n次，运行n次

2、computed

使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性
计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化
当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）
每个计算属性都包含两个set、get 属性
<div>{{get}} </div> //调用时候，直接写上函数名即可

computed: {
   get: function () { //这里不适合写 get()，语法规定
     return this.firstName + ' ' + this.lastName;// 必须要有return
  },
}

3、watch

使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化
watch:类似于监听机制+事件机制。
在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
// 这里直接用 v-model 来绑定，不需要添加 change 事件

<input type="text" v-model="name" />  {{tip}}
  data() {
    return {
      name: "",
      tip: ""
    };
  },
  methods: {
    checkName(value) {
      var arg = this;
      setTimeout(() => {
        if (value == "aa") {
          arg.tip = "用户名已存在";
        } else {
          arg.tip = "用户名可以使用";
        }
      }, 1000);
    }
  },
  watch: {// 数据变化时执行异步或开销较大的操作
    name(value) {
      this.checkName(value);
      this.tip = "正在验证......";
    }
  }

watch的高级用法
上面的watch方法是当改变值时候，才会触发监听事件，但是我们想刚进入页面时候，就触发监听事件，就要用handler（）方法
1，handler（）：当页面刚进入时，自动绑定watch事件，不需要进行触发

watch: {// 页面加载时，就自动触发此事件
  name:{
    handler(new){
       this.checkName(value);
       this.tip = "正在验证......";
    }
  }
}

2，immediate属性：布尔值
immediate：true：首次加载就监听数据变化
immediate：false：只有发生改变才监听

watch: {// 页面加载时，就自动触发此事件
  name:{
    handler(new){
       this.checkName(value);
       this.tip = "正在验证......";
    },
     immediate: true 
  }
}

3，deep:true；当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。

data（） {
  return {
      name: {
          'fristname': 'a',
          'lastname': 'a'
      },
      nameCount:0
  }
}，
watch: {
  name: {
      handler(newVal) {
          this.name++
      },
  deep: true
  }    
}

设置deep:true则可以监听到name的变化，此时会给name的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。
如果只需要监听对象中的一个属性值，可以字符串的形式监听对象属性：

watch: {
  'name.first': {
      handler(newVal) {
          this.name++
      },
  deep: true
  }    
}

总结

总结不易，学习到其中的知识最重要，如有错误，欢迎评论指正，虚心接受。