前言

這篇文章主要介紹了vue3.0中setup使用，本文通過兩種用法給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

什么是setup

setup是vue3新增的生命周期函數(shù)，setup的加入就是為了讓vue3使用組合式API（Composition API）。使用組合式API更符合大型項目的開發(fā)，通過setup可以將該部分抽離成函數(shù),讓其他開發(fā)者就不用關心該部分邏輯。

setup真香

setup位于beforeCreated之前,用于代替created 和beforeCreated。不僅是作為vue3新增的生命周期函數(shù)，還可以在setup中引入外部js文件方法，可在js中共用vue全部生命周期。

哈哈，是不是和之前的mixin很像？沒錯，setup可以更好的拆分業(yè)務，只把需要用到的公共參數(shù)和方法return出去使用，而不像mixin一樣完全侵入原有vue文件，再也不用考慮參數(shù)方法重名問題了，用到哪個取哪個，引入再多js也不怕。

一、setup函數(shù)的特性以及作用

可以確定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是說我們再日常工作中 可以在 Vue3 中使用 Vue2.x 的相關語法 但是當你真正開始使用 Vue3 寫項目時 你會發(fā)現(xiàn)他比 Vue2.x 方便的多

Vue3 的一大特性函數(shù) ---- setup

1、setup函數(shù)是處于 生命周期函數(shù) beforeCreate 和 Created 兩個鉤子函數(shù)之間的函數(shù) 也就說在 setup函數(shù)中是無法 使用 data 和 methods 中的數(shù)據(jù)和方法的

2、setup函數(shù)是 Composition API（組合API）的入口

3、在setup函數(shù)中定義的變量和方法最后都是需要 return 出去的 不然無法再模板中使用

二、setup函數(shù)的注意點：

1、由于在執(zhí)行 setup函數(shù)的時候，還沒有執(zhí)行 Created 生命周期方法，所以在 setup 函數(shù)中，無法使用 data 和 methods 的變量和方法

2、由于我們不能在 setup函數(shù)中使用 data 和 methods，所以 Vue 為了避免我們錯誤的使用，直接將 setup函數(shù)中的this修改成了 undefined

3、setup函數(shù)只能是同步的不能是異步的

用法1:結合ref使用

<template>
 <div id="app">
  {{name}}
  <p>{{age}}</p>
  <button @click="plusOne()">+</button>
 </div>
</template>
  
<script>
import {ref} from 'vue'
export default {
 name:'app',
 data(){
  return {
   name:'xiaosan'
  }
 },
 setup(){
  const name =ref('小四')
  const age=ref(18)
  function plusOne(){
   age.value++ //想改變值或獲取值 必須.value
  }
  return { //必須返回 模板中才能使用
   name,age,plusOne
  }
 }
}
</script>

用法2：代碼分割

Options API 和 Composition API 

Options API 約定：

我們需要在 props 里面設置接收參數(shù)

我們需要在 data 里面設置變量

我們需要在 computed 里面設置計算屬性

我們需要在 watch 里面設置監(jiān)聽屬性

我們需要在 methods 里面設置事件方法

你會發(fā)現(xiàn) Options APi 都約定了我們該在哪個位置做什么事，這反倒在一定程度上也強制我們進行了代碼分割。

現(xiàn)在用 Composition API，不再這么約定了，于是乎，代碼組織非常靈活，我們的控制代碼寫在 setup 里面即可。

setup函數(shù)提供了兩個參數(shù) props和context,重要的是在setup函數(shù)里沒有了this,在 vue3.0 中，訪問他們變成以下形式： this.xxx=》context.xxx

我們沒有了 this 上下文，沒有了 Options API 的強制代碼分離。Composition API 給了我們更加廣闊的天地，那么我們更加需要慎重自約起來。

對于復雜的邏輯代碼，我們要更加重視起 Composition API 的初心，不要吝嗇使用 Composition API 來分離代碼，用來切割成各種模塊導出。

我們期望是這樣的：

importuseAfrom'./a';
importuseBfrom'./b';
importuseCfrom'./c';
exportdefault{
 setup (props) {
 let{ a, methodsA } = useA();
 let{ b, methodsB } = useA();
 let{ c, methodsC } = useC();
 return{
   a,
    methodsA,
    b,
    methodsB,
    c,
    methodsC
  }
 }
}

就算 setup 內容代碼量越來越大，但是始終圍繞著大而不亂，代碼結構清晰的路子前進。

總結

到此這篇關于vue3.0中setup的兩種用法的文章就介紹到這了,更多相關vue3.0中setup使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論