This is the second day of my participation in the August Challenge. For details, see: August Challenge (already the second day).

The definition of the ref

Accepts an internal value and returns a responsive and variable REF object. The ref object has a single property that points to an internal value

The use of the ref

In VUE2, to make data responsive (data change -> view change -> data change) is to define a property in the data function, bound with v-Model. In Vue3, how to define responsive data in the setup?

The code below is for reference

    <template>
      <div>The use of the ref</div>
      <p>{{ count }} ----count</p>
      <p>{{ number }} ----number</p>
      <el-button @click="addCount" type="primary">Add the count</el-button>
      <el-button @click="addNumber" type="primary">Add the Number</el-button>
    </template>

<script>
/** * RefImpl/RefImpl/RefImpl/RefImpl/RefImpl/RefImpl/RefImpl/RefImpl/RefImpl/RefImpl/RefImpl

import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App".setup() {
    let count = 20;
    const number = ref(10);
    
    function addNumber() {
      number.value++;
      console.log("The addNumber function fires, and the number principle increments.",number);
    }
    function addCount() {
      count += 1
      console.log("The addCount function fires, and the addCount principle increments.",count);
    }
    return{ count, number, addNumber, addCount }; }});</script>

Copy the code

As I said before,setup is the entry point for all combinative-type apis, so as we used to do before, we defined a variable count in the function, and we returned the count variable by return, which is normally used in HTML view templates, so we changed the data by triggering the addCount function, Does the view change?

Use the usual defined variables

What about using the REF to define the data?

From the above code, in VUE3, to implement responsive data, you need to implement it through ref

Summary of ref usage

Conclusion: In VUE3, if you want to implement responsive data, you need to implement it through ref. If you want to operate the value of the refImpl object, you need to implement responsive data. Here, simple data types (string, number, Boolean, etc.) can also be operated on complex data types, such as groups and objects, but generally complex data types are operated. So, we're going to use reactive to define complex data types using refs, and we're actually going to do a layer of transformations internally and we're going to use reactive at the bottomCopy the code

The definition of reactive

Returns a responsive copy of the object

Reactive conversion is “deep” — it affects all nested properties. In an ES2015 Proxy-based implementation, the returned Proxy is not equal to the original object. You are advised to use only reactive proxy to avoid relying on original objects.

Reactive. Reactive. Reactive

Reactive is a layer of Proxy for target objects implemented through Proxy in ES2015. A Proxy object is returned through operation of target objects. In VUE3, complex reactive data is obtained through operation of Proxy objects, and reactive data will not change after operation of target objects

Pictured above,

The use of reactive

 <template>
  <div>The use of reactive</div>
  <h3>{{ userInfo.name }}</h3>
  <h3>{{ userInfo.age }}</h3>
  <h3>{{ userInfo.wife }}</h3>
  <el-button @click="updateUser" type="primary">Change the object</el-button>
</template>

<script>
/** * reactive: Returns a proxy object called the target object to turn complex data types into reactive data. Const proxy = reactive(obj); Reactive Proxy objects that receive a common object and then return that common object * Reactive conversion is "deep" : it affects all nested properties within the object * Internal es6-based Proxy implementations that operate on data within the source object through Proxy objects are reactive * */

import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "App".setup() {
    let obj = {
      name: "Xiao Ming".age: 20.wife: {
        name: "Little red".age: 18.cars: ["Mercedes"."BMW"."Tesla"],}};const userInfo = reactive(obj);
    let updateUser = () = > {
      userInfo.name = "Fat tiger";
      console.log('Trigger updateUser by changing the dummy object function',obj, userInfo);
    };
    let updateWife = () = > {
      obj.wife.name = "Kamei";
      console.log('Trigger updateWife by changing the true object function',obj, userInfo);
    };
    return{ userInfo, updateUser }; }});</script>

Copy the code

By looking at the figure and printing with the above code and the console, we can know that by using reactive package target object userInfo and proxy to return the proxy object userInfo, we can realize the responsive data change of Xiaoming and become bigger, while directly operating target object obj can achieve the content modification of target object. But can not achieve responsive data view changes, fat tiger’s daughter-in-law is still small red, not static incense

The end of the reactive

In VUE3, the composite API in the setup entry, reactive data is implemented by using reactive data. Reactive data is usually defined by using simple data types (numbers, strings, Boolean, etc.). Reactive data is usually defined by objects, arrays, and refs. But it will be converted to reactive. In order to distinguish the identification, we use ref to define the basic data type and reactive to define the complex data typeCopy the code

The next section,

Ref and reactive implement the principle of reactive data

> Record is not easy, hope to get your a small hand, like 👍 is my motivation to stick to it > come on together, if you understand wrong, also please correct, modify as soon as possible, thank youCopy the code