作者:纵横
链接:https://www.zhihu.com/question/55846720/answer/331760496
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

设计模式不同

Computed 是一种声明式的解决方案,我们只需要告诉 vue 某个属性的构成方法,就可以一劳永逸的放手不管了。

computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}

Watch 是一种命令式的解决方案,我们需要自己处理 vue 某个属性依赖要素的变化,根据变化重置这个属性。

watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}

响应行为不同

Computed 的响应是 deep 的响应,即在计算过程中用到的对象的属性发生变化,是可以被监听到的。

computed: {
fullName: function () {
// this.name 的属性 firstName/lastName 变化时 fullName 会响应。
return this.name.firstName + ' ' + this.name.lastName
}
}

然而,一旦 Computed 没有在模板中使用,vue 是不会为我们计算 Computed 内容的。

Watch 的响应默认为非 deep 的响应,即观测的是某个对象的字面量。当然,我们可以为 Watch 设置 deep 响应类型或是监听其属性

watch: {
name: function () {
// this.name 的属性 firstName/lastName 变化时不会触发。
// TODO
}
}

总之

两者的使用应当是互补的:

在获得较为简单的属性,且用于展示时,用 computed 可以简化书写。

在进行比较复杂的异步操作,或有比较明显的副作用时,用 watch 逻辑更清晰。

另外,需要注意的是,watch 的计算早于同依赖的 computed。

watch 和 计算属性的更多相关文章

  1. Vue - 在v-repeat中使用计算属性

    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...

  2. Vue之计算属性

    上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...

  3. 关于vue.js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  4. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  5. 第三节:Vue计算属性

    计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...

  6. Vue#计算属性

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

  7. Vue.js基本规则提炼总结及计算属性学习

    Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...

  8. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  9. Swift面向对象基础(中)——Swift中的存储属性和计算属性

    学习来自<极客学院> 1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型 ...

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

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

随机推荐

  1. Python 七步捉虫法

    了解一些技巧助你减少代码查错时间. -- Maria Mckinley 在周五的下午三点钟(为什么是这个时间?因为事情总会在周五下午三点钟发生),你收到一条通知,客户发现你的软件出现一个错误.在有了初 ...

  2. BMP图片解析

    本博客参考:https://www.cnblogs.com/l2rf/p/5643352.html 一.简介 BMP(Bitmap-File)图形文件是Windows采用的图形文件格式,在Window ...

  3. socket小计

    socket,是一个实现了双向通信的链接. 将http比喻为轿车,承载数据.传递数据,那么socket,就是轿车的发动机,它轿车动起来.

  4. Deepin15.11-mysql5.7安装与配置

    目录 1.卸载 2.换源 3.安装mysql-5.7并修改密码 4.修改mysql中字符编码 deepin系统中,默认的系统源,使用apt-get install mysql-server会自动拉取m ...

  5. swoole学习--登录模块

    使用swoole+thinkphp6.0+redis 结合开发的登录模块,做完之后有几点感悟: 1.不要相信任务数据,包括请求的外部接口,特别是超时者部分,尽可能的交给task完成. 2.原来可以在入 ...

  6. auth权限逻辑

    下面本人为大家讲解一下如何实现auth权限, 第一步,新建Auth.php,复制下面的代码,把注释中的表都创建一下.把文件放到extend新建文件夹org放进去即可, <?php // +--- ...

  7. Django项目打包

    Django项目打包 这是目前开发完成的project目录树.我们要打包其中的polls app. (v_python3.6) thinkt@linux-pw37:~/PycharmProjects/ ...

  8. JAVA第二次blog总结

    JAVA第二次blog总结 0.前言 这是我们在博客园上第二次写博客,进行JAVA阶段学习的总结.现在我们接触到JAVA已经有一段时间了,但难点还是在于编程思想和方法的改变,第二阶段的学习让我对于理解 ...

  9. codeforce 225B Code Parsing

      Little Vitaly loves different algorithms. Today he has invented a new algorithm just for you. Vita ...

  10. 顺序表的C语言实现

    在现实应用中,有两种实现线性表数据元素存储功能的方法,分别是顺序存储结构和链式存储结构.顺序表操作是最简单的操作线性表的方法.下面的代码实现了顺序表的几种简单的操作.代码如下 //start from ...