头图

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 基本上都会配合

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 声望
15 粉丝
0 条评论
推荐阅读
P34. vuex 状态管理
App.vue {代码...} Home.vue {代码...} index.js {代码...}

台湾省委书记阅读 89

封面图
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.4k评论 7

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.6k

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.1k评论 7

一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图

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

89 声望
15 粉丝
宣传栏