Vue中computed属性和watch,methods的区别寻技术

computed

computed是一种计算属性，它会根据所依赖的响应式数据自动计算出一个新的值，并且该计算结果会被缓存起来，只有当所依赖的数据发生变化时才会重新计算，也就是说, 当所依赖的数据没有发生改变时, 多次访问计算属性它会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。而且computed本质上是一个只读属性，它不会修改任何响应式数据，只是根据所依赖的数据计算出一个新的值。

使用computed的好处在于它可以将复杂的计算逻辑封装在一个属性中，并且只有在需要时才会计算，并且在依赖数据没有发生变化时只返回上一次的计算缓存值，从而提高了代码的可读性和性能。

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

watch

watch是一种观察者模式，它会在所观察的响应式数据发生变化时执行一个回调函数，在回调中会传入newVal和oldVal两个参数。watch可以监听一个或多个响应式数据，并可以执行一些异步操作，例如发送网络请求或者操作本地存储等。

使用watch的好处在于它可以监控数据的变化并执行相应的操作。例如，我们可以使用watch来监听一个输入框的变化，并根据输入框的值发送网络请求：

watch: {
  inputValue(newValue, oldValue) {
    // 根据输入框的值发送网络请求
    fetch('http://example.com/api?query=' + newValue)
      .then(response => response.json())
      .then(data => this.result = data);
  }
}

在这个例子中，当inputValue发生变化时，watch会自动执行回调函数，并根据输入框的值发送网络请求。

methods

methods是一个普通的JavaScript方法，它可以接收参数并且可以执行任意的JavaScript代码。methods不会自动响应数据变化，需要手动调用才能更新视图。methods方法是每次调用, 都会执行函数的, methods而且它不是响应式的。

使用methods的好处在于它可以执行任意的JavaScript代码，并且可以根据具体的需求传入不同的参数。例如，我们可以使用methods来处理用户的点击事件：

methods: {
  handleClick(event) {
    // 处理用户的点击事件
    console.log('User clicked on', event.target);
  }
}

在这个例子中，当用户点击某个元素时，会调用handleClick方法，并将事件对象作为参数传入。

归纳三者不同点

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
  }    
}

原文地址：https://juejin.cn/post/7229891752647049274

本文地址：https://www.xunjs.com/vue/view_12549.html

Tags： method 区别属性

目录