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

目录

• computed
• watch
• methods
• 归纳三者不同点
• 1、methods
• 2、computed
• 3、watch

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

到此这篇关于Vue中computed属性和watch,methods的区别的文章就介绍到这了,更多相关Vue computed属性和watch,methods内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！