vue3에서 ref와 반응성을 사용하는 방법

1. ref

ref는 Vue3의 함수로, 일반 변수를 반응형 변수로 변환할 수 있습니다. . ref를 사용할 때 초기값을 전달해야 하며 ref는 이 초기값을 포함하는 객체를 반환합니다. ref 是 Vue3 中的一个函数，它可以将一个普通的变量转化为一个响应式变量。使用 ref 的时候，我们需要传入一个初始值，ref 会返回一个包含了这个初始值的对象。

使用 ref 的语法如下所示：

import { ref } from 'vue';
const count = ref(0);

在上面的代码中，我们创建了一个名为 count 的变量，它的初始值为 0。通过调用 ref 函数，我们将 count 变量转化为了一个 ref 对象。在组件中使用 count 的时候，我们需要通过 .value 来访问它的值,且ref.value = 可以修改它的值。但是当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。：

------------------

注意：在标签中使用无需加.value，在函数中使用必须要加.value

除此之外，ref 还可以用来监听 DOM 元素的变化：

<template>
  <div ref="myDiv">这是一个 DOM 元素</div>
</template>

<script>
  import { ref, onMounted } from &#39;vue&#39;;

  export default {
    setup() {
      const myDiv = ref(null);

      onMounted(() => {
        console.log(myDiv.value.innerHTML);
      });

      return {
        myDiv,
      };
    },
  };
</script>

在上面的代码中，我们创建了一个名为 myDiv 的 ref 对象，并将它赋值给了一个 div 元素。在组件的 setup 函数中，我们使用了 onMounted 钩子函数，在组件渲染完成之后，打印出了 myDiv 元素的 innerHTML。

二、reactive

reactive 是 Vue3 中的另一个 API，它可以将一个普通的对象转化为一个响应式对象。与 ref 不同的是，reactive 返回的是一个响应式的对象，而不是一个包含值的对象。我们可以通过访问响应式对象的属性来获取或修改它的值。

使用 reactive 的语法如下所示：

import { reactive } from 'vue';
const state = reactive({
  count: 0,
});

在上面的代码中，我们创建了一个名为 state 的响应式对象，它包含了一个名为 count 的属性，初始值为 0。

在组件中使用 state 的时候，我们可以像访问普通对象的属性一样访问它的属性：

<template>
  <div>{{ state.count }}</div>
</template>

除了访问属性之外，reactive 也可以对普通 JavaScript 对象或数组进行响应式处理，可以通过 reactive 将一个普通对象转化为响应式对象，从而实现对整个对象的响应式追踪，例如：

const obj = { a: 1, b: 2 };
const reactiveObj = reactive(obj);

// 响应式追踪
reactiveObj.a = 3;
console.log(obj.a); // 输出 3

reactive 还可以在嵌套对象和数组中创建响应式对象，例如：

const obj = { 
  a: 1, 
  b: { c: 2 }，
  d: [1, 2, 3]
};
const reactiveObj = reactive(obj);

// 响应式追踪
reactiveObj.b.c = 3;
reactiveObj.d.push(4);

reactive 还支持在嵌套对象中使用 toRefs 将响应式对象的属性转换为响应式引用，方便在模板中使用。例如：

const obj = reactive({ a: 1, b: { c: 2 } });
const { b } = toRefs(obj);

// 模板中使用
<template>
  <div>{{ b.c }}</div>
</template>

总之，reactive 除了访问属性之外还能处理整个对象或数组的响应式追踪，以及支持在嵌套对象中使用 toRefs 方便在模板中使用。

三、ref和reactive的使用对比

1.ref的使用方法

ref创建的变量可以通过.value来获取和修改其值。例如：

import { ref } from 'vue'

// 创建ref
const count = ref(0)

// 获取ref的值
console.log(count.value) // 输出 0

// 修改ref的值
count.value = 1
console.log(count.value) // 输出 1

2. reactive的使用方法

reactive

ref를 사용하는 구문은 다음과 같습니다. 🎜

import { reactive } from 'vue'

// 创建reactive对象
const obj = reactive({
  count: 0
})

// 获取reactive对象的属性值
console.log(obj.count) // 输出 0

// 修改reactive对象的属性值
obj.count = 1
console.log(obj.count) // 输出 1

🎜위 코드에서는 초기값이 0인 count라는 변수를 만들었습니다. ref 함수를 호출하여 count 변수를 ref 개체로 변환합니다. 구성 요소에서 count를 사용할 때 .value를 통해 해당 값에 액세스해야 하며 ref.value =는 해당 값을 수정할 수 있습니다. 그러나 ref가 템플릿의 최상위 속성으로 액세스되면 자동으로 "래핑 해제"되므로 .value를 사용할 필요가 없습니다. ：🎜rrreee🎜참고: 태그에 사용할 때는 .value를 추가할 필요가 없지만, 함수에 사용할 때는 .value를 추가해야 합니다🎜🎜또한 >ref는 DOM 요소의 변경 사항을 모니터링하는 데에도 사용할 수 있습니다. 🎜rrreee🎜위 코드에서는 <code>myDiv라는 이름의 ref 개체를 생성하고 할당됨을 할당합니다. div 요소에 추가합니다. 컴포넌트의 setup 함수에서는 onMounted 후크 함수를 사용합니다. 컴포넌트 렌더링이 완료된 후 myDiv의 요소가 인쇄됩니다.innerHTML. 🎜🎜2.active🎜🎜reactive는 Vue3의 또 다른 API로, 일반 객체를 반응형 객체로 변환할 수 있습니다. ref와 달리 reactive는 값을 포함하는 객체가 아닌 반응형 객체를 반환합니다. 우리는 반응형 객체의 속성에 접근하여 그 값을 얻거나 수정할 수 있습니다. 🎜🎜Reactive를 사용하는 구문은 다음과 같습니다. 🎜rrreee🎜위 코드에서 count 속성이라는 개체를 포함하는 state라는 반응형 개체를 생성합니다. 초기값은 0입니다. 🎜🎜구성 요소에서 state를 사용하면 일반 개체의 속성과 마찬가지로 해당 속성에 액세스할 수 있습니다. 🎜rrreee🎜속성에 액세스하는 것 외에도 reactive도 가능합니다. 일반적인 JavaScript 객체 또는 배열의 반응형 처리에서 reactive를 사용하여 일반 객체를 반응형 객체로 변환함으로써 전체 객체의 반응형 추적을 달성할 수 있습니다. 예: 🎜rrreee🎜reactive도 사용할 수 있습니다. 예를 들어 중첩된 개체 및 배열에 반응형 개체 만들기에서 🎜rrreee🎜reactive는 템플릿에서 쉽게 사용할 수 있도록 반응형 개체의 속성을 반응형 참조로 변환하기 위해 중첩된 개체의 toRefs 사용도 지원합니다. 예: 🎜rrreee🎜간단히 말하면 reactive는 속성 액세스 외에도 전체 객체 또는 배열의 반응형 추적을 처리할 수 있으며 중첩 객체에서 toRefs 사용을 지원합니다. 템플릿에 사용됩니다. 🎜🎜3. ref와 반응형 사용 비교🎜

1. ref 사용 방법

🎜 ref로 생성된 변수는 .value를 통해 얻을 수 있습니다. code> 해당 값을 수정합니다. 예: 🎜rrreee<h4 id="반응형-사용-방법">2. 반응형 사용 방법</h4>🎜<code>reactive 생성된 객체는 구조 분해 할당을 통해 해당 속성 값을 얻고 수정해야 합니다. 예: 🎜rrreee

위 내용은 vue3에서 ref와 반응성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!