没有合适的资源?快使用搜索试试~ 我知道了~
Vue中的methods、watch、computed的区别
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
1 下载量 64 浏览量
2020-12-09
11:05:21
上传
评论
收藏 73KB PDF 举报
温馨提示
试读
3页
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods、watch、computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景,也很难用好它们,希望接下来的介绍为你答疑解惑。 computed 我们先来看计算属性:computed,光看名字也知道是用来干什么的,计算属性当然是用来计算的,但是是怎么计算的呢?计算属性有两个显著的特点: 计算属性计算时所依赖的属性一定是响应式依赖,否则计算属性不会执行 计算属性是基于依赖进行缓存的,就是说在依赖没有更新的情况,调用计算属性并不会重新计算,可以减少开销 我们来看一个相关
资源推荐
资源详情
资源评论
Vue中的中的methods、、watch、、computed的区别的区别
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用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(() => {
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>
资源评论
weixin_38746918
- 粉丝: 7
- 资源: 901
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功