看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods、watch、computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景,也很难用好它们,希望接下来的介绍为你答疑解惑。

computed

我们先来看计算属性:computed,光看名字也知道是用来干什么的,计算属性当然是用来计算的,但是是怎么计算的呢?计算属性有两个显著的特点:

  • 计算属性计算时所依赖的属性一定是响应式依赖,否则计算属性不会执行
  • 计算属性是基于依赖进行缓存的,就是说在依赖没有更新的情况,调用计算属性并不会重新计算,可以减少开销

我们来看一个相关的例子:

```<div id="app">
<div>{{ arr.join('') }}</div>
<div>{{ arr1 }}</div>
<div>{{ getDate }}</div>
<div>{{ getDate1 }}</div>
</div>
```


var app = new Vue({
el: '#app',
data: {
date: '',
arr: ['a', 'b', 'c']
},
computed: {
getDate () {
return Date.now()
},
getDate1 () {
return this.date
},
arr1 () {
return this.arr.join('')
}
},
created () {
setInterval(() =&gt; {
this.date = Date.now()
}, 1000)
}
})

看上面的例子,我们在写vue的时候,经常会碰到要对data的值进行操作的情况,为了方便,总是会有人直接在模版中对data的值进行计算操作,就像我上面例子中写的在模版中将数组转化为字符串,这样写有问题吗?语法没有问题,但是在模版中使用太多的计算,维护会是个问题,换个人来看代码的时候会很痛苦,这种写法就好像在html中插入js的逻辑运算,可维护性极差。另外一个展示的就是computed的响应式依赖的问题,当我们调用getDate的时候返回的Date.now()返回的是一个非响应式的依赖因此getDate返回的值不会变。

应用场景

看了computed的特点之后,那么它的应用场景是什么呢?个人看法,但不限于以下场景:

  • 复杂的渲染数据计算,用computed计算属性可以减少一定计算开销,增加可维护性
  • 从Vuex Store中收集相关信息,对Vuex中的数据做计算的时候的要特别注意computed的缓存属性,在对Vuex中的对象值进行属性修改的时候,并不会触发computed的中值的变化,这时需要Object.assign({},obj)对依赖对象进行跟新返回一个新对象触发依赖跟新
  • 表单校验,这个应用场景应该是比较常见的,利用正则表达式对每个表单项的实时监控,判断表单是否可以提交

methods

methods大家应该都会用,是vue中的方法属性,所有的方法调用都会写到这里面,大家用的最多也是在累似@click这样事件调用中使用,但是很多人都忽视methods的另一个用法,就是在模版中使用methods,下面来看一个例子:

```<div id="app">
<div v-for="(item, idx) in arr">
{{ matching(item) }}
</div>
</div>
```


var app = new Vue({
el: '#app',
data: {
arr: ['a', 'b', 'c'],
obj: {a: 'hello', b: 'world'}
},
methods: {
matching (key) {
if (this.obj[key]) {
return this.obj[key]
} else {
return 'not found'
}
}
}
})

上面的例子就是methods在模版中常常使用的一个场景,当模版中的某个循环的值需要进行一定逻辑运算时,这时候你就可以使用methods方法,将对应的值传入,然后计算出结果返回到模版显示,这个时候用computed是没法实现的,computed中你无法传参,methods和computed除了这个不一样之外,还有就是在methods中的计算是不会做缓存的,也就是你调用多少次就会计算多少次,相对computed的开销要大一些。

watch

侦听属性是专门用来观察和响应vue实例上的数据变动,能使用watch属性的场景基本上都可以使用computed属性,而且computed属性开销小,性能高,因此能使用computed就尽量使用computed属性,那么watch属性是不是就没用武之地了呢?当执行异步操作的时候你可能就必须用watch而不是computed了,下面看一个例子:

```<div id="app">
<div>{{ obj1.a }}</div>
</div>
```


