介绍
今天就跟大家聊聊有关Vue。js中计算的工作原理是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强> js属性:
JavaScript有一个特性是<代码> Object.defineProperty> var person =, {};
Object.defineProperty (人,,& # 39;年龄# 39;,,{
,得到:function (), {
console.log 才能;(“Getting 从而age");
return 才能;25;
,}
});
console.log (“;从而,age is “,, person.age);//,打印:////,Getting 从而;年龄//,,age is 25 (Obeject.defineProperty是对象的一个方法,第一个参数是对象名称,第二个参数是要设置的属性名,第三个参数是一个对象,它可以设置这个属性是否可修改,可写等,而这篇文章主要使用的是Obeject.defineProperty的访问器属性,感兴趣的朋友可以自行谷歌或者查看Js高及程序设计)
尽管人。年龄看起来像是访问了对象的一个属性,但其实在内部我们是运行了一个函数。
<强>一个基本可响应的Vue.js
Vue。js内部构建了一个可以将普通的对象转化为可以被观察的值(响应属性)、下面为大家展示一个简化版的如何添加响应属性的案例:
function defineReactive (obj,,,, val), {
,Object.defineProperty (obj,,,, {
,,得到:function (), {
,,return val;
,,},
,,:function (newValue), {
,,val =, newValue;
,,}
,})
}；//,创建一个对象
var person =, {};//,添加可响应的属性“age"和“country"
defineReactive (人,,& # 39;年龄# 39;,,25);
defineReactive (人,,& # 39;增长# 39;,,& # 39;巴西# 39;);//,现在你可以随意使用person.age了
if (person.age & lt;, 18), {
,return & # 39;小# 39;;
}
else {
,return & # 39;成人# 39;;
}//,设置person.country的值
时间=person.country & # 39;俄罗斯# 39;; 有趣的是,25和“巴西# 39;还是一个闭包内部的变量,只有当赋给它们新值的时候val才会改变。人。国家并不拥有& # 39;巴西# 39;这个值,而是getter这个函数拥有& # 39;巴西# 39;这个值。
<>强声明一个计算属性
让我们创建一个定义计算属性的函数defineComputed。这个函数就跟大家平时使用计算时的一样。
defineComputed (
,人,//,计算属性就声明在这个对象上
,& # 39;状态# 39;,,//,计算属性的名称
,function (),{,//实际返回计算属性值的函数
console.log 才能;(“status getter called")
if 才能;(person.age & lt;, 18), {
,,return & # 39;小# 39;;
,,}
else {才能
,,return & # 39;成人# 39;;
,,}
},
,function (newValue), {//才能,当计算属性值更新时调用的函数
console.log 才能;(“status has changed to",, newValue)
,}
});//,我们可以像使用一般的属性一样使用计算属性
console.log (“,简历及# 39;s status 是:,,,,person.status); 让我们写一个简单的defineComputed函数,它支持调用计算方法,但目前不需要它支持updateCallback。
function defineComputed (obj,钥匙,,computeFunc,, updateCallback), {
,Object.defineProperty (obj,,,, {
,,得到:function (), {//,,,执行计算函数并且返回值
,,return computeFunc ();
,,},
,,:function (), {//,,,什么也不做,不需要设定计算属性的值
,,}
,})
} 这个函数有两个问题:
每次访问计算属性时都会执行一次计算函数computeFunc ()
它不知道什么时候更新(即当我们更新某个数据中的属性,计算属性中也会更新这个数据属性)
//,我希望最终函数执行后是这个效果:每当person.age更新值的时候,person.status也同步更新
时间=person.age 17;//控制台:祝福;status 的值为,小
时间=person.age 22;//控制台:祝福;status 的值为,成人 <强>增加一个依赖项
让我们增加一个全局变量Dep:
var Dep =, {
,目标:零
}; 这是一个依赖项,接着我们用一个骚操作来更新defineComputed函数:
function defineComputed (obj,钥匙,,computeFunc,, updateCallback), {
,var onDependencyUpdated =, function (), {//TODO。才能
,}
,Object.defineProperty (obj,,,, {
,,得到:function (), {
,,//,将onDependencyUpdated 这个函数传给Dep.target
,,Dep.target =, onDependencyUpdated;
,,var value =, computeFunc ();
,,Dep.target =,空;
,,},
,,:function (), {//,,,什么也不做,不需要设定计算属性的值
,,}
,})
}
