<progress id="nc499"><pre id="nc499"><rt id="nc499"></rt></pre></progress>

<dd id="nc499"><track id="nc499"><dl id="nc499"></dl></track></dd>
  • <nav id="nc499"></nav>

    <span id="nc499"></span>

    vue3.0中setup使用(兩種用法)

    來源:腳本之家 2021-05-06 16:45:30
    這篇文章主要介紹了vue3.0setup使用,本文通過兩種用法給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下


    vue3.0中setup使用(兩種用法)?

    一、setup函數的特性以及作用

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

    Vue3 的一大特性函數 ---- setup

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

    2、setup函數是 Composition API(組合API)的入口

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

    二、setup函數的注意點:

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

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

    3、setup函數只能是同步的不能是異步的

    用法1:結合ref使用

     
    
    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,
        }
      },
    }

    用法2:代碼分割

    Options API 和 Composition API

    Options API 約定:

    我們需要在 props 里面設置接收參數

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

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

    我們需要在 watch 里面設置監聽屬性

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

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

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



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

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

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

    我們期望是這樣的:
    importuseAfrom'./a';
    importuseBfrom'./b';
    importuseCfrom'./c';
    
    export default {
      setup(props) {
        let { a, methodsA } = useA()
        let { b, methodsB } = useA()
        let { c, methodsC } = useC()
    
        return {
          a,
          methodsA,
          b,
          methodsB,
          c,
          methodsC,
        }
      },
    }

    就算 setup 內容代碼量越來越大,但是始終圍繞著大而不亂,代碼結構清晰的路子前進。
    原文出處:https://www.jb51.net/article/201199.htm
    版權聲明:本文來源地址若非本站均為轉載,若侵害到您的權利,請及時聯系我們,我們會在第一時間進行處理。
    API