Vue.js의 계산된 사용 사례에 대한 자세한 설명

이번에는 Vue.js의 Computed 사용 사례에 대해 자세히 설명하겠습니다. Vue.js에서 Computed를 사용할 때 주의 사항은 무엇인가요?

JS 속성:

JavaScript에는 <a href="http://www.php.cn/wiki/60.html" target="_blank">Object라는 기능이 있습니다. <code> <a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a>.defineProperty .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의 접근자 속성을 사용합니다. 친구들은 구글을 ​​검색하거나 Js Advanced and Programming을 확인해 보세요.

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 &#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:

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 중국어 웹사이트!

추천 자료:

빌더 모드 사용 튜토리얼

Vue.js의 계산 및 메소드 사용에 대한 자세한 설명

위 내용은 Vue.js의 계산된 사용 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!