composition组合式API

setup

简单用法

setup函数式Composition API的入口，在这里里面定义的变量，方法都需要return出去

把vue2中的data和methods配置函数混在啦一起

<script>
import {
    defineComponent } from 'vue';
export default defineComponent({
   
  name: 'App',
  setup (){
   
   let name = '路飞'
   //方法
   function say(){
   
    console.log(`我叫${
     name},是要成为海贼王的男人！`)
   }

   //返回一个对象
   return {
   
    name,
    say
   }
  }
 })
</script>

setup细节问题

执行时机

1. setup是在beforeCreate生命周期回调之前就执行，而且就执行了一次
2. setup在执行的时候，当前的组件没有被创建出来，组件实例对象this不能用
3. this是undefined，说明不能通过this调用data、computed、methods、props相关信息
4. 其实所有的composition API相关回调函数都不可以

返回值

1. 返回一个对象，为页面提供数据，在模板中可以直接使用此对象的方法和属性
2. 返回对象中的属性和data函数中返回的对象属性合并
3. 返回对象中的方法和methods方法合并
4. 如果有重名setup优先
5. 一般不要混合使用data和setup以及methods和setup
6. 不能是一个async函数，因为返回值不在是一个对象而是一个promise

setup参数

• props 接收父组件向子组件传递的数据
• context
  • attrs对象(获取组件标签上所有属性对象，即使props上没有生命定义接收的属性，他也能获取到该标签上的属性)
  • emit方法（分发事件）可以通过emit实现子传父，第一个参数是属性名字，第二个参数是传的值(相当于v2的this.$emit)
  • slots对象（插槽）

ref与reactive

ref

在setup中定义的变量不是响应式的，此时需要用ref将它变成响应式的

ref函数会把变量变成对象，在修改的时候要.value去修改，页面上，vue3检测到时ref对象就自动给.value啦

<script lang="ts">
import {
    defineComponent,ref } from 'vue';
export default defineComponent({
   
  name: 'App',
  setup(){
   
    const age=ref(10)
    function setU