preface
提示：Vue3.2 版本开始才能使用语法糖！
在 Vue3.0 中变量必须 return 出来，template中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return，template 便可直接使用，非常的香啊！
提示：以下是本篇文章正文内容，下面案例可供参考
1. How to use setup syntax sugar
只需在 script 标签上写上setup
The code is as follows (example):
<template>
</template>
<script setup>
</script>
<style scoped lang="less">
</style>
2. Use of data
由于 setup 不需写 return，所以直接声明数据即可
The code is as follows (example):
<script setup>
import {
ref,
reactive,
toRefs,
} from 'vue'
const data = reactive({
patternVisible: false,
debugVisible: false,
aboutExeVisible: false,
})
const content = ref('content')
//使用toRefs解构
const { patternVisible, debugVisible, aboutExeVisible } = toRefs(data)
</script>
3. Use of method method
The code is as follows (example):
<template >
<button @click="onClickHelp">系统帮助</button>
</template>
<script setup>
import {reactive} from 'vue'
const data = reactive({
aboutExeVisible: false,
})
// 点击帮助
const onClickHelp = () => {
console.log(`系统帮助`)
data.aboutExeVisible = true
}
</script>
4. Use of watchEffect
The code is as follows (example):
<script setup>
import {
ref,
watchEffect,
} from 'vue'
let sum = ref(0)
watchEffect(()=>{
const x1 = sum.value
console.log('watchEffect所指定的回调执行了')
})
</script>
5. Use of watch
The code is as follows (example):
<script setup>
import {
reactive,
watch,
} from 'vue'
//数据
let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
// 两种监听格式
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum或msg变了',newValue,oldValue)
},{immediate:true})
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job变化了',newValue,oldValue)
},{deep:true})
</script>
6. Use of computed computing attributes
There are two ways to write computed computing attributes (abbreviated and full writing considering reading and writing)
The code is as follows (example):
<script setup>
import {
reactive,
computed,
} from 'vue'
//数据
let person = reactive({
firstName:'小',
lastName:'叮当'
})
// 计算属性简写
person.fullName = computed(()=>{
return person.firstName + '-' + person.lastName
})
// 完整写法
person.fullName = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
</script>
7. Use of props parent-child value transfer
The subcomponent code is as follows (example):
<template>
<span>{{props.name}}</span>
</template>
<script setup>
import { defineProps } from 'vue'
// 声明props
const props = defineProps({
name: {
type: String,
default: '11'
}
})
// 或者
//const props = defineProps(['name'])
</script>
The parent component code is as follows (example):
<template>
<child :name='name'/>
</template>
<script setup>
import {ref} from 'vue'
// 引入子组件
import child from './child.vue'
let name= ref('小叮当')
</script>
8. Use of emit parent-passed values
The subcomponent code is as follows (example):
<template>
<a-button @click="isOk">
确定
</a-button>
</template>
<script setup>
import { defineEmits } from 'vue';
// emit
const emit = defineEmits(['aboutExeVisible'])
/**
* 方法
*/
// 点击确定按钮
const isOk = () => {
emit('aboutExeVisible');
}
</script>
The parent component code is as follows (example):
<template>
<AdoutExe @aboutExeVisible="aboutExeHandleCancel" />
</template>
<script setup>
import {reactive} from 'vue'
// 导入子组件
import AdoutExe from '../components/AdoutExeCom'
const data = reactive({
aboutExeVisible: false,
})
// content组件ref
// 关于系统隐藏
const aboutExeHandleCancel = () => {
data.aboutExeVisible = false
}
</script>
9. Get the subcomponent ref variable and defineExpose exposure
That is, the method in vue2 is to obtain the ref of a child component and directly control the child component methods and variables in the parent component.
The subcomponent code is as follows (example):
<template>
<p>{{data }}</p>
</template>
<script setup>
import {
reactive,
toRefs
} from 'vue'
/**
* 数据部分
* */
const data = reactive({
modelVisible: false,
historyVisible: false,
reportVisible: false,
})
defineExpose({
...toRefs(data),
})
</script>
The parent component code is as follows (example):
<template>
<button @click="onClickSetUp">点击</button>
<Content ref="content" />
</template>
<script setup>
import {ref} from 'vue'
// content组件ref
const content = ref('content')
// 点击设置
const onClickSetUp = ({ key }) => {
content.value.modelVisible = true
}
</script>
<style scoped lang="less">
</style>
10. Use of routing useRoute and useRouter
The code is as follows (example):
<script setup>
import { useRoute, useRouter } from 'vue-router'
// 声明
const route = useRoute()
const router = useRouter()
// 获取query
console.log(route.query)
// 获取params
console.log(route.params)
// 路由跳转
router.push({
path: `/index`
})
</script>
11. Use of store warehouse
The code is as follows (example):
<script setup>
import {useStore} from 'vuex' import {num} from '../store/index' const store =
useStore(num) // 获取Vuex的state console.log(store.state.number) //
获取Vuex的getters console.log(store.state.getNumber) // 提交mutations
store.commit('fnName') // 分发actions的方法 store.dispatch('fnName')
</script>
12. Support from await
You can use await directly in setup syntax sugar. You don't need to write async, setup will automatically become async setup
The code is as follows (example):
<script setup>
import Api from '../api/Api' const data = await Api.getData()
console.log(data)
</script>
13. Provide and inject ancestral values
The parent component code is as follows (example):
<template>
<AdoutExe />
</template>
<script setup>
import { ref,provide } from 'vue'
import AdoutExe from '@/components/AdoutExeCom'
let name = ref('Jerry')
// 使用provide
provide('provideState', {
name,
changeName: () => {
name.value = '小叮当'
}
})
</script>
The subcomponent code is as follows (example):
<script setup>
import {inject} from 'vue' const provideState = inject('provideState')
provideState.changeName()
</script>
summary
Tip: Here is a summary of the article:
For example: The above is a summary of how I found a blog or something to learn setup syntax sugar. It can be achieved if I wrote something wrong or my method is used incorrectly, everyone tells me, I will correct it immediately! If you think the articles I wrote can be very practical, you are welcome to like, collect and pay attention to bloggers and not get lost! If you are not busy with work, you will continue to update it! Welcome everyone to read other articles by Tinker Bell ~