头图

什么是组合式 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 基本上都会配合

image.png

image.png

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>
    
    

image.png

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>


image.png

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>
    
    
    
    

image.png

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>


image.png

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>


image.png


锅包肉
89 声望17 粉丝

这个人很懒,没有什么说的。