The ref we talked about in the previous section is only a response to a single variable.

Vue3.0 also provides us with a reactive function for object responses.

The Reactive function creates a Reactive object.

A: Reactive function

In my opinion, reactive functions are VUE3.0’s alternative to Data in VUE2.0, so I don’t recommend writing methods to Reactive here.

Reactive only writes data.

1: the introduction of

import {
    ref,
    reactive,
} from "vue";
Copy the code

Example 2:

I use the code we tested in the previous section to illustrate the differences between ref and Reactive.

Helloworld.vue

<template>
  <h1>{{ msg }}</h1><! --<button @click="count++">count is: {{ count }}</button>-- > <! -- Template syntax needs to be called with the data. property --><button @click="count++">count is: {{ data.count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <button @click="clickMe()">Let me play window</button>
</template>
 
<script lang='ts'>
import {
    ref,
    reactive
} from "vue";
export default {
  name: 'HelloWorld'.props: {
    msg: String
  },
  // Setup instead of data
  // Since I'm using typescript here, I need to type the parameters
  setup(props:any,context:any){
    // ref defines reactive data
    // let count = ref(0); 
 
    // reactive creates reactive objects
    let data = reactive({
      // Define reactive data
      count:0});const clickMe = () = > {
      // For variables bound with the ref keyword, value must be used when assigning
      // count.value++;
      // Objects are used when calling reactive to define the parameters of the object. To invoke the
      data.count++;
      alert('hi');
    }
    return {
      data,
      clickMe
    }
  },
}
</script>
Copy the code

3: There are mainly the following differences:

1: calls in JS need to use the data. property to assign values to use.

2: In VUE template syntax, also need to use the data. property to assign values to use.

Two: toRefs function

The template syntax requires using the data. property to invoke the property display, which is relatively cumbersome.

We could have used the extension operator in ES6 to deconstruct it, but let’s just say that after deconstructing it, it no longer has responsive properties.

VUE3.0 provides us with the toRefs function to solve this problem.

1: the introduction of

import {
    ref,
    reactive,
    toRefs
} from "vue";
Copy the code

Example 2:

Helloworld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button><! The template syntax is called using the data. property (reactive only) --> <! --<button @click="count++">count is: {{ data.count }}</button> -->
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <button @click="clickMe()">Let me play window</button>
</template>
 
<script lang='ts'>
import {
    ref,
    reactive,
    toRefs
} from "vue";
export default {
  name: 'HelloWorld'.props: {
    msg: String
  },
  // Setup instead of data
  // Since I'm using typescript here, I need to type the parameters
  setup(props:any,context:any){
    // ref defines reactive data
    // let count = ref(0); 
 
    // reactive creates reactive objects
    let data = reactive({
      // Define reactive data
      count:0});const clickMe = () = > {
      // For variables bound with the ref keyword, value must be used when assigning
      // count.value++;
      // Objects are used when calling reactive to define the parameters of the object. To invoke the
      data.count++;
      alert('hi');
    }
 
    // Wrap the data object with the toRefs function to ensure that it remains responsive after being deconstructed using the extension operator
    let param = toRefs(data);
    return {
      // data,. param, clickMe } }, }</script>
Copy the code

The complete code has been given, and you may need to try it out yourself.

For good suggestions, please enter your comments below.

Welcome to my blog guanchao.site

Welcome to applets: