Setup 函數的使用 · vue筆記

[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>  <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>  <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>  <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> ~~~