computed用发_Vue.js中computed使用详解
这次给大家带来Vue.js中computed使用详解,Vue.js中computed使用的注意事项有哪些,下面就是实战案例,一起来看一下。
JS属性:
JavaScript有一个特性是Object.defineProperty ,它能做很多事,但我在这篇文章只专注于这个方法中的一个:var person = {};
Object.defineProperty (person, 'age', {
get: function () {
console.log ("Getting the age");
return 25;
}
});
console.log ("The age is ", person.age);
// Prints:
//
// Getting the age
// The age is 25
(Obeject.defineProperty是Object的一个方法,第一个参数是对象名称,第二个参数是要设置的属性名,第三个参数是一个对象,它可以设置这个属性是否可修改、可写等,而这篇文章主要使用的是Obeject.defineProperty的访问器属性,感兴趣的朋友可以自行google或者查看Js高及程序设计)
尽管 person.age 看起来像是访问了对象的一个属性,但其实在内部我们是运行了一个函数。
一个基本可响应的Vue.js
Vue.js内部构建了一个可以将普通的对象转化为可以被观察的值( 响应属性 ),下面为大家展示一个简化版的如何添加响应属性的案例:function defineReactive (obj, key, val) {
Object.defineProperty (obj, key, {
get: function () {
return val;
},
set: function (newValue) {
val = newValue;
}
})
};
// 创建一个对象
var person = {};
// 添加可响应的属性"age"和"country"
defineReactive (person, 'age', 25);
defineReactive (person, 'country', 'Brazil');
// 现在你可以随意使用person.age了
if (person.age < 18) {
return 'minor';
}
else {
return 'adult';
}
// 设置person.country的值
person.country = 'Russia';
有趣的是, 25 和 ‘Brazil' 还是一个闭包内部的变量,只有当赋给它们新值的时候 val 才会改变。 person.country 并不拥有 'Brazil' 这个值,而是getter这个函数拥有 'Brazil' 这个值。
声明一个计算属性
让我们创建一个定义计算属性的函数 defineComputed 。这个函数就跟大家平时使用computed时的一样。defineComputed (
person, // 计算属性就声明在这个对象上
'status', // 计算属性的名称
function () { // 实际返回计算属性值的函数
console.log ("status getter called")
if (person.age < 18) {
return 'minor';
}
else {
return 'adult';
}
},
function (newValue) {
// 当计算属性值更新时调用的函数
console.log ("status has changed to", newValue)
}
});
// 我们可以像使用一般的属性一样使用计算属性
console.log ("The person's status is: ", person.status);
让我们写一个简单的 defineComputed 函数,它支持调用计算方法,但目前不需要它支持 updateCallback 。function defineComputed (obj, key, computeFunc, updateCallback) {
Object.defineProperty (obj, key, {
get: function () {
// 执行计算函数并且返回值
return computeFunc ();
},
set: function () {
// 什么也不做,不需要设定计算属性的值
}
})
}
这个函数有两个问题:
每次访问计算属性时都会执行一次计算函数 computeFunc ()
它不知道什么时候更新 (即当我们更新某个data中的属性,计算属性中也会更新这个data属性)// 我希望最终函数执行后是这个效果:每当person.age更新值的时候,person.status也同步更新
person.age = 17;
// console: status 的值为 minor
person.age = 22;
// console: status 的值为 adult
增加一个依赖项
让我们增加一个全局变量 Dep :var Dep = {
target: null
};
这是一个依赖项,接着我们用一个骚操作来更新 defineComputed 函数:function defineComputed (obj, key, computeFunc, updateCallback) {
var onDependencyUpdated = function () {
// TODO
}
Object.defineProperty (obj, key, {
get: function () {
// 将onDependencyUpdated 这个函数传给Dep.target
Dep.target = onDependencyUpdated;
var value = computeFunc ();
Dep.target = null;
},
set: function () {
// 什么也不做,不需要设定计算属性的值
}
})
}
现在让我们回到之前设置的响应属性上:function defineReactive (obj, key, val) {
// 所有的计算属性都依赖这个数组
var deps = [];
Object.defineProperty (obj, key, {
get: function () {
// 检查是否调用了计算属性,如果调用了,Department.target将等于一个onDependencyUpdated函数
if (Dep.target) {
// 把onDependencyUpdated函数push到deos中
deps.push (target);
}
return val;
},
set: function (newValue) {
val = newValue;
// 通知所有的计算属性,告诉它们有个响应属性更新了
deps.forEach ((changeFunction) => {
changeFunction ();
});
}
})
};
我们可以在计算属性定义的函数触发更新回调后更新 onDependencyUpdated 函数。var onDependencyUpdated = function () {
// 再次计算 计算属性的值
var value = computeFunc ();
updateCallback (value);
}
把它们整合到一起:
让我们重新访问我们的计算属性 person.status :person.age = 22;
defineComputed (
person,
'status',
function () {
if (person.age > 18) {
return 'adult';
}
},
function (newValue) {
console.log ("status has changed to", newValue)
}
});
console.log ("Status is ", person.status);
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
computed用发_Vue.js中computed使用详解相关推荐
- JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前 言 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于汇编语言这样的面 ...
- Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式 点击按钮 ...
- Js中apply方法详解说明
Js apply 方法 详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了, ...
- JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...
- JS中Location使用详解
javascript中 location用于获取或设置窗体的URL,并且可以用于解析URL,是BOM中最重要的对象之一,下面我们就来详细探讨下Location对象的使用. javascript中loc ...
- 前端基础知识点:JS中的参数传递详解
JS语法中的传递参数,对于初学者是一个非常重要的概念.很多小伙伴在学习"值传递"和"引用传递"时,会有不少烦恼.今天我们就来通过各种姿势全方位剖析JS中的值传递 ...
- JS中函数式编程详解版(FunctionalProgramming,FP)
函数式编程详解 函数式编程的认识 函数式编程前置知识 函数是一等公民(First-class Function) 高阶函数 闭包 函数式编程基础 纯函数 lodash 模块 柯里化 函数组合 函子 函 ...
- D3.js中Bullet Charts详解
Bullet Charts 今天我们来聊一聊 占地儿小却能表达足够丰富的数据信息的子弹图. 子弹图,顾名思义是由于该类信息图的样子很像子弹射出后带出的轨道.子弹图无修饰的线性表达方式使我们能够在狭小的 ...
- JS中的showModelDialog详解和实例
1.<a href="#" οnclick="SeePic('${list.PATH}')"><font color="blue&q ...
最新文章
- 允许自行设计赛道之后,参赛同学都想到了什么呢?
- 天籁obd接口针脚定义_OBD协议介绍
- 大数据WEB阶段(六)MySql 下载、安装、卸载与配置
- String_boot热部署学习
- python 递归 写平方_Python算法:推导、递归和规约
- VS2008 C++ 项目添加“依赖”、“库目录”和“包含目录”
- 一淘网挑战百度意在造势 人才储备成最大障碍
- 3 年大厂工作经验面试竟然要我手写 atoi 函数
- java json 变量所有的属性
- 关于form提交后展示遮罩及显示进度条gif问题
- 逐行分析jQuery源码
- 大数据shipin教程_尚硅谷大数据视频教程,粉丝众多,人手一套尚硅谷教程
- 华为交换之间静态路由配置实例
- CAD使用圆,椭圆,直线综合练习
- 财务会计之借贷记账法的【科目方向】和【科目余额方向】分析
- try{}里面有一个return语句,那么紧跟在这个try后的finally{}里的code会不会被执行,什么时候被执行,在return前还是后?
- google protobuf 在线工具
- 孔雀优化算法(Peafowl (Pavo Muticus/Cristatus) Optimization Algorithm, POA)
- Unity显示印度语异常
- MPB:韩东飞、郝光飞等细菌转录组分析样品制备方法