How to use ref and reactive in vue3

1. ref

ref is a function in Vue3, which can convert an ordinary variableConvert to a responsive variable. When using ref, we need to pass in an initial value, and ref will return an object containing this initial value.

The syntax for using ref is as follows:

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

In the above code, we create a variable named count, which The initial value is 0. By calling the ref function, we convert the count variable into a ref object. When using count in a component, we need to access its value through .value, and ref.value = can modify its value. But when ref are accessed as top-level properties in templates, they are automatically "unwrapped", so there is no need to use .value. :

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

Note: There is no need to add .value when using it in a tag, but you must add .value

when using it in a function. In addition, , ref can also be used to monitor changes in DOM elements:

<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>

In the above code, we created a ref# named myDiv ## object and assign it to a div element. In the setup function of the component, we use the onMounted hook function. After the component is rendered, the innerHTML## of the myDiv element is printed out. #. 2. reactive

reactive

is another API in Vue3, which can convert a ordinary object into a response Formula object. Unlike ref, reactive returns a reactive object rather than an object containing a value. We can get or modify the value of a reactive object by accessing its properties. The syntax for using reactive is as follows:

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

In the above code, we create a reactive object named

state

, which contains a name It is the attribute of count, and the initial value is 0. When using

state

in a component, we can access its properties just like the properties of a normal object: <pre class="brush:js;">&lt;template&gt; &lt;div&gt;{{ state.count }}&lt;/div&gt; &lt;/template&gt;</pre>In addition to accessing properties,

reactive

can also perform responsive processing on ordinary JavaScript objects or arrays. You can convert an ordinary object into a responsive object through reactive to achieve responsive tracking of the entire object, for example: <pre class="brush:js;">const obj = { a: 1, b: 2 }; const reactiveObj = reactive(obj); // 响应式追踪 reactiveObj.a = 3; console.log(obj.a); // 输出 3</pre>reactive You can also create reactive objects in nested objects and arrays, for example:

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

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

reactive also supports using toRefs in nested objects to convert the properties of reactive objects into reactive references. , convenient for use in templates. For example:

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

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

In summary,

reactive

can handle reactive tracking of entire objects or arrays in addition to accessing properties, as well as support for using toRefs in nested objects. Convenient for use in templates. 3. Comparison of the use of ref and reactive

1. How to use ref

ref

The variables created can be passed.valueTo obtain and modify its value. For example: <pre class="brush:js;">import { ref } from &amp;#39;vue&amp;#39; // 创建ref const count = ref(0) // 获取ref的值 console.log(count.value) // 输出 0 // 修改ref的值 count.value = 1 console.log(count.value) // 输出 1</pre>2. How to use reactive

reactive

The object created needs to obtain and modify its attribute values ​​​​through destructuring assignment. For example: <pre class="brush:js;">import { reactive } from &amp;#39;vue&amp;#39; // 创建reactive对象 const obj = reactive({ count: 0 }) // 获取reactive对象的属性值 console.log(obj.count) // 输出 0 // 修改reactive对象的属性值 obj.count = 1 console.log(obj.count) // 输出 1</pre>

The above is the detailed content of How to use ref and reactive in vue3. For more information, please follow other related articles on the PHP Chinese website!