计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行。

上述代码会源源不断的打印出 b 的值。如果希望 a 依赖 data 中的 x 而变化,只需保证 a 函数中有 this.x 即可。如果函数中没有出现 data 中的属性,那么无论 data 中的属性怎么变,a 对应的函数一次也不会执行。

Vue 怎么知道计算属性在函数中引用了哪个 data 属性?这个函数又是怎么知道 data 属性变了,而且只关心它内部引用的那个属性,别的都不管?

官方文档对计算属性的描述是:

文档的描述让我的困惑更加困惑,还有这种操作?这特么是怎么做到的?

Google 了一把,看了一篇三哥的博文(见文末),豁然开朗。

由于涉及 Vue 的响应式绑定的原理,如果你对此不熟,最好先看看这篇文章

少啰嗦,先看过程:

1. 首先 b 属性会被处理为存取器属性,访问 b 就会触发其 get 函数

2. 处理计算属性 a 时,会执行 a 的函数,从而会执行 this.b,于是触发 b 的 get 函数

3. b 的 get 函数会添加 b 属性的依赖项,而刚才在处理计算属性过程中,a 已经作为依赖项被传给了一个全局变量,b 的 get 函数会检测到这个全局变量,并将其添加到自身的订阅者列表中

4. 对 b 赋予新的值时,会触发其 set 函数,set 函数中会遍历执行订阅者,a 的值就是在这个时候更新的

再看代码:

(注:图中数字仅作思路引导,并非与前文过程描述对应)

测试一下,完美打印出 1, 2, 3, 4

console.log(obj.b)

obj.a += 1;

console.log(obj.b);

obj.a += 1;

console.log(obj.b);

obj.a += 1;

console.log(obj.b);

通过对存取器属性、闭包和观察者模式的综合运用,Vue 巧妙的实现了计算属性。现在再看官方文档描述,是不是更通透了呢。

可以看出,Vue 响应式系统的核心理念是“依赖”,DOM 节点之所以随数据而变化,是因为节点依赖于数据,计算属性之所以随数据而变化,是因为计算属性依赖于数据。做好响应式的关键就在于处理好依赖关系。

参考文章:https://skyronic.com/blog/vuejs-internals-computed-properties

Vue.js 计算属性的秘密的更多相关文章

  1. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  2. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  3. Vue.js 计算属性

    Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...

  4. vue.js计算属性 vs methods

    计算属性:Vue.js 模板内的表达式非常便利,但是缺点就是只能用于简单的运算,如果模板中有太多的逻辑运算会让模板不堪重负且难以维护.恰恰计算属性可以处理复杂的逻辑运算,也就是说对于任何复杂逻辑你都应 ...

  5. Vue.js 计算属性computed和methods的区别

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...

  6. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  7. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  8. vue的计算属性

    在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...

  9. vue中计算属性的get与set方法

    计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...

随机推荐

  1. 使用Gulp实现前端构建自动化

    使用Gulp实现前端构建自动化 安装 一.安装NodeJs Gulp的安装依赖于NodeJs的npm安装管理器 安装包下载地址 关于npm命令: 1. npm install <name> ...

  2. Bootstrap进度条

    前面的话 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等,通过简单.灵活的进度条,可以为当前工作流程或动作提供实时反馈.本文将详细介绍Bootstrap进度条 基本样式 Bootst ...

  3. java在的数据类型

    java数据类型的划分 程序的本质=数据的处理: 数据库的本质=数据的存储. java之中数据类型一共分为两大类. ·基本数据类型: 数值型: 整型:byte,short,int,long 默认值都是 ...

  4. Postgresql快速写入/读取大量数据(.net)

    环境及测试 使用.net驱动npgsql连接post数据库.配置:win10 x64, i5-4590, 16G DDR3, SSD 850EVO. postgresql 9.6.3,数据库与数据都安 ...

  5. 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题

    WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...

  6. 【Storm】Storm实战之频繁二项集挖掘

    一.前言 针对大叔据实时处理的入门,除了使用WordCount示例之外,还需要相对更深入点的示例来理解Storm,因此,本篇博文利用Storm实现了频繁项集挖掘的案例,以方便更好的入门Storm. 二 ...

  7. nodejs抓取网络图片转换为base64编码的图片

    抓取网络图片需要加载http模块 //假定这是index.js文件 var http = require('http'); var url = 'http://p0.meituan.net/tuanp ...

  8. 跨域访问http接口的使用

    最近在弄一个sip网页集成版软电话,为了功能的完善,呼叫中心的工作人员为我们提供了一个http接口,我先在网页中直接打开分析了一下他的返回值,然后又放到js中去访问,结果一放到js中一访问就发现浏览器 ...

  9. 关于appium+模拟器+idea的细谈

    之前转载的虫师的appium移动端自动化的文章,前边appium环境的搭建,这里就不过多介绍了,不明白的小伙伴可以返回去看,后边有不会的步骤, 也都去看,总之,两篇文章结合看! 关于移动端自动化测试- ...

  10. windows系统查看支持最大内存

    1.使用快捷键:win+r打开命令窗口. 按回车到命令界面 2.弹出如下命令界面,在界面C:\Users\Administrator>处输入wmic memphysical get maxcap ...