An article to talk about ref, toRef, toRefs in vue3

This article will give you an in-depth talk about the use of ref, toRef, and toRefs in the vue3 project. I hope it will be helpful to everyone!

1. The ref

ref function can wrap simple data types into responsive data ( Complex types are also available). Note that when manipulating values ​​in JS, you need to add the .value attribute. You can use it normally in the template.
For example:

• ref wraps basic type data
  App.vue

<template>
  <div>
      <div>{{ name }}</div>
      <button>修改数据</button>
  </div></template><script>
  import { ref } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const name = ref(&#39;初映&#39;)
          const updateName = () => {
              name.value = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

Visible writing and reactive() The same, but you need to add an additional .value when writing in js. [Related recommendations: vuejs video tutorial, web front-end development]

• ref packaging complex class type data
  Note: ref can also wrap complex data The data type is responsive data. It is generally recommended to use ref when the data type is not determined, such as data returned by the backend.

<template>
    <div>
        <div>{{ data?.name }}</div>
        <button>修改数据</button>
    </div></template><script>
    import { ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右边的对象可能是后端返回的
                data.value = {
                    name: &#39;初映&#39;,
                }
            }, 1000)
            const updateName = () => {
                data.value.name = &#39;CY&#39;
            }
            return { data, updateName }
        },
    }</script>

• How to choose?
  ref() and reactive() are two responsive APIs provided in Vue.js3.0.
  ref() is mainly used to create a responsive data. It will convert an ordinary JavaScript object into a responsive object, so that changes in the data can be tracked by the Vue instance. When the data changes, Vue Related views are automatically updated. Responsive data created by ref() can be accessed and modified through the .value attribute.
  reactive() is mainly used to create a reactive object, which can be used as a state object containing multiple values, and is usually used to manage complex states. It can convert an ordinary JavaScript object into a responsive object, and supports nested properties. Even if the nested properties change, they will be tracked by the Vue instance. When any property in the responsive object changes, Vue will automatically update the related view.
  When you clearly know that the object you need to wrap is an object, it is recommended to use reactive. In other cases, use ref.
  After Vue3.2, it is more recommended to use ref, and the performance has been greatly improved.

2. toRef

The role of toRef function: Convert a property in the responsive object to a separate responsive data, and The converted value is related to the previous one (the ref function can also be converted, but the value is not related).
Let’s look at the following example first:

<template>
  <div>
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { obj, updateName }
      },
  }</script>

Writing this way can also change the data into responsive data, but it brings two problems:

• Question 1: obj. must be used in the template to obtain data, which is troublesome.

• Problem 2: Although only name and age are used in the template, the entire obj is exported. This is unnecessary and a waste of performance.

<template>
  <div>
      <h2>name: {{ name }} </h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive,toRef  } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const name = toRef(obj, &#39;name&#39;)
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

In this way, we can put the data we need into the return, which saves performance and writing in the template, and is a bit more like 'import on demand'

3. torefs

The role of toRefs function: convert all properties in the responsive object into separate responsive data, and the converted value is related to the previous one .

<template>
  <div>
      <h2>{{ name }} {{ age }}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive, toRefs } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 10,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }</script>

toRefs will return all our responsive data. Then just use the data name directly. Remember to add...oh

according to. Without further ado, let’s learn how to use these three methods and the differences with reactive.

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of An article to talk about ref, toRef, toRefs in vue3. For more information, please follow other related articles on the PHP Chinese website!