一篇文章總結Vue3.2語法糖使用
一. 概述
在Vue2時期，組件里定義的各類變量、方法、計算屬性等是分別存放到data、methods、computed等選項里，這樣編寫的代碼不便于后期的查閱，查找一個業(yè)務邏輯需要在各個選項來回切換。vue3.0組合式APIsetup函數(shù)的推出就是為了解決這個問題，它讓我們的邏輯關注點更加集中，語法也更加精簡，但是當我們在使用vue3.0的語法就構建組件的時候，總是需要把外面定義的方法變量必須要return出去才能在<template>，比較麻煩一些. vue3.2語法糖的出現(xiàn)以及一些新增的API，讓我們的代碼進一步簡化。
什么是語法糖？
語法糖（英語：Syntactic sugar）是由英國計算機科學家彼得·蘭丁發(fā)明的一個術語，指計算機語言中添加的某種語法，這種語法對語言的功能沒有影響，但是更方便程序員使用。語法糖讓程序更加簡潔，有更高的可讀性。
Vue3.2語法糖
來看下vue3.0與vue3.2的單文件組件（SFC，即.vue 文件）的結構對比
vue3.0組件
<template>
<div>
</div>
</template>
<script>
export default {
components: {
},
props: {
},
setup () {
return {}
}
}
</script>
<style lang="scss" 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 lang="scss" scoped>
</style>對比
vue3.0與vue3.2版本的組件模板，最主要的變化是3.2中沒有了setup函數(shù)，而是把它放在了script標簽中。我們定義的屬性和方法也不用在return中返回，直接就可以用在模板語法中 ...
這些是直觀的變化，接下來我們學習具體的用法。
二.使用介紹
1.組件注冊
vue3.0中使用組件，需要使用 components 選項來顯式注冊：
<script>
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}
</script>vue3.2 <script setup> 的單文件組件中，導入的組件可以直接在模板中使用，組件會自動注冊，并且無需指定當前組件的名字，它會自動以文件名為主，也就是不用再寫name屬性了。
<script setup> import ComponentA from './ComponentA.vue' </script> <template> <ComponentA /> </template>
2.Props 聲明
在vue3.0中，prop可以使用props選項來聲明
<script>
export default {
props: ['foo'],
// 或者用這種方式指類型與默認值
// 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)向下流往子組件，而不會逆向傳遞，這意味著你不應該在子組件中去更改一個 prop。
3.計算屬性
我們一般使用計算屬性來描述依賴響應式狀態(tài)的復雜邏輯。說白了就是這個計算屬性的值依賴于其他響應式屬性的值，依賴的屬性發(fā)生變化，那么這個計算屬性的值就會進行重新計算。
<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) {
// 注意：我們這里使用的是解構賦值語法
[firstName.value, lastName.value] = newValue.split(' ')
}
})
</script>當調用fullName.value = 'John Doe'時，setter會被調用，而firstName 和 lastName會被更新，在vue3.2中我們可以直接在<template>標簽中使用它，不在需要return返回。
- 不要在計算函數(shù)中做異步請求或者更改 DOM！
- 一個計算屬性僅會在其響應式依賴更新時才重新計算，如果他依賴的是個非響應式的依賴，及時其值發(fā)生變化，計算屬性也不會更新。
- 相比于方法而言，計算屬性值會基于其響應式依賴被緩存，一個計算屬性僅會在其響應式依賴更新時才重新計算
4. watch
在組合式API中，我們可以使用watch函數(shù)在每次響應式狀態(tài)發(fā)生變化時觸發(fā)回調函數(shù),watch的第一個參數(shù)可以是不同形式的“數(shù)據(jù)源”：它可以是一個 ref(包括計算屬性)、一個響應式對象、一個 getter 函數(shù)、或多個數(shù)據(jù)源組成的數(shù)組： watch()是懶執(zhí)行的：僅當數(shù)據(jù)源變化時，才會執(zhí)行回調，例如：
<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，當傳入的itemList數(shù)量發(fā)生變化時，后面的回調方法會被調用。當然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>當傳入的
itemList數(shù)量發(fā)生改變時，回調函數(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í)行一遍回調函數(shù)，如果這時函數(shù)產(chǎn)生了副作用，Vue會自動追蹤副作用的依賴關系，自動分析出響應源。上面的例子可以重寫為：
<script setup>
...
watchEffect(() => {
console.log('itemList===',props.itemList.length);
console.log('title===',props.title);
})
</script> 這個例子中，回調會立即執(zhí)行。在執(zhí)行期間，它會自動追蹤props.itemList.length作為依賴（和計算屬性的行為類似）。每當傳入的itemList.length變化時，回調會再次執(zhí)行。
如果要清除watchEffect()的的監(jiān)聽，只需要顯示的調用watchEffect()的返回函數(shù)就可以了，例如：
<script setup>
...
const stopEffect = watchEffect(() => {
console.log('itemList===',props.itemList.length);
console.log('title===',props.title);
})
stopEffect()
</script>watch 只追蹤明確偵聽的數(shù)據(jù)源。它不會追蹤任何在回調中訪問到的東西。另外，僅在數(shù)據(jù)源確實改變時才會觸發(fā)回調。我們能更加精確地控制回調函數(shù)的觸發(fā)時機。 watchEffect，則會在副作用發(fā)生期間追蹤依賴。它會在同步執(zhí)行過程中，自動追蹤所有能訪問到的響應式屬性。
6.組件的事件調用
6.1 子組件調用父組件的方法
vue3.0中如果我們的子組件觸發(fā)父組件的方法，我們的做法:
子組件
<script>
export default {
emits: ['inFocus', 'submit'],
setup(props, ctx) {
ctx.emit('submit',params)
}
}
// 或者將可以將emit解構使用
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('子組件調用了父組件的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('子組件調用了父組件的submitHandel方法');
}
};
</script>6.2 父組件調用子組件的方法或是屬性
vue3.0中如果父組件觸發(fā)子組件的方法或是屬性，直接在return函數(shù)中返回就可以，數(shù)據(jù)都是默認隱式暴露給父組件的。
<script>
// 子組件
setup(props, { emit }) {
const isShow = ref(false)
// 父組件調用這個方法
const showSubComponent = () => {
isShow.value = !isShow.value
}
return {
// return 返回
showSubComponent,
}
}
</script>父組件中通過ref獲取到子組件，并對子組件暴露的方法進行訪問
父組件
<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)
// 調用子組件的方法
const callItemFuncHandel = () => {
todoItemVueRef.value.showSubComponent()
}
return {
todoItemVueRef
}
}
};
</script>vue3.2語法中，父組件的調用方式相同，子組件通過defineExpose()將方法或是屬性暴露出去
子組件
<script setup>
const isShow = ref(false)
// 父組件調用這個方法
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)
// 調用子組件的方法
const callItemFuncHandel = () => {
todoItemVueRef.value.showSubComponent()
}
</script>7.Vuex的使用
在vue3.0與vue3.2中創(chuàng)建Vuex沒有區(qū)別，只不過在<template>模板中使用Vuex的store有細微差別。
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風格的計算屬性命名功能 來使用一個常量作為函數(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)絡請求
setTimeout(() => {
commit(ADD_ITEM_LIST, todoItem);
console.log('state===', state);
}, 1000);
},
},
modules: {
},
});在vue3.0中我們一般在return中對store.state進行解構,然后可以直接在<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進行解構
...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> 標簽中啟用組件狀態(tài)驅動的動態(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)綁定的響應式狀態(tài)。
三. 總結
整體來說，setup語法糖的引入簡化了使用Composition API時冗長的模板代碼，也就是讓代碼更加簡潔，可讀性也更高。并且官方介紹vue3.2在界面渲染的速度以及內(nèi)存的使用量上都進行了優(yōu)化，本文只是對setup語法糖的常用方式進行了總結，更多vue3.2新特性可以去官方文檔查看。
一些參考：
到此這篇關于Vue3.2語法糖使用的文章就介紹到這了,更多相關Vue3.2語法糖使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue一步到位的實現(xiàn)動態(tài)路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue之保留小數(shù)點兩位小數(shù) 使用filters(過濾器)
這篇文章主要介紹了vue之保留小數(shù)點兩位小數(shù) 使用filters(過濾器),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vuejs router history 配置到iis的方法
今天小編就為大家分享一篇vuejs router history 配置到iis的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue如何實現(xiàn)實時監(jiān)聽頁面寬度高度變化,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法
這篇文章主要介紹了vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
用官網(wǎng)的一句話來說：Pinia?是?Vue的專屬狀態(tài)管理庫，Pinia就是為vue3而生。本文將通過一些示例詳細介紹一些Pinia的使用，希望對大家有所幫助2022-11-11
這篇文章主要介紹了uni-app 的基礎組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
解決antd 表單設置默認值initialValue后驗證失效的問題
這篇文章主要介紹了解決antd 表單設置默認值initialValue后驗證失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了簡單了解vue.js數(shù)組的常用操作,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06
我們使用nginx部署Vue項目,實質上就是將Vue項目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關于Vue項目打包部署的相關資料,需要的朋友可以參考下2021-09-09