伍佰目录 短网址
  当前位置:海洋目录网 » 站长资讯 » 站长资讯 » 文章详细 订阅RssFeed

Vue中的computed和watch的区别

来源:本站原创 浏览:104次 时间:2022-11-30

Vue项目开发中,有这么两个属性比较容易混淆,如果不特别注意,用法比较相似,这两个属性就是computed和watch,其实这两个还是有很大差别,下面就讲讲这两个属性的用法及不同
先说说为什么比较像,我们看下面代码。

<template>  <div>    <input type="text" v-model="a" />    <div>a={{ a }}</div>    <div>b={{ b }}</div>    <div>c={{ c }}</div>  </div></template><script>export default {  data() {    return {      a: 1,      c: 0    }  },  watch: {    a(val) {      console.log(val)      this.c = val + '数据'    }  },  computed: {    b: function() {      return this.a + '数据'    }  }}</script>


通过代码和gif可以看到当我输入框在变的情况下,b和c数据始终保持一致,这种效果项目中可能会用到。所以说很多人容易混淆,分不清用法。接下来就说说他们的用法和不同。

1 computed:计算属性

computed官方定义计算属性,模板内使用表达式是非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性。

<template>  <div>    <input type="text" v-model="a" />    <br />    <button @click="setb()">设置b</button>    <div>a={{ a }}</div>    <div>b={{ b }}</div>  </div></template><script>export default {  data() {    return {      a: ''    }  },  computed: {    b: {      get: function() {        console.log('获取b')        return this.a      },      set: function(val) {        console.log('设置b值')        console.log('传入值:' + val)        console.log('b值:' + this.b)      }    }  },  methods: {    setb() {      this.b = 1    }  }}</script>


当我们点击按钮“设置b”时,我们会给b设置一个值“1”,通过set方法可以获取到设置的值,但是我们打印b值,其实是没有变化的。computed里的数据有get和set方法,但是我们常用的是get方法,一般很少用set方法。

从上面可以看出,computed支持缓存,属性值会默认走缓存,只有基于data中声明过或者父组件传递的props中的数据通过计算得到的值发生改变,才会重新进行计算。

强调一点,使用computed的数据不能在data中声明,否则会提示错误,并且函数也不在执行。

2 watch:监听属性
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

<template>  <div>    <input type="text" v-model="a" />    <div>a={{ a }}</div>    <div>c={{ c }}</div>  </div></template><script>export default {  data() {    return {      a: '',      c: ''    }  },  watch: {    a(val) {      console.log(val)      this.c = val + '数据'    }  }}</script>

上面的代码是,监听a,如果a发生变化,就在a的后面加上“数据”,把值保存给c。watch监听不支持缓存,数据发生变化,会直接触发相应的操作,监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;具体内容请参考另外一篇文章
Vue中watch的详细用法。
注:监听的数据必须是data中声明的或者父组件传递过来的数据。

3 总结
Computed特点:
需要主动调用,具有缓存能力只有数据再次改变才会重新渲染,否则就会直接拿取缓存中的数据。
Watch特点:
无论在哪只要被绑定数据发生变化Watch就会响应,这个特点很适合在异步操作时用上。

  推荐站点

  • At-lib分类目录At-lib分类目录

    At-lib网站分类目录汇集全国所有高质量网站,是中国权威的中文网站分类目录,给站长提供免费网址目录提交收录和推荐最新最全的优秀网站大全是名站导航之家

    www.at-lib.cn
  • 中国链接目录中国链接目录

    中国链接目录简称链接目录,是收录优秀网站和淘宝网店的网站分类目录,为您提供优质的网址导航服务,也是网店进行收录推广,站长免费推广网站、加快百度收录、增加友情链接和网站外链的平台。

    www.cnlink.org
  • 35目录网35目录网

    35目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向35目录推荐、提交优秀网站。

    www.35mulu.com
  • 就要爱网站目录就要爱网站目录

    就要爱网站目录,按主题和类别列出网站。所有提交的网站都经过人工审查,确保质量和无垃圾邮件的结果。

    www.912219.com
  • 伍佰目录伍佰目录

    伍佰网站目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向伍佰目录推荐、提交优秀网站。

    www.wbwb.net