Vue3.2?setup語法糖及Hook函數(shù)基本使用
引言
在2021 年 8 月 5 日,Vue發(fā)布了3.2版本的新寫法,其中最主要的亮點就在于setup的語法糖,學過Vue3.0的小伙伴都清楚,當我們在使用Vue3的語法就構(gòu)建組件的時候,總是需要把外面定義的方法變量必須要return出去,比較麻煩一些,所以Vue官方這次提供了setup語法糖,有了他,我們可以更加簡潔舒適的去構(gòu)建組件。
setup(語法糖)
1、基本使用
在vue3.2中我們不再需要進行return,當使用 <script setup>
的時候,任何在 <script setup>
聲明的頂層的綁定 (包括聲明的變量,函數(shù)聲明,以及 import 引入的內(nèi)容) 都可以在模板中直接使用,這是因為在setup
函數(shù)中,所有的ES模板都被認為是暴露給上下文的值,并包含在setup()
返回對象中。
要使用這個語法,需要將 setup
屬性添加到 <script>
代碼塊上,示列:
<script setup> import {ref} from 'vue' let property = ref('志拾陸'); </script>
這里面的代碼會被編譯成組件 setup()
函數(shù)的內(nèi)容,這也就意味著與普通的 <script>
只在組件被首次引入的時候僅執(zhí)行一次不同,<script setup>
中的代碼會在每次組件實例被創(chuàng)建的時候執(zhí)行。這一點非常的重要,也就是寫在 <script setup>
中的代碼,例如初始化的賦值等在組件每次實例創(chuàng)建時都重新執(zhí)行一次。
2、自動注冊
使用3.2的語法時,如果需要像之前一樣去引入其他組件,就無需再通過components
進行注冊,我們可以直接引入使用。示列:
<template> <subassembly @getChili="getChili" :title="msg" /> </template> <script setup> import {ref} from 'vue' //這里我們引入了子組件 subassembly import subassembly from './subassembly.vue' </script>
3、組件通信
defineProps ----> [用來接收父組件傳來的 props] 代碼示列:
父組件代碼:
<template> <div>我是父組件----1</div> <subassembly @getChili="getChili" :title="msg" /> </template> <script setup> import {ref} from 'vue' import subassembly from './subassembly.vue' //把值傳遞給子組件 ---> :title="msg" <Home @getChili="getChili" :title="msg" /> const msg = ref('父的值') </script>
子組件代碼:
<template> <div>我是子組件----2</div> <div style="color: red">{{props.title}}</div> </template> <script setup> import {defineProps} from 'vue' //接收父組件 傳過來的值! const props = defineProps({ title: { type: String } }); //打印一下 接收父組件的值 console.log(props.title) //父的值 </script>
defineEmit ----> [子組件向父組件事件傳遞] 代碼示列:
子組件代碼:
<template> <hr> <div>我是子組件----2</div> <button @click="toEmits">點擊傳到父組件</button> </template> <script setup> import {defineEmits,ref} from 'vue' //先定義一下子 在發(fā)送值 const emits = defineEmits(['getChili']); const toEmits = () => { emits('getChili','子的值') } </script>
父組件代碼:
<template> <div>我是父組件----1</div> <div>{{data}}</div> <subassembly @getChili="getChili" :title="msg" /> </template> <script setup> import {ref} from 'vue' import subassembly from './subassembly.vue' //空值接收 子組件的傳值 let data = ref(null) const getChili = (e) => { data.value = e console.log(e) //子組件的值 } </script>
在標準組件寫法里,子組件的數(shù)據(jù)都是默認隱式暴露給父組件的,但在script-setup
模式下,所有數(shù)據(jù)只是默認return給template 使用,不會暴露到組件外,所以父組件是無法直接通過掛載ref 變量獲取子組件的數(shù)據(jù)。如果要調(diào)用子組件的數(shù)據(jù),需要先在子組件顯示的暴露出來,才能夠正確的拿到,這個操作,就是由defineExpose來完成。
defineExpose ----> [組件暴露出自己的屬性] 代碼示列:
子組件代碼:
<template> <div>我是子組件----2> {{ xiaoZhi.stator }}</div> </template> <script setup> import {ref, defineExpose, reactive} from 'vue' let xiaoZhi = reactive({ stator: '小志', age: 27 }) let xiaoXiaoZhi = ref('小小志'); console.log(xiaoXiaoZhi) defineExpose({ xiaoZhi, xiaoXiaoZhi }) </script>
父組件代碼:
<template> <button @click="shiEmots">獲取暴露</button> <subassembly ref="shield"/> </template> <script setup> import subassembly from './subassembly.vue' import {defineEmits,defineProps,ref} from 'vue' const shield = ref() const shiEmots = () =>{ //子組件接收暴露出來得值 console.log('接收reactive暴漏出來的值',shield.value.xiaoZhi) console.log('接收ref暴漏出來的值',shield.value.xiaoXiaoZhi) } </script>
結(jié)果:
hook函數(shù)
介紹:
- Vue3 的 hook函數(shù) 相當于 vue2 的 mixin, 不同在與 hooks 是函數(shù)
- Vue3 的 hook函數(shù) 可以幫助我們提高代碼的復用性, 讓我們能在不同的組件中都利用 hooks 函數(shù)
示列 :
1、首先我們需要創(chuàng)建一個hooks的文件 文件示列:
2、在hookds文件下,我們創(chuàng)建一個我們需要使用的.js文件 這里我們比如時usePoint.js
這里我們在usePoint里面寫了一個獲取鼠標點擊位置的方法 代碼示列:
import {reactive, onMounted, onBeforeUnmount} from 'vue' export default function () { //展示的數(shù)據(jù) 可以通過App.vue 界面去隱藏 let point = reactive({ x: 0, y: 0 }) //獲取鼠標點擊事件 function savePonint(event) { point.x = event.pageX point.y = event.pageY console.log(event.pageX, event.pageY) } //現(xiàn)實之后調(diào)用 掛載完畢 onMounted(() => { window.addEventListener('click', savePonint) }) //在隱藏之前調(diào)用 卸載之前 onBeforeUnmount(() => { window.removeEventListener('click', savePonint) }) return point }
我們在組件中引入此文件 代碼示列:
<template> <h3>當前求和:{{ sum }}</h3> <button @click="sum++">點我加一</button> <hr> <h3>當前鼠標點擊坐標為:x:{{ point.x }},y:{{ point.y }}</h3> </template> <script> import {ref} from 'vue' //復用的usePoint import usePoint from "../hooks/usePoint"; export default { name: 'App', setup() { //數(shù)據(jù) let sum = ref(0) let point = usePoint() return {sum,point} }, } </script>
結(jié)果展示:
總得來說,新引入的setup語法糖的 目的是簡化使用Composition API
時冗長的模板代碼,也就是讓代碼更加簡潔,閱讀性也越高。而在組件中引入并使用自定義hook 自定義hook的作用類似于vue2中的mixin技術(shù) 自定義Hook的優(yōu)勢: 很清楚復用功能代碼的來源, 更清楚易懂!
以上就是Vue3.2 setup語法糖及Hook函數(shù)基本使用的詳細內(nèi)容,更多關(guān)于Vue3.2 setup語法糖Hook函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果
本文主要介紹了???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08