How computed works in Vue.js

In this article, we learn how computed works by implementing a simple version of the function that has the same function as computed in Vue. Friends who are interested in how computed works in Vue.js should learn together

JS attributes:

JavaScript has a feature that is Object.defineProperty, it can do many things, but I only focus on one of these methods in this article:

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 is a method of Object, the first parameter is the name of the object, the second parameter is the name of the property to be set, and the third parameter is an object, which can set whether the property can be modified, writable, etc. This article mainly uses the accessor of Object.defineProperty Attributes, interested friends can google or check Js High and Programming)

Although person.age looks like it accesses an attribute of the object, in fact we are running a function internally.

A basically responsive Vue.js

Vue.js internally builds an object that can convert ordinary objects into values ​​that can be observed (responsive properties). The following shows you a simplified version of how to add response attributes:

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 &#39;minor&#39;;
}
else {
 return &#39;adult&#39;;
}
// 设置person.country的值
person.country = &#39;Russia&#39;;

Interestingly, 25 and 'Brazil' are still variables inside the closure, and val only becomes valid when new values ​​are assigned to them. will change. person.country does not have the value 'Brazil', but the getter function has the value 'Brazil'.

Declaring a computed property

Let’s create a function defineComputed that defines a computed property. This function is the same as when you usually use computed.

defineComputed (
 person, // 计算属性就声明在这个对象上
 'status', // 计算属性的名称
 function () { // 实际返回计算属性值的函数
  console.log ("status getter called")
  if (person.age < 18) {
   return &#39;minor&#39;;
  }
  else {
   return &#39;adult&#39;;
  }
 },
 function (newValue) {
  // 当计算属性值更新时调用的函数
  console.log ("status has changed to", newValue)
 }
});
// 我们可以像使用一般的属性一样使用计算属性
console.log ("The person&#39;s status is: ", person.status);

Let's write a simple defineComputed function that supports calling compute methods, but there is no need for it to support updateCallback at the moment.

function defineComputed (obj, key, computeFunc, updateCallback) {
 Object.defineProperty (obj, key, {
  get: function () {
   // 执行计算函数并且返回值
   return computeFunc ();
  },
  set: function () {
   // 什么也不做，不需要设定计算属性的值
  }
 })
}

There are two problems with this function:

The calculation function computeFunc () is executed every time the calculated property is accessed

It does not know when to update (i.e. when we Update an attribute in a data, and the data attribute will also be updated in the calculated attribute)

// 我希望最终函数执行后是这个效果：每当person.age更新值的时候，person.status也同步更新
person.age = 17;
// console: status 的值为 minor
person.age = 22;
// console: status 的值为 adult

Add a dependency

Let’s add A global variable Dep:

var Dep = {
 target: null
};

This is a dependency, and then we use a Sao operation to update the defineComputed function:

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 () {
   // 什么也不做，不需要设定计算属性的值
  }
 })
}

Now let us return to the response attributes set before:

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 ();
   });
  }
 })
};

We can update the onDependencyUpdated function after the function defined by the calculated property triggers the update callback.

var onDependencyUpdated = function () {
 // 再次计算 计算属性的值
 var value = computeFunc ();
 updateCallback (value);
}

Put them together:

Let us revisit our calculated attribute 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);

The above is what I compiled for everyone, I hope it will be useful in the future Everyone is helpful.

Related articles:

About the output stream at the end of the servlet in Ajax technology

Ajax php realizes three-level linkage of product classification

Ajax technology composition and core principle analysis

The above is the detailed content of How computed works in Vue.js. For more information, please follow other related articles on the PHP Chinese website!