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

computed:

例如:

computed:{
  fullName: function () { return aa }
}
在用的时候,用this.fullName去取用,就和取data一样(不要当成函数调用!!)

watch:类似于监听机制+事件机制:

例如:

watch: {
  firstName: function (val) { this.fullName = val }
}

firstName这个变量的改变是这个特殊“事件”被触发的条件,而firstName对应的函数就相当于监听到事件发生后执行的方法

watch和computed的对比

1.watch擅长处理的场景:一个数据影响多个数据

2.computed擅长处理的场景:一个数据受多个数据影响

watch和computed的更多相关文章

  1. mobx @computed的解读

    写在前面:我一开始看不懂官网的@computed的作用,因为即使我把@computed去掉,依然能正确的report,然后我百度谷歌都找不到答案,下面都是我自己的理解,如果是有问题的,不对的,请务必留 ...

  2. vue中,class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...

  3. redmine computed custom field formula tips

    项目中要用到Computed custom field插件,公式不知道怎么写,查了些资料,记录在这里. 1.http://apidock.com/ruby/Time/strftime 查看ruby的字 ...

  4. Computed read-only property vs function in Swift

    In the Introduction to Swift WWDC session, a read-only property description is demonstrated: class V ...

  5. 用computed返回this.$store.state.count,store更改了,但是computed没有调用

    今天出现了这个问题,store更新了,你computed为啥不调用呢??? 另一个.vue更新了state,这个的computed就监听不到了么? 是用这种格式更新的this.$store.commi ...

  6. KnockoutJS 3.X API 第三章 计算监控属性(4)Pure computed observables

    Pure computed observables Pure computed observables是KO在3.2.0版本中推出的.她相对于之前的ComputedObservables有很多改进: ...

  7. knockout源码分析之computed(依赖属性)

    一.序列图 二.主要代码文件 1.dependentObservable.js:主要包含ko.computed相关方法的处理2.dependencyDetection.js:主要包含依赖的监控上下文对 ...

  8. Knockout 新版应用开发教程之Computed Observables

    Computed Observables 如果你有监控属性firstName和lastName的话,此时如果你想要显示全名? 这个时候computed(以前叫做依赖)监控属性就出马了,这是一个函数用来 ...

  9. Knockout 新版应用开发教程之Observable与computed

    KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...

  10. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

随机推荐

  1. python对象的引用

    1 利用 * 星号生成二维及二维以上的list时,特别要注意有的量引用是相同的.如果后面要给list赋值,最好不要这样生成list. 可以先这样生成,再打印输出后,粘贴到程序中重新赋值. a = [[ ...

  2. 打开Excel提示内存不足

    来越南出差第一天,有个越南妹子跟我反应说Excel打不开,提示的是很常见的“内存不足”的错误, 这种问题一般的判断就是打开的程序太多了,关掉一些就可以了,重启都没解决, 在网上找了下,腾讯管家的这篇h ...

  3. Android下Native的so编译:使用cmakelists.txt

    android studio的CMakeLists.txt写好后,在Studio中编译没问题,在命令编译时则需要配置很多参数才能成功 示例CMakeLists.txt文件: cmake_minimum ...

  4. 第三方app抽奖发送微信红包实现

    1.控制器方法: private string SendRedPackge(string OpenId, int Amount, string LuckyCode) { Models.PayWeiXi ...

  5. Hand on Machine Learning第三章课后作业(2):其余小练习

    -#!/usr/bin/env python -# # # -- coding: utf-8 -- -# # # @Time : 2019.5.22 14:09 -# # # @Author : An ...

  6. BZOJ 3810 [Coci2015]Stanovi

    这讲真就是一篇显得自己认真做题的博客 因为真的比较习惯将培训所有的题都放到一篇博客中,又因为暑假好多培训,所以单题很少,这也是从博客中摘出来的 题目链接 如果合法,一定有一条贯穿整个矩形的线: dp[ ...

  7. C++ cin相关函数总结

    输入原理: 程序的输入都建有一个缓冲区,即输入缓冲区.一次输入过程是这样的,当一次键盘输入结束时会将输入的数据存入输入缓冲区,而cin函数直接从输入缓冲区中取数据.正因为cin函数是直接从缓冲区取数据 ...

  8. RabbitMq学习1-介绍、安装和配置

    一.简介 1.MQ框架非常之多,比较流行的有RabbitMq.ActiveMq.ZeroMq.kafka,以及阿里开源的RocketMQ       2.AMQP是消息队列的一个协议. 3.Rabbi ...

  9. Solr安装(单机版)

    本文记录的是solr在win下安装配置使用的过程,最后将solr部署到Linux上通过远程访问.下一篇文章会介绍   solr集群搭建(SolrCloud)    的安装! Solr是基于Lucene ...

  10. Lock和synchronized的区别和使用(转发)

    今天看了并发实践这本书的ReentantLock这章,感觉对ReentantLock还是不够熟悉,有许多疑问,所有在网上找了很多文章看了一下,总体说的不够详细,重点和焦点问题没有谈到,但这篇文章相当不 ...