var app = new Vue({
el: '#app',
data: {
obj: {a: 'hello'},
obj1: {a: 'hello'},
test: 'aaa'
},
computed: {
getObj () {
setTimeout(() =&gt; {
this.obj.a = this.test + 'word'
return this.obj
}, 1000)
}
},
watch: {
test () {
setTimeout(() =&gt; {
this.obj1.a = this.test + 'word'
}, 1000)
}
},
mounted () {
this.test = 'hello'
}
})

上述例子中,当在模版中调用getObj.a时,如果没有setTimeout这异步操作,直接返回一个值是可以直接在模版中显示的,但是由于加异步操作就会导致没有返回值同时调用对象的属性,就会报错,而调用obj1.a却不一样,模版会先显示hello,然后在触发了watch属性时,setTimeout触发,一秒钟之后模版会显示helloword,这就watch中可以使用异步函数,而computed不行的原因

总结

希望看了这篇文章能对你区分methods、computed、watch的用法能有所帮助。
这篇文章如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞收藏

原文地址:https://segmentfault.com/a/1190000017136576

Vue中的methods、watch、computed的更多相关文章

  1. vue中的methods、computed和watch

    1.computed属性: 经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数才会发生改 ...

  2. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  3. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  4. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  5. Vue中计算属性(computed)和监听属性函数watch的比较

    1.计算属性适用的情形我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性.例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余. ...

  6. vue中的methods,conputed,watcher

    todo 1,computed(计算属性) 属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要 当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作的数据) co ...

  7. VUE中常用的十大过滤器

    在vue的学习过程中,我发现过滤器是一个很好用的工具,过滤器(Filters)来渲染数据是一种很有趣的方式.过滤器不能替代Vue中的methods.computed或者watch,不改变真正的data ...

  8. Vue基础系列(四)——Vue中的指令(上)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  9. Vue基础系列(五)——Vue中的指令(中)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

随机推荐

  1. awk 统计

    命令太多,记不住,组合起来用一把…..示例文件: 1 2 3 4 5 6 7 8 9 10 11 [root@lovedan test]# cat a.txt hello good world hel ...

  2. socket的accept: Invalid argument问题

    void local_sdk_server::wait_remote_client_connect_and_comm() { /*服务器服务启动,等待客户端的链接的到来*/ //sockaddr_in ...

  3. IP分段小记

    192.168.0.1 个人电脑:0.2-0.50 硬件开发板:0.51-0.100 机器人工控机:0.101-0.200 激光雷达:192.168.254.51~100 编码器板子:192.168. ...

  4. gradle_____最后到齐的构建工具

    从今年开始,开始换用gradle 了,个人感觉还好,配置不像maven,一堆xml 文件,一个jar 一行字符,内置的task 和很多.自定义task 也挺简单,比ant简单一些. 简单配置文件示例: ...

  5. Ubuntu -- 下如何查看CPU信息, 包括位数和多核信息

    from: http://hi.baidu.com/sdusoul/blog/item/76f349508f74fb6e843524eb.html 查看当前操作系统内核信息# uname -a Lin ...

  6. JFinal学习 & Gradle配置续 & Tomcat配置

    接上一篇对Gradle的学习,再用JFinal项目再建一个. 参考了这篇文章:https://my.oschina.net/u/1010578/blog/390094 但是其中没有代码,所以看了这篇  ...

  7. 投影纹理映射(Projective Texture Mapping) 【转】

    摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人”  投影纹理映射( Projective ...

  8. Hibernate Restrictions QBC运算符

    HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <>  Restrictions.ne() 不等于not equal >  Restrict ...

  9. 用Visual C++ 2010 载入动态链接库三部曲(使用第三方库的一般方法)

    以下以载入编译好的ACE动态链接库为例说明:这里如果你已经设置了环境变量ACE_ROOT ACE在VS2010下高速配置载入动态链接库三部曲:(这里如果你的ACE文件夹为E:\ACE_wrappers ...

  10. 微型企业如何使用odoo

    作者 jeffery Q913547235 保留所有权利     Odoo可以帮助微型企业提升运营效率,做到电子化,信息化. 管理仓库进销存,建立收货单.交货单,并基于收货.交货情况确认应收款和应付款 ...