vue 的computed 和 watch 两者的区别
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
}
}
}
})
vue 的computed 和 watch 两者的区别的更多相关文章
- Vue中computed和watch的区别
在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- vue的computed属性
vue的computed属性要注意的两个地方,1,必须有return,2,使用属性不用括号 <div> <input type="text" v-model=&q ...
- Vue的Computed的使用
Vue的Computed的使用 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue路由传值params和query的区别
vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...
- vue中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
随机推荐
- C++四大特性之封装
C++四大特性 C++作为面向对象编程语言,具备面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)的四大特性.抽象,封装,继承,多态. 所谓抽象,就是对具 ...
- robotframework_百度登陆
** Settings *** Library Selenium2Library *** Test Cases *** login Open Browser https://www.baidu.com ...
- 【题解】Luogu P5324 [BJOI2019]删数
原题传送门 易知这个数列的顺序是不用考虑的 我们看两个数列 \(1,2,3\)和\(3,3,3\)都能删完,再看两个数列\(1,2,3,4\)和\(2,2,4,4\),也都能删完 不难发现,我们珂以把 ...
- 认识KNX协议
一.简介 KNX是Konnex的缩写.1999年5月,欧洲三大总线协议EIB.BatiBus和EHSA合并成立了Konnex协会,提出了KNX协议.该协议以EIB为基础,兼顾了BatiBus和EHSA ...
- sqoop从mysql导数据到hive报错:Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
背景 使用sqoop从mysql导数据到hive,从本地服务器是可以访问mysql的(本地服务器是hadoop集群的一个datanode),但是sqoop导数据的时候依然连接不上mysql 报错如下: ...
- vue从零开始(三)指令
v-bind的使用 <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 动态特性名 (2.6.0+) - ...
- 彻底弄懂ES6中的Map和Set
Map Map对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值.构造函数Map可以接受一个数组作为参数. Map和Object的区别 一个Object 的键只能是字符串或者 Symb ...
- MySQL分组查询每组最新的一条数据(通俗易懂)
开发中经常会遇到,分组查询最新数据的问题,比如下面这张表(查询每个地址最新的一条记录): sql如下: -- ---------------------------- -- Table structu ...
- [LeetCode] 78. 子集 ☆☆☆(回溯)
描述 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3]输出:[ [3], [1], [2] ...
- Java开发环境之ElasticSearch
查看更多Java开发环境配置,请点击<Java开发环境配置大全> 拾章:ElasticSearch安装教程 1)去官网下载ElasticSearch安装包 http://www.elast ...