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运用场景的更多相关文章

  1. computed和watch的使用场景

    转载地址:https://blog.csdn.net/yuwenshi12/article/details/78561372 从作用机制和性质上看待methods,watch和computed的关系 ...

  2. Knockoutjs官网翻译系列(三) 使用Computed Observables

    书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed o ...

  3. vue computed、methods、watch的区别

    1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...

  4. vue生命周期学习(watch跟computed)

    1.watch钩子函数监听数据的变化 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算. <div> <p>FullNam ...

  5. Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

    1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...

  6. Vue学习笔记:methods、computed、watch的区别

    自:https://www.jb51.net/article/120073.htm 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,m ...

  7. Vue计算属性computed的全面解析

    前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...

  8. watch和computed

    watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用 ...

  9. 关于methods、computed、watch的使用

    关于methods.computed.watch的使用,前前后后我有转载过好几篇别人的文章.但始终没有自己成型的博文来记录,现自己尝试性的总结一下三者之间的区别: computed:计算属性 comp ...

随机推荐

  1. 搜索的应用--计算最优解:Aizu - ALDS1_4_D Allocation

    搜索的应用-计算最优解 题目: You are given nn packages of wiwi kg from a belt conveyor in order (i=0,1,...n−1i=0, ...

  2. CSS深入理解float

    初衷:图片环绕效果 1.会使父元素高度塌陷 2.包裹性 3.让元素block化 4.去空格化   5.清除浮动 .clearfix::after{ content:""; disp ...

  3. 同一台机器上有多个Python版本?

    有关Python网站上的官方文档,如何在Linux上的同一台机器上安装和运行多个版本的Python? 我可以找到大量的博客帖子和答案,但我想知道是否有“标准”官方方式这样做? 或者这完全取决于操作系统 ...

  4. C/C++语言for循环语句执行顺序

    for循环如下: ; i<; ++i) { } 执行顺序如下: 1.i=0  初始化初值 2.i<10 进行判断,如果条件为真,则继续执行 3.执行循环体代码 4.i++ 变量i自增 5. ...

  5. SpringMVC学习(10):异常处理

    在项目中如何处理出现的异常,在每个可能出现异常的地方都写代码捕捉异常?这显然是不合理的,当项目越来越大是也是不可维护的.那么如何保证我们处理异常的代码精简且便于维护呢?这就是本篇要讲的内容->异 ...

  6. form 表单的name

    form 中 的name 很重要, 1. 可以用来查找对应的input 2.form 提交之后 会用来作为参数列表的名字 3.enovia plm 中,name 会和 table 的field 进行对 ...

  7. 案例:使用xml存储数据

    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. Flask-Login的实现

    Flask-Login Flask-Login 为 Flask 提供用户 session 的管理机制.它可以处理 Login.Logout 和 session 等服务. 作用: 将用户的 id 储存在 ...

  9. java应用之solr入门篇

    前言 solr是apache项目的一款全文搜索应用. 官方文档http://lucene.apache.org/solr/guide/6_6/ 入门流程 1.安装   --->  2.启动  - ...

  10. 【转】Java里如何实现线程间通信

    正常情况下,每个子线程完成各自的任务就可以结束了.不过有的时候,我们希望多个线程协同工作来完成某个任务,这时就涉及到了线程间通信了. 本文涉及到的知识点:thread.join(), object.w ...