vue2.0中的计算属性
计算属性是一个很邪门的东西，只要在它的函数里引用了data中的某个属性，当这个属性发生变化的时候，函数仿佛可以嗅探到这个变化，并自动重新执行。
上代码会源源不断的打印出a的值。如果希望b依赖data中的x而变化，只需要保证b函数中有this.x即可。如果函数中没有出现data中的属性，那么无论data中的属性怎么变，b对应的函数一次也不会执行。
Vue是怎么知道计算属性在函数中引用了哪个data属性？这个函数又是怎么知道data属性变了，而且只关心它内部引用的那个属性，别的都不管？官方文档是这么说的：
我们简单模拟实现一个计算属性：a变化时，b自动跟着变化。
var obj = {
a:0,
b:function(){
var a = this.a;
return a + 1;
}
}
由于涉及到Vue的双向绑定的原理，如果你对此不熟，最好先看看《Vue.js双向绑定的实现原理》
程序执行过程：
1、首先b属性会被处理为存取器属性，访问b就会触发其get函数；
2、处理计算属性a时，会执行a的函数，从而会执行this.b，于是触发b的get函数；
3、b的get函数会添加b属性的依赖项，而刚才在处理计算属性过程中，a已经作为依赖项被传给了一个全局变量，b的get函数会检测到这个全局变量，并将其添加到自身的订阅者列表中；
4、对b赋予新的值时，会触发其set函数，set函数中会遍历执行订阅者，a的值就是在这个时候更新的。
再看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two-way-data-binding</title>
</head>
<body>
<script>
var Dep = null; function defineReactive(obj, key, val) {
var deps = [];
Object.defineProperty(obj, key, {
get: function () {
if (Dep) {
deps.push(Dep);
}
return val;
},
set: function (newval) {
val = newval;
deps.forEach(func => func());
}
})
} function defineComputed(obj, key, func) {
func = func.bind(obj);
var value;
Dep = function () {
value = func();
};
value = func();
Dep = null;
Object.defineProperty(obj, key, {
get: function () {
return value;
}
})
} var obj = {};
defineReactive(obj, 'a', 0);
defineComputed(obj, 'b', function () {
var a = this.a;
return a + 1;
})
</script>
</body>
</html>
通过对存取器属性、闭包和观察者模式的综合运用，Vue巧妙的实现了计算属性。可以看出，Vue响应式系统的核心理念是“依赖”，DOM节点之所以随数据而变化，是因为节点依赖于数据，计算属性之所以随数据而变化，是因为计算属性依赖于数据，做好响应式的关键就在于处理好依赖关系。
参考文章：https://skyronic.com/blog/vuejs-internals-computed-properties
vue2.0中的计算属性的更多相关文章
- vue2.x中使用计算属性巧妙的实现多选框的“全选”
接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 ...
- Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- vue2.0动态绑定图片src属性值初始化时报错
在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- Vue中的计算属性与$watch
计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
随机推荐
- 使用nginx+uwsgi+Django环境部署
环境准备 Python点这里 nginx点这里 uwsgi点这里
- Zynq-7000 FreeRTOS(一)系统移植配置
软件版本:VIvado HLx 2018.2 从FreeRTOS的官网中下载源代码: https://www.freertos.org/a00104.html 图:FreeRTOS的官网 上图中,点击 ...
- 【实战】Apache Shiro 1.2.4 RCE
poc: #coding: utf-8 import os import re import sys import base64 import uuid import subprocess impor ...
- Java 线程类别
Java 线程类别 守护线程和非守护线程 守护线程和非守护线程之前的唯一区别在于:是否阻止JVM的正常退出. JVM正常退出是与异常退出相对的概念,异常退出如调用System.exit(status) ...
- JS框架设计之对象类型判断一种子模块
Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型.基础数据类型包括5种基本数据类型,分别是null,bool,undefined,number,string,也叫简单数据类型 ...
- Thinkphp3.2.X自动生成应用目录
从3.2.2版本开始,可以支持自动生成默认模块之外的模块目录以及批量生成控制器和模型类. 例如,如果我们需要生成一个Admin模块用于后台应用,在应用入口文件中定义如下: // 绑定Admin模块到当 ...
- vs2015 点击cshtml 后提示 "无效指针" 的解决办法
1. 关闭vs 2. 删除 %LocalAppData%\Microsoft\VisualStudio\14.0\ComponentModelCache 3. 打开vs OK 解决
- C# 中的隐式类型转换(运算时的隐式转换)和显示类型转换
区别: 隐式转换失败编译会报错. 显示转换有可能精度丢失. 根据项目的编译设置,显示转换溢出可能会报错,如果设置溢出且未使用checked检查,运行时如果发生溢出会产出未知的计算结果. 在数字运算时, ...
- Knockout.js CSS绑定
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 怎么让一段xml被识别为字符串
public static String decodeString(String strData) { strData = replaceString(strData, "<" ...