Vue中的 computed 和 watch的区别
computed
computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算
1)下面是一个比较经典简单的案例
<template><div class="hello">{{fullName}}</div>
</template><script>
export default {data() {return {firstName: '飞',lastName: "旋"}},props: {msg: String},computed: {fullName() {return this.firstName + ' ' + this.lastName}}
}
</script>复制代码
注意
在Vue的 template模板内({{}})是可以写一些简单的js表达式的很便利,如上直接计算 {{this.firstName + ' ' + this.lastName}},因为在模版中放入太多声明式的逻辑会让模板本身过重,尤其当在页面中使用大量复杂的逻辑表达式处理数据时,会对页面的可维护性造成很大的影响,而 computed 的设计初衷也正是用于解决此类问题。
应用场景
适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据,那么把这个数据设计为computed
watch
watcher 更像是一个 data 的数据监听回调,当依赖的 data 的数据变化,执行回调,在方法中会传入 newVal 和 oldVal。可以提供输入值无效,提供中间值 特场景。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情,使用watch。
<template><div class="hello">{{fullName}}<button @click="setNameFun">click</button></div>
</template><script>
export default {data() {return {firstName: '飞',lastName: "旋"}},props: {msg: String},methods: {setNameFun() {this.firstName = "大";this.lastName = "熊"}},computed: {fullName() {return this.firstName + ' ' + this.lastName}},watch: {firstName(newval,oldval) {console.log(newval)console.log(oldval)}}
}
</script>复制代码
总结:
1.如果一个数据依赖于其他数据,那么把这个数据设计为computed的
2.如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化
作者:李赫feixuan
链接:https://juejin.im/post/5c9990d6f265da60ea146d21
Vue中的 computed 和 watch的区别相关推荐
- 面试题: Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
- Vue中的computed属性
1.前言 本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...
- Vue中的computed是什么?怎么用?
提示:前端查漏补缺,仅代表个人观点,不接受任何批评 文章目录 一.computed是什么? 二.使用注意事项 1.计算属性的结果会被缓存 2.computed和method的区别 总结 1. 使用场景 ...
- Vue中的computed 和 watch
computed 和 watch Vue2 options文档 响应式原理options.data 1.data会被Vue监听 2.会被Vue实例代理,vm就是data的代理 3.每次对data的读写 ...
- 面试官:Vue中组件和插件有什么区别?
一.组件是什么 回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度 ...
- Vue中的computed计算属性
文章目录 computed与watch的异同 不同点 相同点 示例 源码 结果 分析 computed与watch的异同 不同点 触发条件不同 computed计算属性会依赖于使用它的data属性 ...
- vue中的computed 与 watch
计算属性 computed 指通过计算得来的属性,用于监听属性的变化 computed里面的函数调用的时候 不需要加() 方法里必须有一个返回值 return computed中的函数不会通过事件去触 ...
- Vue 中 export及export default的区别
相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...
- Vue中,views和components的区别
在Vue.js中,views和components都是Vue文件,但是它们有不同的作用和使用方式. Views Views是指应用程序中的页面,在Vue.js中通常使用Vue Router实现路由功能 ...
最新文章
- filter[过滤器]使用大全
- 皮一皮:编!继续编啊你...
- android简化log输出方法
- 缓存 Memached
- Coprime Sequence 思维 gcd 删一个数
- SIP协议学习2-pjsip
- 设计企业网站大纲_深圳企业网站设计公司|品牌网站设计【尼高网站设计】
- SGD(随机梯度下降)详解
- 思维模型 吸引力法则/定律
- 微软邮箱smtp服务器,微软hotmail免费邮箱申请(5G邮箱容量) 支持pop3、smtp
- 学计算机基础知识的app,电脑基础知识零基础入门版-电脑基础知识APP手机大全v1.0 安卓版-007游戏网...
- WEB基础之: form标签
- html设置图片切割,HTML+CSS实现合并图片的切割显示以及背景渲染
- 什么是formData
- 阡陌路 - 自动档车的开法(转)
- DNS测试bat脚本分析
- c语言学习之转义字符
- 互联网进入存量博弈时代,小程序技术创造移动应用新机遇
- 互联网大佬们的代码水平如何?网友:刘强东95年一个晚上赚5万
- RAD Studio/Delphi 2010 3615下载+破解
热门文章
- [分享]Host文件的原理解释及应用说明
- CodeForces - 1344D Monopole Magnets(dfs)
- 牛客 - 「土」巨石滚滚(贪心)
- POJ - 2195 Going Home(二分图最小权匹配+KM+思维建边/最小费用最大流)
- oracle ora-01001,ORA-01001 and ORACLE游标
- 透过汇编另眼看世界之函数调用
- Cocos2d-x v2.2.2版本+Win7+VS2010环境搭建
- C++静态成员和静态成员函数
- RTC 技术知识体系
- MySQL 索引 :哈希索引、B+树索引、最左前缀匹配规则、全文索引