This is the 7th day of my participation in the August Text Challenge.More challenges in August

Hello, I’m Joshua (public account). Enthusiastic to do open source, write articles. Objective To help college students, just entering the workplace partners can build their own front-end learning system as soon as possible. If you are confused about your study, please follow me and find me to communicate. I will reply you in real time.

Technology – Differences in creating data between VUe2.0 and VUe3.0

  • options api

    • Define a piece of data using vue2’s Options API
    • Access a piece of data in the vue2 Javascript field
    • In VUe2, the Template section accesses a piece of data

  • Composition API (VUe3)

    • ref()
    • Access the Ref() variable in JavaScript
    • In VUe3, the Template section accesses a piece of data
    • Reactive()
    • Get the value from the Reactive() variable
    • In VUe3, the Template section accesses a piece of data

  • There is no responsive data

  • summary

  • Under the dynamic hands

This article will show you how to create data using vue2’s Options API and how to create data using vue3’s Composition API

You’ll also learn how to create data using wrapper objects Ref and Reactive, when to use them, and why.

Finally, you’ll see the difference between creating data using vue2’s Options API and vue3’s Composition API

options api

Define a piece of data using vue2’s Options API

In the Options API introduced in Vue 2, one way to declare data is to add them to the JavaScript object returned by the data() function.

Export default {data() {return {name: null}}} export default {data() {return {name: null}}Copy the code

When we create data using options APIC, the data is reactive by default

What is the data response? The name data is reactive, which means it can be bound to HTML elements in the template.

The view is updated every time the data value changes and vice versa, which is also known as two-way data binding.

Access a piece of data in the vue2 Javascript field

If we want to access the name data anywhere within the component’s default export object, we can use the this keyword in the Options API.

// 在生命周期函数 mounted 中访问数据name
export default {
  ...
  mounted() {
    console.log(this.name);
  }
}
Copy the code

In VUe2, the Template section accesses a piece of data

Whenever we create data using the Options API, the data is not only reactive, but also available in the Vue template.

We can simply use double curly braces to access the name attribute between template tags — {{name}}

<template>
  <div>
    {{name}}
  </div>
</template>
Copy the code

In Vue 2, within the template template, only one parent element is allowed:

<template>
  <div>
    {{name}}
  </div>
</template>
Copy the code

In VUe2, this is not allowed:

<template>
  <div>
    {{name}}
  </div>
  <div>
    {{name}}
  </div>
</template>
Copy the code

It should look like this:

< the template > < div > / / a parent element < div > {{name}} < / div > < div > {{name}} < / div > < / div > < / template >Copy the code

Composition API (VUe3)

One of the great things about Vue 3 is that you can create reactive data directly using the Options API, as in the vue2 example above.

In addition, we can now use the Composition API to create very flexible data

There are two ways to create reactive data in Vue 3:

  • ref
  • reactive

ref()

In VUE3, what function do I need to import the corresponding package

<script> import { ref } from "vue"; Export default {setup() {// All your data and functions will exist in steup function}} </script>Copy the code

Using the Composition API, all data and functions are included in the setup() method of the default exported object:

<script>
  import { ref } from "vue";
  export default {
     setup() {
       let name = ref("");
     }
  } 
</script>
Copy the code

As you can see, the value of the name variable is an empty string wrapped in a ref object

So what is ref(alpha)?

Ref is a wrapper object that takes an internal value and returns a reactive and mutable REF object.

For example, the internal value of the variable name is an empty string “”, which can be obtained from the.value property of the ref object

Access the Ref() variable in JavaScript

To get the value associated with the name variable, we simply need to access its.value property

The ref() pair will have an attribute named.value that points to the internal value

<script>
  import { ref } from "vue";
  export default {
     setup() {
       let name = ref("Raja");
       name.value = Raja Tamil; // Set
       console.log(name.value) // Get
     }
  } 
</script>
Copy the code

Of course, if you want to set the value of the name variable (internal value), you also need to set it via.value

In VUe2, using the Options API, all data is available in the template immediately after creation.

However, in VUE3, using the Composition API, we have the option of explicitly exposing data and functions to the template rather than all of them

This means that we can create a variable that is only used in the setup function

Now we just need to expose the name variable as a property in the return value of the setup function

<script>
  import { ref } from "vue";
  export default {
     setup() {
       let name = ref("Raja");
       return {
          username: name
       }
     }
 } 
</script>
Copy the code

In VUe3, the Template section accesses a piece of data

As with vue2, we only need {{name}} to access the reactive data name in the template

<template>
   {{name}}
</template>
Copy the code

In Vue3, we no longer need a parent node to wrap all elements. Now we can have sibling div elements in template tags:

<template>
    <div> {{name}} </div>
    <div> {{name}} </div>
    <div> {{name}} </div>
</template>
Copy the code

Reactive()

Another way to create reactive data in the Composition API: Reactive ()

Why, you might wonder, are there two ways to create responsive data in VUe3?

  • Ref () is used for raw values, such as strings, numbers, etc
  • Reactive() is used for objects. It accepts an object and returns the original objectThe proxy agent.

In fact, ref can also be used for objects, source code is as follows:

// In the source code, the argument passed to ref() is determined to be an object. Reactive () const convert = (val) => shared.isObject(val)? reactive(val) : val;Copy the code

Let’s look at how to use reactive: Like ref, use reactive and pass a Javascript object to Reactive () as an initial value.

<script> import { reactive } from "vue"; Export default {setup() {let book = reactive({title: "The Best Vue 3 book ", price:19.99}); } } </script>Copy the code

Get the value from the Reactive() variable

We can access properties directly from the book variable, rather than from ref, which is.value:

<script> import { reactive } from "vue"; Export default {setup() {let book = reactive({title: "The Best Vue 3 book ", price:19.99}); console.log(book.title); console.log(book.price); } } </script>Copy the code

In VUe3, the Template section accesses a piece of data

Similar to the previous example, all we need to do is add this variable as an attribute to the JavaScript object returned by the setup() function

<script> import { reactive } from "vue"; Export default {setup() {let book = reactive({title: "The Best Vue 3 book ", price:19.99}); return { book } } } </script>Copy the code

To access this property in the template, use {{}} as usual:

<template>
  {{book.title}}
  {{book.price}}
</template>
Copy the code

To test the effect of responsiveness, we set a timer and, after 2 seconds, change the property on the book object:

<script>
  import { reactive } from "vue";
  export default {
     setup() {
       let book = reactive({title: "Vue 3 Book", price:29.99});

       setTimeout(() => {
          book.title = "Vue 3 is awesome";
          book.price = 19.99;
       }, 2000)

       return {
         book
       }
     }
 } 
</script>
Copy the code

After 2 seconds, we can see that the values on the view have changed, making it easy to see the reactive effect

There is no responsive data

Another benefit of VUe3 is that we can create private, non-responsive data when needed:

<script> import { reactive } from "vue"; Export default {setup() {let book = {title: "Vue 3 book ", price:29.99}; return { book } } } </script>Copy the code

summary

  • In VUe2 (Options API), all data returned by the data() function is responsive. In VUe3 (Composition API), data may or may not be declared responsive. Reactive data can be created using Reactive or REF
  • Template in VUe2 (Options API), the outermost layer must have a parent node in vue3 (Composition API), the outermost layer can not need the parent node to wrap

Under the dynamic hands

  • Follow me on GitHub @huangyangquang ⭐⭐
  • Welcome to follow my official account: Joshua, the front end upperclassman