Vue3 Composition API

主要作用：将分隔开得数据和方法，可以囊括在一起使用。

目录

setup

---

setup

setup:在创建组件之前，比beforeCreate还要前面

没用setup时的例子:

<template>
  <div class="about">
    <h1 @click="changeEvent">计数：{{count}}</h1>
  </div>
</template>
<script>
export default{
  name:'App',
  data(){
    return {
      count:0
    }
  },
  methods:{
    changeEvent(){
      this.count++
    }
  }
}
</script>

用了setup后的代码：

<template>
  <div class="about">
    <h1 @click="changeEvent">计数：{{count}}</h1>
    <h1 @click="changeNum">计数：{{num}}</h1>
  </div>
</template>
<script>
import { ref } from 'vue'
export default{
  name:'App',
  data(){
    return {
      count:0
    }
  },
  methods:{
    changeEvent(){ 
      this.count++
    }
  },
  setup(){
    const num = ref(0) 
    function changeNum(){
      //ref(0)这个值是保存在num里面
      num.value+=5
    }
    return {num,changeNum}
  }
}
</script>

用法

1.setup必须return

2.setup(props) 父组件传给子组件的参数可以在setup里面处理

3.setup(props,content)这个content父组件传递过来的其他信息

reactive是个响应对象

<template>
  <div class="about">
    <h1 @click="changeEvent">计数：{{count}}</h1>
    <h1 @click="changeNum">计数：{{num}}</h1>
    <h1>用户名：{{user.username}}</h1>
    <h1>用户名：{{user.type}}</h1>
  </div>
</template>
<script>
import { ref,reactive } from 'vue'
export default{
  name:'App',
  data(){
    return {
      count:0
    }
  },
  methods:{
    changeEvent(){ 
      this.count++
    }
  },
  setup(){
    const num = ref(0) 
    const user =reactive({
      username:"Betty",
      age:22,
      type:"爱学习"
    })
    function changeNum(){
      //ref(0)这个值是保存在num里面
      num.value+=5
    }
    return {num,changeNum,user}
  }
}
</script>

使用toRef将reactive解析成ref

<template>
  <div class="about">
    <h1 @click="changeEvent">计数：{{count}}</h1>
    <h1 @click="changeNum">计数：{{num}}</h1>
    <h1>用户名：{{username}}</h1>
    <h1>用户名：{{type}}</h1>
  </div>
</template>
<script>
import { ref,reactive,toRefs } from 'vue'
export default{
  name:'App',
  data(){
    return {
      count:0
    }
  },
  methods:{
    changeEvent(){ 
      this.count++
    }
  },
  setup(){
    const num = ref(0) 
    const user =reactive({
      username:"Betty",
      age:22,
      type:"爱学习"
    })
    function changeNum(){
      //ref(0)这个值是保存在num里面
      num.value+=5
    }
    return {num,changeNum,...toRefs(user)}
  }
}
</script>

除了用props传递数据还可以使用Provide / Inject

provide和inject启用依赖注入。这两者只能在使用当前活动实例的setup()期间被调用

首先2者都需要导入（注意，我的意思是她们是导入进来的，不一定要在同一个Vue下）

import { provide, inject } from 'vue'

在父组件里写

   const student=reactive({
      username:"Betty",
      age:22,
      type:"爱学习"
    })
    provide('student',student)

子组件里：

    setup(props,content){
      const student =inject('student')
      return {...student}
    }