이 기사는 Vue입니다.js Advent Calender 2015 6일째 보도입니다.

개시하다

Vue.js에서 제작된 구성 요소에서 $data와는 다른 작용 범위(데이터 영역)를 정의하고 데이터로 예쁘게 나누어 관리할 생각은 없으십니까?
예를 들어 서버 측에서 얻은 데이터(모델: 모델), 구성 요소 내부에서 UI 제어에 사용되는 상징적 데이터, 폼의 확인 결과를 유지하는 데이터 등이다.
이 글은 구성 요소와 개인 데이터의 범위를 구분하고 관리하고자 하는 사람들을 위해 더욱 활발한 독립된 범위를 정의하는 방법을 소개했다.

주의

이번에 소개한 독립된 데이터 범위에 관해서는 사실상 이 방법이다, Vue.js를 사용하여 응용 프로그램을 구축할 때 정말 필요한지 잘 연구하십시오.이유는 다음과 같다.

Vue.공식 문서에 없는 비문서 방식

내부 API, Vue를 사용하기 위해js의 버전 업그레이드에 따라 이동할 수 없음

데이터 범위의 증가로 인해 데이터 관리가 복잡해짐

응용 디자인에 대한 고려 사항 증가

flex/redux와 같은 데이터 흐름 구조와 일치하지 않을 수 있음

이번에 소개한 방법에 대해 Vue.js를 사용하여 일반적으로 응용 프로그램을 구축하는 것보다 자신과 같은 플러그인 제작자에게 적합한 방법이다.그래서 일반인도 참고로 나중에 읽을 수 있다.

방법

이것은 독립된 데이터 범위를 정의하는 방법이지만 그리 어렵지 않다.간단해.아래와 같이 진행한다.

독립적으로 관리되는 데이터를 넣을 준비 대상

1.에 준비된 객체를 활성 속성으로 호스트에 사용할 Vue 인스턴스

준비

내부 APIdefineReactive에서 1. 및 2.의 객체 및 속성 키를 매개변수로 지정하여 실행

이후 Vue.set 및 Vue.delete에서 1. 객체의 다음 단계

위에 코드를 이렇게 만든 느낌.

// 1. 独自に管理するデータを入れるオブジェクトを用意する
var myScope = {}

// 2. `1.`で用意したオブジェクトをリアクティブなプロパティとしてホストする Vue インスタンスを用意する
var vm = new Vue({ ... }) 

// 3. 内部 API `defineReactive` で`1.`と`2.`のオブジェクト、そしてプロパティキーをパラメータに指定して実行する
Vue.util.defineReactive(vm, '$my', myScope)

// 4. 後は、`Vue.set`、`Vue.delete` で`1.`のオブジェクトにゴニュゴニョする
Vue.set(myScope, 'foo', 1) // プロパティ'foo'を設定
Vue.set(myScope, 'bar', { buz: 'hello' }) // プロパティ'bar'を設定
...
Vue.delete(myScope, 'foo') // プロパティ'foo'の削除

그렇게 어렵지 않죠?
이곳이 키모가 된 것은 defineReactive이다.이 유틸리티 내부 API를 호출하지 않으면 독립된 데이터 범위는 다시 시작할 수 없습니다.defineReactive$data작용역에서도 사용, Vue.js에서 능동 시스템의 핵심 실용 프로그램 함수가 되었다.defineReactive에서 호스트 소스를 미리 정의하지 않은 Vue 실례의 재활약은 독립된 데이터 범위에서 관리된 데이터를 아무리 만지작거려도 다시 활성화되지 않고 독립된 데이터 범위의 내용을 보여주지 않는다.
또한 호출Vue.set/Vue.delete도 중요하다.Reactivity in Depth(일본어 번역다시 활동하는 탐색에 기재된 바와 같이 이러한 전역적인 방법을 통해 속성을 추가하거나 삭제하지 않으면 속성을 다시 활성화할 수 없습니다.(참고로 Vue.set/Vue.delete는 Vue.util.set/Vue.util.del의 별명이고 이쪽도 마찬가지입니다.)
마지막으로 방법의 총결로 각 실례는 다시 활성화된 독립된 데이터 범위를 정의하고 Vue 실례에서 데이터 범위의 재활동 속성을 추가/삭제하며 example 플러그인의 예시 코드$addProp와 $delProp를 추가한다.

/**
 * 独自スコープを定義するプラグイン
 */
function plugin (Vue) {
  /**
   * _init をオーバーライドして、独自スコープを Vue インスタンス毎に初期化
   */
  var init = Vue.prototype._init
  Vue.prototype._init = function (options) {
    this._my = {} // 独自スコープのデータを初期化
    Vue.util.defineReactive(this, '$my', this._my) // 独自スコープ '$my' を定義

    init.call(this, options)
  }

  /**
   * 独自スコープに kye と value でプロパティを追加
   */
  Vue.prototype.$addProp = function (key, value) {
    Vue.set(this._my, key, value)
  }

  /**
   * 指定された key のプロパティを独自スコープから削除
   */
  Vue.prototype.$delProp = function (key) {
    Vue.delete(this._my, key)
  }
}

데모

상기 플러그인의 example을 제작하여 동작을 보여 줍니다.이쪽gif로 동작을 확인할 수 있습니다.
$data 역할 영역은 Vue 실례의 데이터 범위를 확인할 수 있고 $my 역할 영역은 나 개인의 독립된 데이터 범위의 데이터 내용이다.$my 역할 영역에 속성$data을 추가해도 역할 영역에 추가되지 않음$my도 역할 영역에만 추가됨을 확인할 수 있습니다.또한 삭제도 마찬가지로 $my 작용역에서만 삭제되는 것을 확인할 수 있다.

데모 코드

관심 있는 사람들을 위해 여기 시위 코드가 있어요.

vue-define-reactive-demo

총결산

Vue 인스턴스$data는 역할 영역과 분리하여 독립된 데이터 범위를 정의하는 방법을 소개했다.독립된 데이터 역할 영역을 정의함으로써 $data 역할 영역은 응용 프로그램의 본질적인 데이터를 관리할 수 있다.
그러나 응용 프로그램의 구현으로 편입된다면 여러 가지 나쁜 점이 있기 때문이다.js를 업그레이드할 때 언젠가 프로그램이 실행되지 못할 것이라는 각오가 필요합니다.

끝말

실제로 이런 방법은 Vuevue-validator다.js 공식 플러그인 개발 관리자를 맡고 있는 나, v2.0의 실복을 설계할 때 생기는 것이다.표의 검증 데이터는 응용 프로그램의 데이터와 현저히 다르기 때문에 사용자 측$data의 작용 범위를 더럽히고 싶지 않다.
자신과 같은 질문이 있다면 꼭 해봐야 하나요?