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-------搜索框。
computed和watch运用场景的更多相关文章
- computed和watch的使用场景
转载地址:https://blog.csdn.net/yuwenshi12/article/details/78561372 从作用机制和性质上看待methods,watch和computed的关系 ...
- Knockoutjs官网翻译系列(三) 使用Computed Observables
书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed o ...
- vue computed、methods、watch的区别
1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...
- vue生命周期学习(watch跟computed)
1.watch钩子函数监听数据的变化 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算. <div> <p>FullNam ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
- Vue学习笔记:methods、computed、watch的区别
自:https://www.jb51.net/article/120073.htm 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,m ...
- Vue计算属性computed的全面解析
前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...
- watch和computed
watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用 ...
- 关于methods、computed、watch的使用
关于methods.computed.watch的使用,前前后后我有转载过好几篇别人的文章.但始终没有自己成型的博文来记录,现自己尝试性的总结一下三者之间的区别: computed:计算属性 comp ...
随机推荐
- laravel artisan工具的使用
Artisan是laravel中自带的命令行工具的名称(一个php文件,放在laravel框架的根目录,因此命令的使用都是在根目录下的). 它提供了一些对应用开发帮助的命令,可以使用list命令列出所 ...
- bootstrap基础模板页面,详细注释
<!--html5 骨架--> <!DOCTYPE html> <!--语言是中文简体--> <html lang="zh-cn"&g ...
- Html5 学习笔记 【PC固定布局】 实战5 咨询页面 侧栏
最终效果图: 提出公共页脚和导航部分: 新建infomatino.html (旅游咨询)页面 <!DOCTYPE html> <html lang="zh-cn" ...
- T1215:迷宫
[题目描述] 一天Extense在森林里探险的时候不小心走入了一个迷宫,迷宫可以看成是由n * n的格点组成,每个格点只有2种状态,.和#,前者表示可以通行后者表示不能通行.同时当Extense处在某 ...
- 用函数递归的方法解决古印度汉诺塔hanoi问题
问题源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上.并且规 ...
- 实验报告(六)&第八周学习总结
班级 计科二班 学号 20188425 姓名 IM 完成时间2019/10/18 评分等级 实验六 Java异常 实验目的 理解异常的基本概念: 掌握异常处理方法及熟悉常见异常的捕获方法. 实验要求 ...
- 洛谷 P1972 [SDOI2009]HH的项链——树状数组
先上一波题目 https://www.luogu.org/problem/P1972 这道题是询问区间内不同数的个数 明显不是正常的数据结构能够维护的 首先考虑 因为对于若干个询问的区间[l,r],如 ...
- CentOS7下Docker与.net Core 2.2
一.使用 yum 安装(CentOS 7下) Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . 通过 una ...
- 61.Merge k Sorted Lists(合并k个排序链表)
Level: Hard 题目描述: Merge k sorted linked lists and return it as one sorted list. Analyze and descri ...
- java 调用DB2 SYSPROC.ADMIN_CMD存储过程导出数据
import java.sql.CallableStatement; import java.sql.Connection; import java.sql.DriverManager; import ...