vue中computed和watch的区别,以及适用场景
computed:通过属性计算而得来的属性
1、computed内部的函数在调用时不加()。
2、computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当前函数才会执行,data中的属性没有改变的时候,当前函数不会执行。
3、computed中的函数必须用return返回。
4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了,就是data中的属性发生改变,从而触发computed中的函数,形成死循环了。
5、当computed中的函数所依赖的属性没有发生改变,那么调用当前函数的时候会从缓存中读取。
使用场景:当一个值受多个属性影响的时候------------购物车商品结算
watch:属性监听
1、watch中的函数名称必须要和data中的属性名一致,因为watch是依赖data中的属性,当data中的属性发生改变的时候,watch中的函数就会执行。
2、watch中的函数有两个参数,前者是newVal,后者是oldVal。
3、watch中的函数是不需要调用的。
4、watch只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变。也就是说,watch想要监听引用类型数据的变化,需要进行深度监听。"obj.name"(){}------如果obj的属性太多,这种方法的效率很低,obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
5、特殊情况下,watch无法监听到数组的变化,特殊情况就是说更改数组中的数据时,数组已经更改,但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100,this.$set(this.arr,0,100)-----修改arr第0项值为100。
6、immediate:true 页面首次加载的时候做一次监听。
使用场景:当一条数据的更改影响到多条数据的时候---------搜索框
区别:
1、功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。
2、是否调用缓存:computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行回调。
3、是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。
4、使用场景:computed----当一个属性受多个属性影响的时候,使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候,使用watch-------搜索框。
vue中computed和watch的区别,以及适用场景的更多相关文章
- Vue中computed和watch的区别
在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...
- vue中computed/method/watch的区别
摘要:本文通过官方文档结合源码来分析computed/method/watch的区别. Tips:本文分析的源码版本是v2.6.11,文章中牵涉到vue响应式系统原理部分,如果不是很了解,建议先阅读上 ...
- Vue中computed与method的区别
转载于:https://segmentfault.com/a/1190000014478664?utm_source=tag-newest 1.computed区别于method的两个核心 在官方文档 ...
- Vue中 computed 和 methods的区别
涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...
- vue中v-if与v-show的区别以及使用场景
区别 1.手段:v-if是通过控制dom节点的存在与否来控制元素的显隐:v-show是通过设置DOM元素的display样式,block为显示,none为隐藏: 2.编译过程:v-if切换有一个局部编 ...
- vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
- vue中assets和static的区别
Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要 ...
- Vue中computed分析
Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
- vue中computed的作用以及用法
在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...
随机推荐
- group by 对多个字段进行分组
转载自:https://blog.csdn.net/xx_star1204/article/details/72884983 在平时的开发任务中我们经常会用到MYSQL的GROUP BY分组, 用来获 ...
- 【leetcode-22】括号生成
给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "(()())& ...
- Java多线程分批发送消息的小例子
需求: 假设有10万个用户,现在节假日做活动,需要给每个用户发送一条活动短信,为了提高程序的效率,建议使用多线程分批发送. 这里值得注意的是: 每开一个线程都会占用CPU的资源,所以线程根据所需要的条 ...
- Logstash配置文件修改自动加载和指定目录进行启动
检查配置并启动Logstash,修改后自动加载 指定配置文件目录并启动Logstash
- Win10应用商城删除后部分应用出错的解决方案
出错图示 解决方案 查找完整包名:Get-AppxPackage -allusers | Select Name, PackageFullName Add-appxpackage -register ...
- java基本数据类型的变量
一.整型变量 短整型(short).整型(int)和长整型(long),它们都可以定义整型变量,但是由于分配的内存空间不同,所能表示的数据的长度也不同. 我们可以定义并初始化一个整型变量: int a ...
- C#利用控件mscomm32.ocx读取串口datalogic扫描枪数据
1).开发环境VS12,语言C# 2).扫描枪品牌:datalogic 4470 3).通讯协议:串口 1.首先,第一步创建一个新工程,windows窗体应用程序,命名为TestScanner,如下: ...
- 使用HttpWebRequest POST上传文件
2019/10/27, .Net c#代码片段 摘要:使用HttpWebRequest向Api接口发送文件,multipart-form数据格式,POST方式 参考地址 /// <summary ...
- Configuration property name 'xxx' is not valid
目录 问题 解决 问题 程序出错:Configuration property name ‘xxx’ is not valid, Canonical names should be kebab-cas ...
- Django:RestFramework之-------权限
4.restframework-权限 4.1权限: 权限在单个视图应用. class MyPermission(object): """认证类""&q ...