您现在的位置是:首页 > Javascript
当前栏目
Vue 里的 computed 和 watch 的区别 ?
2023-02-25 18:20:44 时间
一. 相同点:
computed和watch都是观察页面的数据变化的。
二. 不同点:
计算属性computed(一对多,一对一)
计算属性将会混入到Vue的实例当中,所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
1、监控自定义的变量,这个变量不可以和data、props里面的变量重复; 2、computed属性的属性值是函数默认走get方法(必须有返回值),属性都有一个get和set方法; 3、支持缓存,只有所依赖的数据发生变化才会重新计算,否则会取缓存中的数据; 4、不支持异步,在computed里面操作异步无效;
<templete>
<div>{{message}}</div>
</templete>
<script>
data(){
return {
name:'muma',
type:'man'
}
},
computed:{
//仅读取getter
message:function(){
return `${this.muma}是${this.man}孩子!!!`
},
// 读取getter和设置setter
msg:{
get: function () {
return `${this.muma}是${this.man}`
},
//在给msg重新赋值的时候会调用setter,例如this.msg = '你是谁'。
set: function (newValue) {//newValue是msg新的值
let names = newValue.split('是');
this.muma = names[0];
this.man = names[1];
}
}
}
</script>
监听属性watch(多对一)
1、监听data、props里面数据的变化; 2、不支持缓存,每次都会重新计算; 3、支持异步,监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
<templete>
<div>{{message}}</div>
</templete>
<script>
data(){
return {
name:'muma',
type:'boy',
func:'1',
obj:{
label:'aa'
}
}
},
watch:{
//name变了修改type
name:function(new, old){
this.type = 'girl';
},
'func':'funcChange',
'obj.label':{
handler(new, old){
this.type = 'boy';
},
immediate:true, //控制是否在第一次渲染是执行这个函数
deep:true //控制是否要看这个对象里面的属性变化
}
},
methods:{
funcChange(){
console.log('......')
}
}
</script>
三. 总结
computed 1、computed是计算属性,也就是依赖某个值或者props通过计算得来得数据; 2、 computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化,会重新调用getter来计算; 3、 不支持异步,当computed内有异步操作时无效,无法监听数据的变化;
watch 1、watch是监听器,可以监听某一个数据,然后执行相应的操作; 2、不支持缓存,数据变直接会触发相应的操作; 3、监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值; 4、支持异步操作;
三. 实际运用场景
- 如果一个数据需要经过复杂计算就用 computed
- 如果一个数据需要被监听并且对数据做一些操作就用 watch
- 当多个属性影响一个属性的时候,建议用computed,比如: fullName(){ return this.firstName + this.secondName } fullName是由firstName和secondName影响的,这种情况就适合computed;
- 当一个值发生变化之后,会引起一系列的操作,这种情况就适合用watch;
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项