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. Java多线程学习——图片下载

    实现多线程方式1:继承类Thread——重写方法run——调用方法start 从网络下载图片首先要增加包commons-io.jar import org.apache.commons.io.File ...

  2. mysql驱动表与被驱动表及join优化

    驱动表与被驱动表 先了解在join连接时哪个表是驱动表,哪个表是被驱动表:1.当使用left join时,左表是驱动表,右表是被驱动表2.当使用right join时,右表时驱动表,左表是驱动表3.当 ...

  3. linux 正则表达式 使用grep命令

    最常应用正则表达式命令是 awk sed grep [root@MongoDB ~]# cat mike.log I am mike! I like linux. I like play footba ...

  4. vue使用笔记一

    1.vue-cli安装 sudo npm install -g @vue/cli 2.查看是否安装成功 vue --version 3.创建项目 vue create hello-world 4.启动 ...

  5. 2019 我的世界多了一个 Python

    大一时学过 C语言,大三时用 C 控制单片机,之后就没有别的和编程的交集了. 大约十天前下定决心学 Python,不开玩笑,版本我选 3. 其实我也不是 100% 的零基础,因为一方面,我学过 C:另 ...

  6. FTP-学习笔记(1)

    1.简单的SFTP.FTP文件上传下载 SftpTools.java package com.lfy.mian; import com.jcraft.jsch.*; import java.io.Fi ...

  7. 【模板】最长上升子序列(LIS)及其优化 & 洛谷 AT2827 LIS

    最长上升子序列 传送门 题意 对于给定的一个n个数的序列,找到它的一个最长的子序列,并且保证这个子序列是由低到高排序的. 例如,1 6 2 5 4 6 8的最长上升子序列为1 2 4 6 8. 基本思 ...

  8. 18: vue-element-admin使用

    1.1 vue-element-admin使用 1.使用参考网站 1)官方演示环境: https://panjiachen.github.io/vue-element-admin/#/dashboar ...

  9. HNUST-1681 机器人走格子(找规律)

    1681: 机器人走格子 时间限制: 1 Sec  内存限制: 128 MB提交: 244  解决: 58[提交][状态][讨论版] 题目描述 一个长X宽Y的棋盘,有XY个格子.将机器人放在某个格子中 ...

  10. easyui 前端分页及前端查询

    1.静态分页核心方法 // 前端分页 -- 将datagrid的loadFilter属性设置为这个方法名即可 function partPurchasePagerFilter(data) { if ( ...