반응형 변수를 구축하기 위해 Vue3 ref의 실패를 해결하는 방법

vue3 ref가 반응형 변수를 구성하지 못함

문제 설명

ref를 사용하여 Vue3에서 반응형 변수를 선언하고 함수를 사용하여 값을 변경하지만 값을 반응형으로 변경할 수 없습니다

<template>
  <p>{{userName}}</p>
  <button @click=&#39;change()&#39;>change</button>
</template>

<script>
  //引入定义响应式数据的函数
  import {reactive} from &#39;vue&#39;;
  import {ref} from "@vue/reactivity"; //!!!!!注意，这里有个坑，ref必须是引用自vue，而非@vue/reactivity
  export default {
  name: &#39;App&#39;,
  //为Vue3的新特性提供统一入口，代码都会在这个函数中添加
  //在beforecreated之前进行，因此无法访问this，亦即无法访问data和method
  setup(){
    //定义响应式数据：数据变化，模板中渲染会自动刷新
    // const obj=reactive({
    //   userName:&#39;jack&#39;,
    // });
    //只定义一个变量,可以使用ref将变量定义为响应式
    let userName=ref(&#39;jack&#39;)
    console.log(userName);
    const change=()=> {
      userName.value=&#39;rose&#39;     //注意修改的是ref对象的value属性，但是在template中使用的时候不需要再加value
      console.log(userName);
    }

    return {userName,change}
  },
}
</script>

해결 방법

안됩니다. 참조가

import {ref} from "@vue/reactivity"

일 때 응답이 없지만

import {ref} from "vue"

vue3로 변경하면 됩니다. ref 및 반응성

우리는 ref 함수와 반응성 함수가 다음 작업에 사용된다는 것을 알고 있습니다. 데이터의 응답성을 달성합니다. 하지만 개발 시 ref와 반응성 중에서 어떻게 선택해야 할까요? Ref와 Reactive의 차이점에 대해 이야기 해 봅시다.

Review

Vue3 버전 이전에는 응답 데이터가 데이터 함수에 정의되었습니다.

<template>
  <h2>{{ title }}</h2>
</template>
 
<script>
  export default {
    data() {
      return {
        title: "Hello, Vue!"
      };
    }
  };
</script>

Vue2는 데이터의 모든 속성을 탐색하고 Object.defineProperty를 사용하여 각 속성을 getter/setter로 변환합니다. 종속성을 수집하기 위해 setter는 알림을 실행하고 업데이트 이벤트를 게시하는 데 사용됩니다.

Vue2는 구독-게시 모델의 중개자로서 각 속성에 대한 Dep 개체를 생성하여 종속성을 수집합니다. Vue는 이러한 종속성을 추적하고 액세스 및 수정 시 변경 사항을 알립니다.

Vue3

Vue3에서는 반응형 데이터를 생성하기 위해 ref와 반응성을 도입했습니다.

<template>
  <h2>{{ title }}</h2>
  <h3>{{ data.author }}</h3>
  <button @click=""changeTitle>修改title</button>
</template>
 
<script>
  import { ref, reactive, toRefs } from "vue";
  export default {
    setup() {
      const title = ref("Hello, Vue 3!");
      // 修改
      function changeTitle(){
        title.value == "Hello, Vue3!"
      }
 
      const data = reactive({
        author: "青年码农",
        age: "18"
      });
 
      return { title, data, changeTitle };
    }
  };
</script>

위 코드에서 차이점을 확인할 수 있을 것입니다. ref의 기능은 기본 데이터 유형을 응답형 데이터로 변환하는 것입니다. 기본 데이터 유형에는 String, Number, BigInt, Boolean, Symbol, Undefine 및 Null이 있습니다. 하지만 이상한 트릭이 있습니다. 즉, ref도 객체가 될 수 있다는 것입니다. 나중에 그것에 대해 이야기하겠습니다. 반응형의 기능은 객체를 반응형 객체로 변환하는 것입니다.

• ref:

ref의 기능은 기본 데이터 유형을 반응형 기능이 있는 데이터 유형으로 변환하는 것입니다.

const title = ref("Hello, Vue 3!");

ref는 매개변수를 수신하고 값 속성을 사용하여 객체에 래핑하여 반환합니다. 그런 다음 이 속성을 사용하여 반응형 변수의 값에 액세스하거나 변경할 수 있습니다. 예를 들어 위 코드에서는 count.value를 사용합니다. 값을 다음과 같이 수정하세요.

title.value = "Hello, Vue3!"

위에서 언급했듯이 ref는 객체 유형도 허용합니다

const data = ref({
    author: "青年码农",
    age: "18"
});

이것도 가능하지만 값을 할당할 때 약간 어색할 것입니다.

data.value.author = "nmgwap";

ref Reactive 원리는 Object.defineProperty()에 의존하므로 객체인 경우 Reactive를 사용하는 것이 좋습니다.

• reactive:

reactive는 객체의 반응 복사본을 반환하며, 이는 참조 응답성을 유지하면서 모든 깊은 참조를 풀어줍니다. 일반적으로 객체나 배열의 응답성을 달성하기 위해 이를 사용합니다.

const data = reactive({
    author: "青年码农",
    age: "18"
});

수정은 일반 객체와 다르지 않으며 뷰는 실시간으로 업데이트됩니다.

data.author = "nmgwap"

참고:

ref는 기본 데이터 유형용이고 반응형은 객체용입니다. 이 두 API는 공통 데이터를 할당하도록 설계되었습니다. 반응성(반응성)에 대한 유형입니다.

위 내용은 반응형 변수를 구축하기 위해 Vue3 ref의 실패를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!