vue 的computed 和 watch 两者的区别
2024-10-10 17:21:16
computed是计算属性,依赖其他属性计算,并且computed的值有缓存,只有当计算值发生变化才会返回内容。
- computed 用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理。举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
- 比如:
比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。
watch监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。
- watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象,但是我们不能类似这样监控,比如:
watch:{
goodsList.price(newVal,oldVal){
//监控商品列表中是商品价格
}
}
这样会报错,只能监控整个对象或单个变量。如:
data(){
return {
example0:"",
example1:"",
example2:{
inner0:1,
innner1:2
}
}
},
watch:{
example0(newVal,oldVal){//监控单个变量
……
},
example2(newVal,oldVal){//监控对象
……
},
}
- watch一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据
一般来说:
需要依赖别的属性来动态获得值的时候使用computed;
监听到值的变化需要进行一些业务逻辑的时候使用wtch;
另外 computed
和 watch
还都支持对象的写法
vm.$watch('obj', {
// 深度遍历
deep: true,
// 立即触发
immediate: true,
// 执行的函数
handler: function(val, oldVal) {}
})
var vm = new Vue({
data: { a: 1 },
computed: {
aPlus: {
// this.aPlus 时触发
get: function () {
return this.a + 1
},
// this.aPlus = 1 时触发
set: function (v) {
this.a = v - 1
}
}
}
})
最新文章
- liunx几台机器直接用ssh链接
- 如何使用批处理解决批量telnet命令的输入
- PHP学习系列(1)——字符串处理函数(5)
- R与数据分析旧笔记(六)多元线性分析 下
- Oracle中SQL语句学习五(统计分组语句group by和having)
- MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系
- cocos2d 简单的日常高仿酷跑游戏
- nginx keepalived 主从切换
- (转)CentoS 下报的 Requires: perl(:MODULE_COMPAT_5.8.8)
- 从Android源码的角度分析Binder机制
- sql server 错误号大全
- drawpoly()函数的用法
- Laravel的unique和exists验证规则的优化
- python学习:字典
- Json常用序列化工具包大比拼
- 使用ROME解析rss,如何获取icon图标
- iOS mac终端下的SQL语句
- 推荐一款好用并且免费的markdown软件 Typora
- Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine
- Pascal的3种注释
热门文章
- .whl文件安装cuda10.0版本的pytorch1.3.0+torchvision0.4.1
- LRU缓存实现
- Spring学习指南-第二章-Spring框架基础(完)
- FastJson前置属性过滤器
- NIO开发Http服务器(5-完结):HttpServer服务器类
- python爬虫-有道翻译-js加密破解
- Java调用Http/Https接口(5)--HttpAsyncClient调用Http/Https接口
- Matlab适配器模式
- jquery实现倒计时
- Openlayers学习开始前序