Vue.js+계산 사용 방법

이번에는 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의 accessor 속성을 사용합니다. .defineProperty, 관심 있는 친구는 Google에서 검색하거나 Js Advanced and 프로그래밍을 확인해 보세요.

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

추천 자료:

실제 프로젝트에서 bootstrap+selectpicker 드롭다운 상자를 사용하는 방법

vue-route+beforeEach를 사용하여 탐색 가드 만들기

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