vue computed 与 watch 区别
来源:互联网 发布:程序员大牛 编辑:程序博客网 时间:2024/05/24 16:13
1、watch
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()
,遍历 watch 对象的每一个属性
html:
<div> <input type="text" v-model="firstAge" /> <input type="text" v-model="lastAge" /> <input type="text" v-model="sumAge" /> </div>
js:
return{ firstAge:'10', lastAge:'20', sumAge:'10 20'}
watch:{ firstAge: function(val){ this.sumAge = val + this.lastAge; }, lastAge: function(val){ this.sumAge = this.firstAge + val; } }
2、computed
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。
js:
computed:{ sumAge:function(){ return this.firstAge + ' ' + this.lastAge; } }
总结:
计算属性是计算属性(computed),观察是观察( watch )。
计算属性顾名思义就是通过其他变量计算得来的另一个属性,fullName在它所依赖firstName,lastName这两个变量变化时重新计算自己的值。
另外,计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变,多次访问 fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。
而观察watch是观察一个特定的值,当该值变化时执行特定的函数。例如分页组件中,我们可以检测页码执行获取数据的函数。
详细查看文档,多研究文档资料 https://cn.vuejs.org/
阅读全文
0 0
- vue computed 与 watch 区别
- VUE之watch与computed
- vue中computed和watch区别
- vue中watch和computed属性作用及区别
- Vue.js的computed和watch用法及区别
- vue.js2.0关于computed、methods、watch、created的区别
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js之计算属性computed与$watch
- Vue method与computed的区别
- Vue method与computed的区别
- Vue filter computed watch 的用法
- vue中computed 和 watch的异同
- vue.js中的computed和methods和watch之间的区别
- vue学习04--[转发]Vuejs中computed、methods、watch的区别
- vue学习05--Vuejs中computed、methods、watch的区别[2]
- vue开发:vue中computed 和 watch的异同
- vue 计算属性computed和观察watch 和方法methods
- Effective C++ 18. Make interfaces easy to use correctly and hard to use incorrectly
- 自己搭建Git服务器实现SSH以及远程仓库迁移
- SQL中先分组再组内排序再输出的ROW_NUMBER() OVER(partition by..order by..)
- 针对一些自定义的,中央仓库没有的jar包,需要从将jar放到lib中
- 1.Python---01
- vue computed 与 watch 区别
- JSP中的<%= %>和${ }到底有什么区别?
- CSS Mastery摘要(5)--Content Layout
- 多态,抽象类,接口
- [python3]爬虫实战二之爬取百度贴吧帖子
- xUtils-2.6.14在android5.0以下系统https问题
- Python画地图数据可视化分析
- ofbiz总结——常用XML结构定义文档链接
- 实用shell脚本 安装集群使用