Vue3.2 setup語法糖及Hook函數基本使用

Posted on by

引言

在2021 年 8 月 5 日，Vue發佈瞭3.2版本的新寫法，其中最主要的亮點就在於setup的語法糖，學過Vue3.0的小夥伴都清楚，當我們在使用Vue3的語法就構建組件的時候，總是需要把外面定義的方法變量必須要return出去，比較麻煩一些，所以Vue官方這次提供瞭setup語法糖，有瞭他，我們可以更加簡潔舒適的去構建組件。

setup（語法糖）

1、基本使用

在vue3.2中我們不再需要進行return，當使用 <script setup> 的時候，任何在 <script setup> 聲明的頂層的綁定 (包括聲明的變量，函數聲明，以及 import 引入的內容) 都可以在模板中直接使用，這是因為在setup函數中，所有的ES模板都被認為是暴露給上下文的值，並包含在setup()返回對象中。

要使用這個語法，需要將 setup 屬性添加到 <script> 代碼塊上，示列：

<script setup>
import {ref} from 'vue'
let property = ref('志拾陸');
</script>

這裡面的代碼會被編譯成組件 setup() 函數的內容，這也就意味著與普通的 <script> 隻在組件被首次引入的時候僅執行一次不同，<script setup> 中的代碼會在每次組件實例被創建的時候執行。這一點非常的重要，也就是寫在 <script setup> 中的代碼，例如初始化的賦值等在組件每次實例創建時都重新執行一次。

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'
//先定義一下子 在發送值
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>

在標準組件寫法裡，子組件的數據都是默認隱式暴露給父組件的，但在script-setup模式下，所有數據隻是默認return給template 使用，不會暴露到組件外，所以父組件是無法直接通過掛載ref 變量獲取子組件的數據。如果要調用子組件的數據，需要先在子組件顯示的暴露出來，才能夠正確的拿到，這個操作，就是由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>

結果：

hook函數

介紹：

  • Vue3 的 hook函數 相當於 vue2 的 mixin, 不同在與 hooks 是函數
  • Vue3 的 hook函數 可以幫助我們提高代碼的復用性, 讓我們能在不同的組件中都利用 hooks 函數

示列 :

1、首先我們需要創建一個hooks的文件 文件示列：

2、在hookds文件下，我們創建一個我們需要使用的.js文件 這裡我們比如時usePoint.js

這裡我們在usePoint裡面寫瞭一個獲取鼠標點擊位置的方法 代碼示列：

import {reactive, onMounted, onBeforeUnmount} from 'vue'
export  default function () {
    //展示的數據  可以通過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)
    }
    //現實之後調用 掛載完畢
    onMounted(() => {
        window.addEventListener('click', savePonint)
    })
    //在隱藏之前調用 卸載之前
    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() {
    //數據
    let sum = ref(0)
    let point = usePoint()
    return {sum,point}
  },
}
</script>

結果展示：

總得來說，新引入的setup語法糖的 目的是簡化使用Composition API時冗長的模板代碼，也就是讓代碼更加簡潔，閱讀性也越高。而在組件中引入並使用自定義hook 自定義hook的作用類似於vue2中的mixin技術 自定義Hook的優勢: 很清楚復用功能代碼的來源, 更清楚易懂！

以上就是Vue3.2 setup語法糖及Hook函數基本使用的詳細內容，更多關於Vue3.2 setup語法糖Hook函數的資料請關註WalkonNet其它相關文章！

推薦閱讀：