A new feature of vue3.0 is the combined api, setup.
This method accepts two parameters props and context two parameters.
One is the value received by the props component,
the other is an ordinary javascript object, you can use some vue method slots, attrs, emit, etc.,
because the setup is before the component is created, so you can’t access data, computed, methods, etc.
Props are used on the scaffold
because props are responsive, so we can’t directly deconstruct when we use es6 to deconstruct. We need to use toRef
<template>
<div>{
{
age}}</div>
</template>
import {
toRef } from 'vue'
export default{
name:'index',
props:{
name:String,
age:Number
},
setup(props){
// 不需要解构的时候
console.log(props.name)
//需要解构的时候
let {
name} = toRef(props);
console.log(name.value); //在这里就可以使用props里的值了
},
}
Use context on scaffolding
<template>
<div>{
{
age}}</div>
</template>
import {
toRef } from 'vue'
export default{
name:'index',
// setup(context){ // 不需要解构的时候
setup({
slots,emit}){
//需要解构的
// 不需要解构的时候
console.log(context.slots)
//需要解构的
console.log(slots);
},
}
Now we already know the basics and usage of setup. Then what is the meaning of this combined API. Does it work?
A simple understanding is to extract a public method or a certain function. Let other pages also refer to this method or a function.
Let's see how to write
the public method. Let's create a new file
funList.js
import {
ref} from 'vue'
export default function operation(age){
let num = ref(age)
const addAge = () =>{
num.value += 1;
}
const minus = () =>{
num.value -= 1;
}
return {
num,
addAge,
minus
}
}
Here is when to use it.
<template>
<div>{
{
num}}</div> //11
</template>
import funList from '@/api/funList' //在这边引入js
export default{
name:'index',
props:{
age:10,
},
setup(props){
const {
num,addAge,minus} = funList(props); //这边解构获取js抛出的值。
//在setup里也可以使用生命周期钩子，和监听属性watch，计算属性computed。
onMounted(){
addAge();} //再setup里使用mounted的话需要加上on: 前缀，像onMounted
let name = ref('lly');
watch('name',(newValue,oldValue) =>{
console.log(newValue);
});
let Number = ref(0);
computed(() =>{
Number.value+1});
Number.value++;
console.log(Number.value) // 1
console.log(twiceTheCounter.value) // 2
return {
num,
addAge,
minus
}
}
}
The public method is used above, and other pages can also use it. Of course, richer methods are also possible.
Of course, the life cycle and monitoring in the setup mentioned above can be used in the position of the public method. For example, let's modify the previous method to see.
import {
ref,watch} from 'vue'
export default function operation(age){
let num = ref(age)
const addAge = () =>{
num.value += 1;
}
const minus = () =>{
num.value -= 1;
}
watch('num',(newValue,odlValue) =>{
console.log(newValue);
})
return {
num,
addAge,
minus
}
}
The above are some basic uses of setup, and more powerful content will be expanded by yourself.
Using vue3.0 and setup on a single page
First, we first download the js of vue3.0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./src/vueglobal.js"></script>
</head>
<body>
<div id="app">
{
{num}}
<rets></rets>
</div>
</body>
</html>
<script>
let counter = {
setup(){
cosnt num = 10;
return {
num,
}
},
}
let app = Vue.createApp(counter);
//创建全局组件
app.component('rets',{
template:`<div>{
{num}}</div>`,
setup(){
const num = 20;
return {
num
}
},
data(){
return{
}
}
})
app.mount('#app')
</script>
The above is how to use vue3.0. Let's see how to write setup
let ref = Vue.ref;
let monuted = Vue.onMounted;
let watch = Vue.watch;
let counter = {
setup(){
let num = ref(10);
monuted(){
num++;
}
watch('num',(newValue,odlValue) =>{
console.log(newValue);
})
return {
num,
}
},
}
let app = Vue.createApp(counter);
app.mount('#app')