这是一篇普通大学生的学习记录帖，学习Vue3之前学过一些html,css,javascript的基础知识，希望可以通过记录博客对知识进行每日总结。

前言

一、setup是什么？

二、setup如何定义数据，方法

1.定义数据

2.定义方法（定义函数）

3.setup的返回值

4.setup和OptionsAPI的关系

5.setup语法糖

最后

---

前言

上一篇中我们已经能够自己写一个小组件了，这一篇讲讲Vue3中的新的配置项setup()。它可以帮助我们使用组合式API将数据，方法配置在一起。

---

一、setup是什么？

setup 是 Vue3 中的一个新的配置项，值 是一个函数，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在 setup 中。

二、setup如何定义数据，方法

1.定义数据

在setup()里，怎么定义变量，就怎么定义数据

//配置数据
<script lang="ts">
  export default {   //默认暴露
    setup(){
        //定义数据
      let name = '张三'
      let age = 18
      let tel = '111'
    }
}    

需要注意的是：此时我们定义完数据会发现数据在模板里(template)会飘红报错，并且在浏览器中无法渲染出来。

这说明直接定义数据模板是无法使用的，那么如何才能让模板用到setup里的数据呢？

我们需要在setup里return返回一组对象{key:value},key是模版里的值，value是setup里定义的变量名。当属性和变量名相同时可以简写。

当有了返回值后，模板就可以成功使用setup里我们定义的变量了！并且页面也能成功渲染出来！

2.定义方法（定义函数）

在setup里定义方法和在methods()里定义方法是一样的，直接写函数就可以了。

需要注意的是，setup里不能使用this关键字，setup里定义的函数要使用变量可以直接拿到setup里定义的变量（函数里可以直接读取到外部变量）。最后定义完函数，要想让模板能使用到函数同样需要将函数名返回。

<script lang="ts">
  export default {   //默认暴露
    setup(){
      // 定义数据
      let name = '张三'
      let age = 18
      let tel = '111'
      // 定义方法
      function changename(){
        name = '李四';
      }
      function changeage(){
        age +=1;
      }
      function showTell(){
        alert(tel)   
      }
      return {name,age,tel,changename,changeage,showTell} //定义完方法同样需要返回才能让模板能使用到
    }
}     
</script>

这时我们的模板就可以成功调用变量和函数了！但是当我点击修改姓名，修改年龄的时，会发现页面的数据并没有改变，点击联系电话时页面仍然可以跳出提示框。这是为什么呢？这是因为setup里的数据不是响应式的，即我修改数据后，页面能够自动刷新更改数据，我的函数确实是调用了，name数据确实修改了，但页面没有变化。至于如何让setup的数据变成响应式，我们暂时不在这一篇里说。

3.setup的返回值

1.setup的返回值可以是对象，即我们上述讲的返回变量，返回函数，返回后就可以在模板中被使用。

2.setup的返回值也可以是一个函数，返回的这个函数将直接渲染在页面里，但是这使我们写的模板失去了意义。

4.setup和OptionsAPI的关系

我们之前说setup和data,methods是同一级别的，他们可以同时写在一起但不建议。他们同时写在一起的话以setup为主，data和methods可以读取到setup里的属性方法，但setup中不能访问到data,methods。因为setup的生命周期早于data,methods，当data配置数据的时候setup里的数据已经解析完了，所以data可以访问到setup里的数据。

5.setup语法糖

在vue3中使用setup配置数据的话，我们需要在script标签里写一个setup()函数，函数里定义属性和方法，最后还要返回属性和方法，如果我们增加一个属性，但是我们忘了返回这个属性，在大量编写数据的时候会有些麻烦，那我们可以使用一种简单的写法去写setup，这种简单写法就是setup语法糖。

我们需要另外再写一个script标签，标签里带上setup属性，在这个标签里直接定义属性和方法，在我们定义完之后他就默认给我们自动返回相应的对象，无需我们额外去写return值。

<script lang="ts">
  // // JS或TS脚本
  export default {   //默认暴露  
    name: 'Person'     //组件名
    }
</script>
<script setup>  //相当于写setup()自动返回对象
      // 定义数据
      let name = '张三'
      let age = 18
      let tel = '111'
      // 定义方法
      function changename(){
        name = '李四';
      }
      function changeage(){
        age +=1;
      }
      function showTell(){
        alert(tel)   
      }
</script>

这时候刷新页面他会出现报错

这是因为两个script标签要求使用同一种语言，它这时可能认为你第一个script标签用的是TS语言，第二个script标签用的是JS语言，我们在第二个script标签中加上lang="ts"就可以了。

<script lang="ts" setup>

---

最后

如果这篇文章对你有帮助的话就点个赞吧！