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
- Define the names of the parameters that the current component allows to be passed to the props:
props: {
p1: String
}
Copy the code
- 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