Some of the most important new features in VUE 3.0, such as the setup() function, reactive(), ref(), etc.

1. setup

The setup() function is a new attribute in VUe3 that is specifically provided for components. It provides a unified entry point for using vue3’s new Composition API features.

2. Execution timing

The setup function is executed after beforeCreate but before created

3. Receive props data

  1. Define the names of the parameters that the current component allows to be passed to the props:
props: {
  p1: String
}
Copy the code
  1. With the first parameter of the setup function, receive props data:
setup(props) {
    console.log(props.p1)
}
Copy the code

4. context

The second parameter to the setup function is a context object containing some useful properties that need to be accessed through this in vue 2.x. In vue 3.x, they are accessed as follows:

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }
}
Copy the code

Note: insetup()Cannot be accessed from the functionthis!!!!!!!!!!

Returns the same as this for Vue2.0

4. reactive

The Reactive () function receives a normal object and returns a reactive data object

5. reactive

The Reactive () function receives a normal object and returns a reactive data object.

The basic syntax is equivalent to the vue.Observable () function in vue 2.x, and the reactive() function in vue 3.x is used to create a reactive data object.

import { reactive } from '@vue/composition-api'
Copy the code

// Create a responsive data object with a state similar to that returned by data() in vue 2.x

const state = reactive({ count: 0 })
Copy the code

6. Define reactive data for use by the Template

Import reactive functions as needed:

Import {reactive} from '@vue/composition-api' call reactive() from setup() Setup () {// Create a reactive object const state = reactive({count: <p> The current count value is {{count}}</p>Copy the code

7. ref

The ref() function is used to create a responsive data object based on a given value. The return value of the ref() call is an object containing only one **. Value ** attribute:

Import {ref} from '@vue/composition-api' const count = ref(0) const count = ref(0) Console.log (count.value) // prints 0 // makes the value of count +1 count.value++ // prints count again Console. log(count.value) // Prints 1Copy the code

8. Access the reactive data created by ref in template

Create reactive data in Setup () :

import { ref } from '@vue/composition-api' setup() { const count = ref(0) return { count, name: Ref (' zs)}} in the template response type data access: < the template > < p > {{count}} - {{name}} < / p > < / template >Copy the code

!!!!!!!!! Note: The new ref overwrites the old ref, as shown in the following code:

Const c1 = ref(0) const state = reactive({c1}) // replace old ref c1 with new ref c2 state.c1 = c2 state.c1++ console.log(state.c1) // print 10 Console. log(c2.value) // prints 10 console.log(c1.value) // prints 0Copy the code