P21. vue3 组合式 api

什么是组合式 API？

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。

生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。

依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

组合式 API 是 Vue 3 及 Vue 2.7 的内置功能。对于更老的 Vue 2 版本，可以使用官方维护的插件 @vue/composition-api。在 Vue 3 中，组合式 API 基本上都会配合

setup 组件被创建之前执行，不需要使用this

• App.vue

  <script>
  import Hello from "./components/Hello.vue";
  export default {
  data() {
    return {
      message: '',
      isShow: true
    };
  },
  setup(){//setup 组件被创建之前执行，不需要使用this
    console.log('setup')
    const msg='hellokugou666'
    console.log(msg)
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    Hello
  }
  }
  
  </script>
  
  <template>
  <div>
    <Hello v-if="isShow"/>
    <button @click="isShow=!isShow">销毁Hello组件</button>
  
  </div>
  
  </template>
  
  

setup 组合式api

• App.vue

<script>
import Hello from "./components/Hello.vue";
export default {
  data() {
    return {
      message: '',
      isShow: true
    };
  },
  setup(){//setup 组件被创建之前执行，不需要使用this
    console.log('setup');
    const msg='hellokugou666'
    console.log(msg);
    return { msg };
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    Hello
  }
}

</script>

<template>
  <div>
    <h2>{{msg}}</h2>
    <Hello v-if="isShow"/>
    <button @click="isShow=!isShow">销毁Hello组件</button>

  </div>

</template>

ref 的响应式

import { ref } from 'vue'

• App.vue

  <script>
  import Hello from "./components/Hello.vue";
  import { ref } from "vue";
  
  export default {
  data() {
    return {
      message: '',
      isShow: true
    };
  },
  
  setup(){//setup 组件被创建之前执行，不需要使用this
    //没有响应式的
    console.log('setup');
    //const msg='hellokugou666'
    let msg='hellokugou666'
    console.log(msg);
    function changeMsg(){
      msg='hellokugou777'
      console.log(msg);
    }
  
    const counter=ref(0)//ref是一个函数，返回一个带有vlaue属性的对象
    function changeCounter(){
      counter.value++
    }
    return { msg, changeMsg, counter,changeCounter };
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    Hello
  }
  }
  
  </script>
  
  <template>
  <div>
    <h2>{{msg}}</h2>
    <button @click="changeMsg">改变msg</button>
    <!-- 模版会自动解析vlaue -->
    <h2>{{counter}}</h2>
    <button @click="changeCounter">改变counter</button>
    <Hello v-if="isShow"/>
    <button @click="isShow=!isShow">销毁Hello组件</button>
  
  </div>
  
  </template>
  
  
  
  

setup 定义变量-reactive响应式

import { ref,reactive } from 'vue'

• App.vue

<script>
import Hello from "./components/Hello.vue";
import { ref,reactive } from "vue";

export default {
  data() {
    return {
      message: '',
      isShow: true
    };
  },

  setup(){//setup 组件被创建之前执行，不需要使用this
    console.log('setup');
    //const msg='hellokugou666'
    let msg='hellokugou666'
    console.log(msg);
    function changeMsg(){
      msg='hellokugou777'
      console.log(msg);
    }
    //有响应式的
    const counter=ref(0)//ref是一个函数，返回一个带有vlaue属性的对象
    function changeCounter(){
      counter.value++
    }
    //通过reactive定义医用类型数据
    const obj=reactive({
      name: 'tom',
      age: '18'
    })
    function changeName(){
      obj.name='sean'
      console.log(obj.name)
    }
    return { msg, changeMsg, counter,changeCounter,changeName,obj };
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    Hello
  }
}

</script>

<template>
  <div>
    <h2>{{msg}}</h2>
    <button @click="changeMsg">改变msg</button>
    <!-- 模版会自动解析vlaue -->
    <h2>{{counter}}</h2>
    <button @click="changeCounter">改变counter</button>
    <h2>{{obj.name}}</h2>
    <button @click="changeName">改变name</button>
    <Hello v-if="isShow"/>
    <button @click="isShow=!isShow">销毁Hello组件</button>

  </div>

</template>

setup toRefs

<script>
import Hello from "./components/Hello.vue";
import { ref,reactive,toRefs } from "vue";

export default {
  data() {
    return {
      message: '',
      isShow: true
    };
  },

  setup(){//setup 组件被创建之前执行，不需要使用this
    console.log('setup');
    //const msg='hellokugou666'
    let msg='hellokugou666'
    console.log(msg);
    function changeMsg(){
      msg='hellokugou777'
      console.log(msg);
    }
    //有响应式的
    const counter=ref(0)//ref是一个函数，返回一个带有vlaue属性的对象
    function changeCounter(){
      counter.value++
    }
    //通过reactive定义医用类型数据

    const obj=reactive({
      name: 'tom',
      age: '18',
      children:{
        name:'小宝贝'
      }
    })
    function changeName(){
      obj.name='sean'
      console.log(obj.name)
    }
    //通过es6扩展运算符进行结构使得对象中的属性不是响应式
    let {name,children}=toRefs(obj)//与下面torefs一样
    //toRefs使得解构后的数据重新获得响应式
    return { msg, changeMsg, counter,changeCounter,changeName,obj,...toRefs(obj),name,children };
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    Hello
  }
}

</script>

<template>
  <div>
    <h2>{{msg}}</h2>
    <button @click="changeMsg">改变msg</button>
    <!-- 模版会自动解析vlaue -->
    <h2>{{counter}}</h2>
    <button @click="changeCounter">改变counter</button>
    <h2>{{name}}</h2>
    <h2>{{obj.name}}</h2>
    <button @click="changeName">改变name</button>
    <h2>{{children.name}}</h2>
    <Hello v-if="isShow"/>
    <button @click="isShow=!isShow">销毁Hello组件</button>

  </div>

</template>