VUE中computed和watch的使用
2019-01-05 11:29
148 查看
VUE中computed和watch的使用
VUE中computed和watch的使用
1.computed
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
computed根据被依赖对象的变化er变化
computed: { fullName:function(){ debugger return this.firstName + ' ' + this.lastName; } },
当firstName或者lastName变化的时候,会触发fullName的变化
2.watch
watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象,但是我们不能类似这样监控
watch:{
age(newValue, oldValue){
debugger
console.log(‘当前年龄:’ + newValue)
}
}
当age的值发生变化的时候会触发watch
另外watch涉及到立即执行immediate:true,对象深度监听deep属性
相关文章推荐
- Vue.js中computed、methods、watch的使用
- sau交流学习社区—vue总结:使用vue的computed属性实现监控变量变化,使用vue的watch属性监控变量变化从而实现其他业务
- Vue的watch和computed方法的使用及区别介绍
- Vue.js之computed和watch的使用与区别
- Vue中watch和computed的使用演示
- vue计算属性computed、事件、监听器watch的使用讲解
- vue中computed和watch区别
- vue1.0中的watch的简单使用
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- vue教程2-03 vue计算属性的使用 computed
- Vue中computed和watch比较
- vue 之watch的使用
- vue生命周期、computed属性和 method方法、watch 属性区别
- vue中computed & methods & watch 的区别
- Vue中的methods、watch、computed
- 解析Vue中computed、watch、methods的区别
- vue使用watch 观察路由变化,重新获取内容
- vue.js使用watch监听路由变化的方法
- 在微信小程序里使用watch和computed的方法
- vue.js重学之旅(2)——vue.js里的数据操作(data,methods,computed,watch)