站長資訊網(wǎng)Vue中怎么使用語法糖？下面本篇文章帶大家了解一下語法糖，并介紹一下Vue3.2語法糖的使用方法，希望對大家有所幫助！
前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
一. 概述
在Vue2時期，組件里定義的各類變量、方法、計算屬性等是分別存放到data、methods、computed等選項里，這樣編寫的代碼不便于后期的查閱，查找一個業(yè)務(wù)邏輯需要在各個選項來回切換。vue3.0組合式APIsetup函數(shù)的推出就是為了解決這個問題，它讓我們的邏輯關(guān)注點(diǎn)更加集中，語法也更加精簡，但是當(dāng)我們在使用vue3.0的語法就構(gòu)建組件的時候，總是需要把外面定義的方法變量必須要return出去才能在<template>，比較麻煩一些. vue3.2語法糖的出現(xiàn)以及一些新增的API，讓我們的代碼進(jìn)一步簡化?！緦W(xué)習(xí)視頻分享：vue視頻教程、web前端視頻】
什么是語法糖？
語法糖（英語：Syntactic sugar）是由英國計算機(jī)科學(xué)家彼得·蘭丁發(fā)明的一個術(shù)語，指計算機(jī)語言中添加的某種語法，這種語法對語言的功能沒有影響，但是更方便程序員使用。語法糖讓程序更加簡潔，有更高的可讀性。
Vue3.2語法糖
來看下vue3.0與vue3.2的單文件組件（SFC，即.vue 文件）的結(jié)構(gòu)對比
vue3.0組件
<template> <div> </div> </template> <script> export default { components: { }, props: { }, setup () { return {} } } </script> <style scoped> </style>
vue3.2組件
<template> <MyTestVue :title="title" @click="changeTitle" /> </template> <script setup> import MyTestVue from './MyTest.vue'; import { ref } from 'vue'; const title = ref('測試一下') const changeTitle = () => { title.value = 'Hello,World' } </script> <style scoped> </style>
-
對比
vue3.0與vue3.2版本的組件模板，最主要的變化是3.2中沒有了setup函數(shù)，而是把它放在了script標(biāo)簽中。 -
我們定義的屬性和方法也不用在return中返回，直接就可以用在模板語法中 …
這些是直觀的變化，接下來我們學(xué)習(xí)具體的用法。
二.使用介紹
1.組件注冊
vue3.0中使用組件，需要使用 components 選項來顯式注冊：
<script> import ComponentA from './ComponentA.js' export default { components: { ComponentA }, setup() { // ... } } </script>
vue3.2 <script setup> 的單文件組件中，導(dǎo)入的組件可以直接在模板中使用，組件會自動注冊，并且無需指定當(dāng)前組件的名字，它會自動以文件名為主，也就是不用再寫name屬性了。
<script setup> import ComponentA from './ComponentA.vue' </script> <template> <ComponentA /> </template>
2.Props 聲明
在vue3.0中，prop可以使用props選項來聲明
<script> export default { props: ['foo'], // 或者用這種方式指類型與默認(rèn)值 // props: { // foo:{ // type: String, // default: '' // }, // }, setup(props) { // setup() 接收 props 作為第一個參數(shù) console.log(props.foo) } } </script>
vue3.2組件中，props可以使用defineProps()宏來聲明
<script setup> const props = defineProps(['foo']) // 或者 const propsOther = defineProps({ title: String, likes: Number }) console.log(props.foo) </script>
注意事項：所有的 props 都遵循著單向綁定原則，props 因父組件的更新而變化，自然地將新的狀態(tài)向下流往子組件，而不會逆向傳遞，這意味著你不應(yīng)該在子組件中去更改一個 prop。
3.計算屬性
我們一般使用計算屬性來描述依賴響應(yīng)式狀態(tài)的復(fù)雜邏輯。說白了就是這個計算屬性的值依賴于其他響應(yīng)式屬性的值，依賴的屬性發(fā)生變化，那么這個計算屬性的值就會進(jìn)行重新計算。
<script setup> import { ref, computed } from 'vue' const firstName = ref('John') const lastName = ref('Doe') const fullName = computed({ // getter get() { return firstName.value + ' ' + lastName.value }, // setter set(newValue) { // 注意：我們這里使用的是解構(gòu)賦值語法 [firstName.value, lastName.value] = newValue.split(' ') } }) </script>
當(dāng)調(diào)用fullName.value = 'John Doe'時，setter會被調(diào)用，而firstName 和 lastName會被更新，在vue3.2中我們可以直接在<template>標(biāo)簽中使用它，不在需要return返回。
- 不要在計算函數(shù)中做異步請求或者更改 DOM！
- 一個計算屬性僅會在其響應(yīng)式依賴更新時才重新計算，如果他依賴的是個非響應(yīng)式的依賴，及時其值發(fā)生變化，計算屬性也不會更新。
- 相比于方法而言，計算屬性值會基于其響應(yīng)式依賴被緩存，一個計算屬性僅會在其響應(yīng)式依賴更新時才重新計算
4. watch
在組合式API中，我們可以使用watch函數(shù)在每次響應(yīng)式狀態(tài)發(fā)生變化時觸發(fā)回調(diào)函數(shù),watch的第一個參數(shù)可以是不同形式的“數(shù)據(jù)源”：它可以是一個 ref(包括計算屬性)、一個響應(yīng)式對象、一個 getter 函數(shù)、或多個數(shù)據(jù)源組成的數(shù)組：watch()是懶執(zhí)行的：僅當(dāng)數(shù)據(jù)源變化時，才會執(zhí)行回調(diào)，例如：
<script setup> import { ref,watch } from 'vue'; const props = defineProps({ title: String, itemList: { type: Array, default: () => [{ text: 'title', value: 0 }] } }) watch(() => props.itemList.length,(newValue,oldValue) => { console.log('newValue===',newValue); console.log('oldValue===',oldValue); }) </script>
這里監(jiān)聽
props.itemList.length，當(dāng)傳入的itemList數(shù)量發(fā)生變化時，后面的回調(diào)方法會被調(diào)用。當(dāng)然wacth()還有第三個可選參數(shù)：否開啟深監(jiān)聽(deep), 如果這里這樣寫:
<script setup> import { ref,watch } from 'vue'; ... watch(() => props.itemList,(newValue,oldValue) => { console.log('newValue===',newValue); console.log('oldValue===',oldValue); }) </script>登錄后復(fù)制當(dāng)傳入的
itemList數(shù)量發(fā)生改變時，回調(diào)函數(shù)不會觸發(fā)，正確的寫法是加上其第三個參數(shù)deep:true
<script setup> import { ref,watch } from 'vue'; ... watch(() => props.itemList,(newValue,oldValue) => { console.log('newValue===',newValue); console.log('oldValue===',oldValue); },{deep:true}) </script>
watch也可以同時監(jiān)聽多個屬性：
<script setup> import { ref,watch } from 'vue'; const props = defineProps({ title: String, itemList: { type: Array, default: () => [{ text: 'title', value: 0 }] } }) // 同時監(jiān)聽多個屬性 watch(() => [props.itemList,props.title],(newValue,oldValue) => { console.log('newValue===',newValue); console.log('oldValue===',oldValue); },{deep:true}) </script>
5. watchEffect()
與watch()的懶執(zhí)行不同的是，watchEffect()會立即執(zhí)行一遍回調(diào)函數(shù)，如果這時函數(shù)產(chǎn)生了副作用，Vue會自動追蹤副作用的依賴關(guān)系，自動分析出響應(yīng)源。上面的例子可以重寫為：
<script setup> ... watchEffect(() => { console.log('itemList===',props.itemList.length); console.log('title===',props.title); }) </script>
這個例子中，回調(diào)會立即執(zhí)行。在執(zhí)行期間，它會自動追蹤props.itemList.length作為依賴（和計算屬性的行為類似）。每當(dāng)傳入的itemList.length變化時，回調(diào)會再次執(zhí)行。
如果要清除watchEffect()的的監(jiān)聽，只需要顯示的調(diào)用watchEffect()的返回函數(shù)就可以了，例如：
<script setup> ... const stopEffect = watchEffect(() => { console.log('itemList===',props.itemList.length); console.log('title===',props.title); }) stopEffect() </script>
watch 只追蹤明確偵聽的數(shù)據(jù)源。它不會追蹤任何在回調(diào)中訪問到的東西。另外，僅在數(shù)據(jù)源確實(shí)改變時才會觸發(fā)回調(diào)。我們能更加精確地控制回調(diào)函數(shù)的觸發(fā)時機(jī)。 watchEffect，則會在副作用發(fā)生期間追蹤依賴。它會在同步執(zhí)行過程中，自動追蹤所有能訪問到的響應(yīng)式屬性。
6.組件的事件調(diào)用
6.1 子組件調(diào)用父組件的方法
vue3.0中如果我們的子組件觸發(fā)父組件的方法，我們的做法:
子組件 <script> export default { emits: ['inFocus', 'submit'], setup(props, ctx) { ctx.emit('submit',params) } } // 或者將可以將emit解構(gòu)使用 export default { setup(props,{emit}) { emit('submit',params) } } </script> 父組件 <template> <Children @submit="submitHandel"/> </div> </template> <script> export default { name: 'TodoItem', setup(props, { emit }) { const submitHandel = () => { console.log('子組件調(diào)用了父組件的submitHandel方法'); } return { submitHandel, } } }; </script>
vue3.2語法糖中,子組件要觸發(fā)的事件需要顯式地通過 defineEmits() 宏來聲明
子組件 <script setup> const emit = defineEmits(['inFocus', 'submit']) function buttonClick(parmas) { emit('submit', parmas) } </script> 父組件 <template> <Children @submit="submitHandel"/> </div> </template> <script setup> const submitHandel = () => { console.log('子組件調(diào)用了父組件的submitHandel方法'); } }; </script>
6.2 父組件調(diào)用子組件的方法或是屬性
vue3.0中如果父組件觸發(fā)子組件的方法或是屬性，直接在return函數(shù)中返回就可以，數(shù)據(jù)都是默認(rèn)隱式暴露給父組件的。
<script> // 子組件 setup(props, { emit }) { const isShow = ref(false) // 父組件調(diào)用這個方法 const showSubComponent = () => { isShow.value = !isShow.value } return { // return 返回 showSubComponent, } } </script>
父組件中通過ref獲取到子組件，并對子組件暴露的方法進(jìn)行訪問
父組件 <template> <div class="todo-list"> <TodoItemVue :itemList="itemList" @clickItemHandel="clickItemHandel" ref="todoItemVueRef" /> </div> </template> <script> import { ref } from 'vue'; export default { setup(props, { emit }) { //獲取子組件ref const todoItemVueRef = ref(null) // 調(diào)用子組件的方法 const callItemFuncHandel = () => { todoItemVueRef.value.showSubComponent() } return { todoItemVueRef } } }; </script>
vue3.2語法中，父組件的調(diào)用方式相同，子組件通過defineExpose()將方法或是屬性暴露出去
子組件 <script setup> const isShow = ref(false) // 父組件調(diào)用這個方法 const showSubComponent = () => { isShow.value = !isShow.value } // 通過defineExpose將方法暴露出去 defineExpose({ showSubComponent }) </script> 父組件 <template> <div class="todo-list"> <TodoItemVue :itemList="itemList" @clickItemHandel="clickItemHandel" ref="todoItemVueRef" /> </div> </template> <script setup> import { ref } from 'vue'; //獲取子組件ref const todoItemVueRef = ref(null) // 調(diào)用子組件的方法 const callItemFuncHandel = () => { todoItemVueRef.value.showSubComponent() } </script>
7.Vuex的使用
在vue3.0與vue3.2中創(chuàng)建Vuex沒有區(qū)別，只不過在<template>模板中使用Vuex的store有細(xì)微差別。
import { createStore } from 'vuex'; import { ADD_ITEM_LIST, REDUCE_ITEM_LIST, CHANGE_ITEM_LIST_ASYNC } from './constants'; export default createStore({ state: { itemList: [ { text: 'Learn JavaScript', done: true }, { text: 'Learn Vue', done: false }, { text: 'Build something awesome', done: false }, ], }, getters: { doneItemList: (state) => state.itemList.filter((todo) => todo.done), }, mutations: { // 使用ES2015風(fēng)格的計算屬性命名功能 來使用一個常量作為函數(shù)名 [ADD_ITEM_LIST](state, item) { console.log('增加數(shù)據(jù)', item); state.itemList.push(item); }, [REDUCE_ITEM_LIST](state) { console.log('減少數(shù)據(jù)'); state.itemList.pop(); }, }, actions: { [CHANGE_ITEM_LIST_ASYNC]({ commit, state }, todoItem) { /// 模擬網(wǎng)絡(luò)請求 setTimeout(() => { commit(ADD_ITEM_LIST, todoItem); console.log('state===', state); }, 1000); }, }, modules: { }, });
在vue3.0中我們一般在return中對store.state進(jìn)行解構(gòu),然后可以直接在<template>中使用state中的值
<template> <div class="todo-item"> <ol> <li v-for="(item,index) in itemList" :key="index" class="todos" @click="clickItem(index)"> {{ item.text }} </li> </ol> </div> </template> <script> export default { name: 'TodoItem', setup(props, { emit }) { return { // 對store.state進(jìn)行解構(gòu) ...store.state, clickItem, count, isShow, showSubComponent, } } }; </script>
vue3.2中沒有了return，需要我們顯示的獲取要使用的stare的值
<template> <div class="todo-item"> <ol> <li v-for="(item,index) in itemList" :key="index" class="todos" @click="clickItem(index)"> {{ item.text }} </li> </ol> </div> </template> <script setup> import { useStore } from 'vuex'; const store = useStore() // 獲取后在<template>中使用 const itemList = store.state.itemList </script>
8. <style>中的 v-bind
<style>中的 v-bind: 用于在 SFC <style> 標(biāo)簽中啟用組件狀態(tài)驅(qū)動的動態(tài) CSS 值
<script setup> import { ref, watchEffect } from 'vue'; const color = ref('black') const callChangeColorHandel = () => { if(color.value === 'black') { color.value = 'red' }else { color.value = 'black' } } </script> <style lang="scss" scoped> .todo-list { color: v-bind(color); } </style>
觸發(fā)callChangeColorHandel 函數(shù)，在<style>中的v-bind指令可以動態(tài)綁定的響應(yīng)式狀態(tài)。
三. 總結(jié)
整體來說，setup語法糖的引入簡化了使用Composition API時冗長的模板代碼，也就是讓代碼更加簡潔，可讀性也更高。并且官方介紹vue3.2在界面渲染的速度以及內(nèi)存的使用量上都進(jìn)行了優(yōu)化，本文只是對setup語法糖的常用方式進(jìn)行了總結(jié)，
