<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [TOC] >[success] # Setup 函數的使用 什么是 **Composition API ?** 當我們在 **項目開發中** 的時會遇到這種問題, **data** 中很多 **變量** , **methods** 中很多 **方法** ,當我們 **想看一些代碼的邏輯** 時,**需要上下文的來回查看** ,當 **項目代碼上百 / 千行的時,想看一些代碼邏輯定位非常麻煩** ,下圖 **顏色相同** 的 **代碼塊** , **代表同一個功能的代碼** ,可以看到 **Options API(傳統vue寫法)一個功能代碼分布在上、中、下,代碼很零散,而 Composition API(vue3 新寫法) 每個功能的代碼都匯聚在一塊** ,這樣 **查閱就會很方便可讀性強** 。 ![](https://img.kancloud.cn/2f/b8/2fb862837cead795c4e49c38a23e083b_1200x1201.png) 要想使用 **Composition API** ,首先要學習一個 **函數** ,就是 **Setup 函數** , **Setup 函數** 會在 **created 實例被完全初始化之前** 執行,它有 **2 個參數** , **第1個參數參數** 是 **當前組件的 props** , **第2個參數** 是 **上下文**, **Setup函數** 必須要 **return 返回一個值** , **Setup 函數返回的值可以直接在 template 模板中使用** 如下代碼: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Setup 函數的使用</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ template: ` <div @click="handleClick">{{name}}</div> `, /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { return { name: 'dell', // Options API 中data中的變量 handleClick(){ // Options API 中methods中的方法 alert(123) } } } }) const vm = app.mount('#root') </script> </html> ~~~ 我們發現 **Setup** 這個 **函數** ,它 **return** 的 **所有內容** 會 **暴露在外部** ,我們在 **template 模板** 中可以直接 **使用暴露出來的變量或方法** 。 >[success] ## Setup 函數內調用外部方法與變量 **Setup 函數** 是 **在實例被創建之前執行的一個函數** ,我們可能會想到,我們如果在 **Setup 函數** 中 **調用 methods 中定義的方法** ,會怎樣呢? **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Setup 函數內調用外部方法與變量</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ template: ` <div @click="handleClick">{{name}}</div> `, methods: { test() { alert('test') } }, /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { this.test() return { name: 'dell', // data中的變量 handleClick(){ // methods中的方法 alert(123) } } } }) const vm = app.mount('#root') </script> </html> ~~~ 會直接報錯 **this.test is not a function** ,這是因為 **Setup 函數** 是 **在實例被初始化之前就執行的一個函數** , **實例初始化之前 methods 并沒有被放到 this 上面, 所以通過 this.test() 根本就無法調用這個 methods** , 所以要記住, **在Setup 函數里面,不能使用 this 這樣的關鍵詞, this 里面實際上什么也沒有** ,所以我們不要去這樣寫,用了 **Setup 函數** 之后,我們就 **不會去用this這樣語法,再去寫任何的代碼** 了,后面這種 **methods** 的定義,我們都會換成新的 **composition API 的語法來定義** 。 >[success] ## 外部方法(methods)、生命周期(mounted)中調用 Setup 函數 在 **Setup 函數** 中 **我們無法調用外部的一些方法 ,或者一些模板,或者mounted這樣的生命周期函數** ,但是 **在外部的方法或者生命周期中,我們可以調用 Setup 這個方法** ,原因是 **Setup 執行時,實例并沒有被創建** ,但是 **在實例創建后,Setup 已經被掛載到實例上了,所以在 mounted 或者 methods 中可以獲取到 Setup** ,如下代碼: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外部方法(methods)、生命周期(mounted)中調用 Setup 函數</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ template: ` <div @click="handleClick">{{name}}</div> `, methods: { test() { console.log(this.$options.setup()) } }, mounted(){ this.test() }, /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { return { name: 'dell', // data中的變量 handleClick(){ // methods中的方法 alert(123) } } } }) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看