VueCompostionAPI에서 ref 및reactive 사용 방법 정보

입문

저번 기사부터 계속할게요.
Vue3.x부터 사용할 예정인 CompositionAPI 및 Vue2비교 x
저번 보도를 쓸 때ref와 reactive의 차이
이것들에 관해서는 아직 설치하면서 확인 중이니 따로 정리하고 싶습니다.
기재했습니다.
이번에는 그런 실시와 동시에 남기고 싶어요.
또한 확인할 때 설치된 원본 코드는 아래github와 같습니다.
vue-composition-api-test

전제 환경

VueCLI v4.0.5
node v10.16.0
yarn v1.13.0

다시 활성화된 어셈블리 API 객체

compostionAPI에서 객체 재활성화를 정의할 때 ref와reactive 두 가지 유형이 있습니다.
그런 거 접촉할 거예요.

ref 정보

ref는 단일value 속성을 가진 기본체 대상이다.
그림에서 볼 때 이전에 데이터 () 에서 정의한 것이 비교적 가깝다.

호출 방식

vue2.x 시스템에서 사용할 때compositionAPI에서 가져옵니다.
HelloRef.vue

import { createComponent, ref } from "@vue/composition-api";

정의 방법

setup() 함수에 다음과 같은 변수를 정의합니다.
HelloRef.vue

const RefHelloCount = ref(1);

그룹을 정의할 수도 있습니다.
HelloRef.vue

const Animals = ref(["cat", "dog", "hamster"]);

다음 데이터를 정의할 때는 아래reactive를 사용합니다.
HelloRef.vue

let RefAnimalObjects = ref({
  cat: 1,
  dog: 2
});

값 액세스 방법

setup() 함수의 방법 등에서 변수 값을 호출할 때変数名.value, 템플릿에서 직접 {{変数名}} 변수 값을 호출합니다.
따로따로 확인하다

setup () 함수에서 호출

숫자만 늘리는 방법을 가져와보세요.
다음과 같이 실패합니다.
HelloRef.vue

const incrementHello = () => {
   RefHelloCount++;
};

이것은 ref 에 정의된 변수가 기본 대상이기 때문이다.
콘솔에 출력된 데이터를 확인하면 다음과 같습니다.

따라서 방금의 처리에 대해 다음과 같이 수정한다.
HelloRef.vue

const incrementHello = () => {
    refHelloCount.value++;
};

이렇게 하면 정상적으로 일할 수 있다.

template에서 호출

tempalte를 표시할 때 value 를 표시하지 않아도 문제가 없습니다.
API 내부에서 valueexpose 처리되므로 value 없이 기록됩니다.
HelloRef.vue

<p>{{ RefHelloCount }}</p>

주의사항

setup 함수에서 호출할 때의 처리 방법과template에서 호출할 때의 다른 방법

template 호출이 없을 때value도 상관없다.API에서 잘 변경됩니다

.

setup 함수에서 호출할 때 필요value

사용reactive 정의 대상

reactive

다른 것을 검사하다 reactive.
우리도 ref와 같이 composition-api 에서 가져옵니다.
HelloRef.vue

import { createComponent, reactive } from "@vue/composition-api";

정의 방법

방금 ref에서 정의하고 분산된 내용을 정리할 수 있습니다.
return에서도 정의된 변수를 기록할 수 있습니다.
HelloRef.vue

const ReactiveData = reactive({
    count: 1,
    ReativeAnimals: ["cat", "dog", "hamster"]
});

return {
    ReactiveData
};

값 액세스 방법

위의 정의와 같이 setup() 함수에서 変数名.key 을 사용하여 액세스합니다.템플릿 변수에서 変数名.key (value 필요 없음) 를 사용해도 접근할 수 있습니다.
각자 확인하다.

setup () 함수에서 호출

変数名.key 적절한 값에 액세스합니다.
또한 이때 필요하지 않습니다value.
이 점에 관해서 나는 이것이 방문ref에서 만든 데이터보다 더 간단하고 이해하기 쉽다고 생각한다.
HelloRef.vue

const incrementHelloReactve = () => {
    ReactiveData.count++;
};

template에서 호출

접근 값은 template 에서 상응하는 변수 ref 를 호출하는 것보다 종종 더 지루하다.
HelloRef.vue

return {
    ReactiveData
};

↓ 上記データをtemplate内で使用する

<p>
    {{ReactiveData.count}}
    {{ReactiveData.animals}}
</p>

따라서 이 객체를 평면 객체toRefs로 변환하는 방법을 사용합니다.
이것은 모든 속성을 하나의 평면 대상으로 변환합니다.template에서 호출할 때 지루한 쓰기가 필요하지 않습니다.

return {
    ...toRefs(ReactiveData)
};

return 부분에서 상술한 바와 같이 template 내의 기술은 다음과 같다.

<p>
    {{count}}
    {{animals}}
</p>

아주 간단해졌어요.

API 내부의 작업

compostionAPI 내에서 무엇을 하는지 확인했습니다.node_modules/@vue/compostion-api/vue-composition-api.module.js의
174행부터 191행까지 유사한 기록이 있다.
composition-api

function isPlainObject(x) {
    return toString(x) === '[object Object]';
}

function toRefs(obj) {
    if (!isPlainObject(obj))
        return obj;
    var res = {};
    Object.keys(obj).forEach(function (key) {
        var val = obj[key];
        // use ref to proxy the property
        if (!isRef(val)) {
            val = createRef({
                get: function () { return obj[key]; },
                set: function (v) { return (obj[key] = v); },
            });
        }
        // todo
        res[key] = val;
    });
    return res;
}

isPlainObject에서 대상 여부를 판단하고 적용되면 obj 회전forEach으로 getter,setter를 정의합니다.

총결산

끝까지 읽어주셔서 감사합니다.
ref와reactive의 차이를 대체적으로 확인했다.
이곳을 터치한 인상은 ref에서 정의한 변수와 다른 관련성이 희박하고 독립적인 것이 비교적 적합하다는 것이다.
다른 한편, reactive에 대해 나는 하나의 변수 중에서 key:value의 형식으로 각자의 관련 변수로 정의하는 것이 비교적 적합하다고 생각한다.
예를 들어 사용자의 정보 등이다.
예:

const User = reactive({
    name: 'Taro',
    age: '19',
    sex: 'male'
})

compostionAPI 자체의 문서가 아직 완비되지 않았기 때문에 저는 개인의 제품 등을 깊이 파고들어 어떻게 활용하면 좋을지 판단하고 싶습니다.

참고 자료

공식 API 참조