vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性,
<div>全名:{{fullName}}</div>
创建计算属性通过computed关键字,它是一个对象
计算属性是基于他们的依赖进行缓存的,computed是对data中的一些数据进行操作,避免在标签中进行操作,
computed:{
fullName(){
return this.firstName+lastName
}
} 此时的fullName为一个自定义的名称,代表了一个计算的封装函数,此时代表了两个字符串的拼接和,
而不是直接在页面上进行计算,计算属性就起到了这个作用。
watch 监听属性
watch属性和computed属性类似,是为了监听data中的数据的变化,只要监听的数据一发生变化,它就能执行相应的函数, watch属性的名字必须为data中对应数据的名字 data中有firstName="" lastName="" watchFullName=""
参数newVal 和oldVal分别是新值和旧值
watch:{
firstName(newVal,oldVal){
this.watchFullName=newVal+this.lastName
}
lasttName(newVal,oldVal){
this.watchFullName=this.firstName+oldVal
}
} 下面这一段是对路由参数的监听,这是一个组件,watch可以实时的获取到参数的值。
var shop=Vue.component('shop',{
template:`
<div>要显示的商品编号{{$route.params.id}}</div>
`,
// mounted(){
// console.log(this.$route.params)
// },
// 通过监听来实现动态获取路由参数
watch:{
$route(to,from){
console.log(to.params)
console.log(from.params)
}
}
})
computed 和watch对比来看的话虽然都能实现相同的功能,但是在一些相类似的应用场景中,一般都用computed 因为computed(计算属性)有一个缓存机制,如果后来的代码依赖于计算属性所得出的值,那么后来的计算值将会取自第一次计算所得值的缓存,这样就避免了一个值多次进行计算,影响代码的执行效率,
watch 的应用场景为一些异步的操作。
深度监听
深度监听是为了监听对象中的数据变化
data:{
user{
name:"zhangsan"
}
} user:{
handler(newVal,oldVal){
console.log(newVal.name)
//这样就可以打印一个新的user对象中的name值
},
deep:true
}
vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听的更多相关文章
- vue中为computed计算属性传参遇到的问题,已解决
首先介绍下项目背景, 需要将 dataList 中的 item.stars 属性传入 computed 返回要展示的值 部分代码如下(请不要纠结为什么这么做,数据格式确认如此): <li cla ...
- Vue中的computed属性
阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...
- 八、Vue中的computed属性
看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...
- 十三、Vue中的computed属性
以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...
- vue中methods,computed,filters,watch的总结
08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- Vue中的computed和watch
看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...
- 详解Vue中的computed和watch
作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...
- Vue 中的 computed 和 methods
Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.
- vue中的computed 与 watch
计算属性 computed 指通过计算得来的属性,用于监听属性的变化 computed里面的函数调用的时候 不需要加() 方法里必须有一个返回值 return computed中的函数不会通过事件去触 ...
随机推荐
- python 面试题
1.os.path与sys.path的区别是什么? os.path 主要用于系统文件路径的操作 sys.path 主要是python解释器的系统环境参数的操作 2.re模块中match和search方 ...
- VS OpenCV imread imwrite nameWindow等相关报错问题
排查过程 1. 项目属性C++目录中,包含库include 和 lib 目录了吗? 去自己的opencv安装目录中找到include 和 lib(一般在x64下有两个vc14/vc15, 我的是4.0 ...
- 团队项目(六)- Alpha阶段项目复审(江山代有才人秃)
排名仅代表个人观点: 小组名字 优点 缺点&Bug报告 排名 中午吃啥队 从测试链接来看,作为一个订餐的APP,有着跟现在的订餐APP相似的功能,很完整,是一个踏踏实实做出来的项目 向购物车中 ...
- Spark MLlib FPGrowth关联规则算法
一.简介 FPGrowth算法是关联分析算法,它采取如下分治策略:将提供频繁项集的数据库压缩到一棵频繁模式树(FP-tree),但仍保留项集关联信息.在算法中使用了一种称为频繁模式树(Frequent ...
- Spring Boot使用Maven打包替换资源文件占位符
在Spring Boot开发中,通过Maven构建项目依赖是一件比较舒心的事,可以为我们省去处理冲突等大部分问题,将更多的精力用于业务功能上.近期在项目中,由于项目集成了其他外部系统资源文件,需要根据 ...
- Delphi中使用ISuperObject解析Json数据
Java.Php等语言中都有成熟的框架来解析Json数据,可以让我们使用很少的代码就把格式化好的json数据转换成程序可识别的对象或者属性,同时delphi中也有这样的组件来实现此功能,即Isuper ...
- SimpleDateFormat日期格式化总结
1.new一个java.util.Date对象,调用它的setYear.setMonth等等方法,设置你要的年月日.不过这种做法不推荐,因为setYear等方法已经过时了.2.new一个java.ut ...
- C语言实现将日期、时间保存到文本文件中
今天突然兴起,看来一下C语言的文件操作,以前在学习的时候,总是一带而过,觉得没有什么用处:但是现在看来,还真的没有什么用处,最后,我现在还有用到,当然这只是我的个人认为,并不能说明什么,在此我将自己写 ...
- RocketMQ从3.5.8升级到4.3.2版本实战记录
背景 我们在很早之前大约在2015年8月份左右我们开始使用Rocketmq作为公司消息中间件,那个时候RocketMQ还没有捐赠给Acaphe. RocketMQ版本还是3.2.6,中间升级了一次版本 ...
- SpringBoot中使用JNnit4(一)之Mockito的使用
经过入门篇,可以编写出一个简单的测试用例. 这篇讲的是BDDMockito的使用. BDDMockito用于测试时进行打桩处理:通过它可以指定某个类的某个方法在什么情况下返回什么样的值. 在单元测试时 ...