[JavaScript知识库]从setup开始拉开Vue3的序幕

理解setup

1. Vue3.0中一个新的配置项，值为一个函数。

2. setup是所有Composition API（组合API）“ 表演的舞台 ”。

3. 组件中所用到的：数据、方法等等，均要配置在setup中。

setup函数的两种返回值：

1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

   <template>
     <div>
       <!-- 在模板中使用setup配置项内返回的属性和方法 -->
       <p>姓名：{{name}}</p>
       <p>性别：{{sex}}</p>
       <p>年龄：{{age}}</p>
       <button @click="fn">点击提示</button>
     </div>
   </template>
   
   <script>
   // 引入渲染函数
   // import { h } from 'vue'
   export default {
     name: 'App',
     // 组件中所用到的：数据、方法等等，均要配置在setup中。
     setup(){
       let hello = '你好啊！'
       let name = '张三'
       let sex = '男'
       let age = 18
       function fn () {
         alert(hello)
       }
       // 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用
       return {
         name,
         sex,
         age,
         fn
       }
   
       // 若返回一个渲染函数：则可以自定义渲染内容。（了解）
       // return ()=> h('h1',hello)
     }
     
   }
   </script>
   

使用注意点：

1. 尽量不要与Vue2.x配置混用

   • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。

   • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。

   • 如果有重名, setup优先。

     <template>
       <div>
         <p>姓名：{{name}}</p>
         <button @click="fn">点击提示</button>
         <button @click="hi">Vue2的方法</button>
       </div>
     </template>
     
     <script>
     export default {
       name: 'App',
       // 使用Vue2的方式来定义数据和方法
       data() {
         return {
           name: '李四',
         }
       },
       methods: {
         hi() {
           alert('hello world')
         }
       },
       // 使用Vue3的方式来定义数据和方法
       setup(){
         let hello = '你好啊！'
         let name = '张三'
         function fn () {
           alert(hello)
         }
         return {
           name,
           fn
         }
       }
     }
     </script>
     

     在上述代码中我们在组件内部同时使用了vue2和vue3的语法 我们可以看到在vue3中也可以使用vue2中的一些语法 但是并不建议大家这样写

     打开页面可以看到组件内定义相同的name属性是以setup方法内定义的为准的

   ?

2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）