Vue.js에서 계산이 작동하는 방식

이 기사에서는 Vue에서 계산된 것과 동일한 기능을 가진 함수의 간단한 버전을 구현하여 계산된 작동 방식을 알아봅니다. Vue.js에서 계산이 어떻게 작동하는지에 관심이 있는 친구들은 함께 배워야 합니다

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의 메소드입니다. 첫 번째 매개변수는 객체 이름, 두 번째 매개변수는 설정할 속성의 이름, 세 번째 매개변수는 이 속성을 설정할 수 있는 객체입니다. 수정, 쓰기 가능 등이 가능한지. 이 글은 주로 Object.defineProperty의 accessor 속성을 사용합니다. 관심 있는 친구들은 구글링하거나 Js High 및 프로그래밍을 확인해보세요.

person.age는 access A 속성처럼 보이지만 내부적으로 우리는 기능을 실행하고 있습니다.

기본적으로 반응형 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 &#39;minor&#39;;
}
else {
 return &#39;adult&#39;;
}
// 设置person.country的值
person.country = &#39;Russia&#39;;

흥미롭게도 25와 'Brazil'은 여전히 ​​클로저 내부의 변수이며, val은 새 값이 할당될 때만 변경됩니다. person.country에는 'Brazil' 값이 없지만 getter 함수에는 'Brazil' 값이 있습니다.

계산된 속성 선언

계산된 속성을 정의하는 DefineCompulated 함수를 만들어 보겠습니다. 이 기능은 일반적으로 계산을 사용할 때와 동일합니다.

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

계산 메서드 호출을 지원하지만 현재는 updateCallback 지원을 요구하지 않는 간단한 정의계산 함수를 작성해 보겠습니다.

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

이 함수에는 두 가지 문제가 있습니다.

계산된 속성에 액세스할 때마다 계산 함수인 ComputeFunc()가 실행됩니다.

언제 업데이트할지 알 수 없습니다(즉, 특정 데이터의 속성을 업데이트할 때, 계산된 속성도 이 데이터 속성이 업데이트됩니다)

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

종속성 추가

전역 변수를 추가해 보겠습니다. Dep:

var Dep = {
 target: null
};

이것은 종속성입니다. 그런 다음 멋진 작업을 사용하여 DefineCompulated를 업데이트합니다. 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 () {
   // 什么也不做，不需要设定计算属性的值
  }
 })
}

이제 이전에 설정한 응답 속성으로 돌아가겠습니다.

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를 다시 살펴보겠습니다.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);

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련글 :

Ajax 기술에서 서블릿 끝의 출력 스트림에 대하여

Ajax+php는 제품 분류의 3단계 연계를 구현합니다

Ajax 기술 구성 및 핵심 원리 분석

위 내용은 Vue.js에서 계산이 작동하는 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!