P21. vue3 组合式 api

响应式编程
• 阅读 605

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

P21. vue3 组合式 api

P21. vue3 组合式 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>

P21. vue3 组合式 api

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>

P21. vue3 组合式 api

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>

P21. vue3 组合式 api

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>

P21. vue3 组合式 api

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>

P21. vue3 组合式 api

点赞
收藏
评论区
推荐文章
Easter79 Easter79
•
3年前
swagger生成接口文档和map类型参数解析
一：swagger是什么？1、是一款让你更好的书写API文档的规范且完整框架。2、提供描述、生产、消费和可视化RESTfulWebService。3、是由庞大工具集合支撑的形式化规范。这个集合涵盖了从终端用户接口、底层代码库到商业API管理的方方面面。方法一：使用第三方依赖（最简单的方法）
1833
0
0
Easter79 Easter79
•
3年前
Vue 3 组合式API介绍
组合式API介绍通过创建Vue组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。假设在
803
0
0
Stella981 Stella981
•
3年前
OpenLayer4与mapV结合蜂巢图效果
在这里mapV是一款数据可视化的软件，数据的展示的效果灰常炫酷，但是问题来了，mapV是百度出的，是基于百度地图api做的，百度地图api是不开源的，说到是不是感觉很绝望，如果想做到mapV和OpenLayer结合，我们可以超图的一款api基于openlayer开发的api,刚好该api也结合mapV,我们可以间接结合二者。来张图：!(https
1108
0
0
布局王 布局王
•
2个月前
Uniapp开发鸿蒙应用教程之选项式api和组合式api
大家好，前两天讲了Uniapp开发鸿蒙应用时的基础布局和自定义导航栏，都是仅限于页面上的开发。今天我们尝试进行一些数据上的操作，借此分享一下选项式API和组合式API的内容。我们初始化的首页项目代码，它的脚本代码部分通常是这样的：exportdefault
131
0
0
电商平台数据采集wx19970108018 电商平台数据采集wx19970108018
•
1年前
如何批量获取拼多多商品详情数据？
批量获取拼多多商品详情数据可以采用以下方式：使用拼多多开放平台API接口。拼多多开放平台提供了API接口，可以通过API接口获取拼多多平台上的商品信息，使用API接口需要进行权限申请和认证，操作较为复杂。使用第三方工具。市面上有许多第三方工具可以实现拼多多
678
0
0
小万哥 小万哥
•
1年前
API 参考与帮助内容：一站式开发与使用者支援
API文档API文档是旨在了解API详细信息的综合指南。通常，它们包括端点、请求示例、响应类别和示例以及错误代码等信息。API文档可帮助开发人员了解API端点的具体细节，并了解如何将API成功集成到他们的软件中。文档生成工具API文档生成工具是直接从源代码
537
0
0
幂简集成 幂简集成
•
6个月前
用于构建 API 和微服务的 12 个流行 JavaScript 框架
构建API驱动的现代应用程序！类似于用户界面，唯一的区别是用户是机器或软件。让我们来了解的设计方法，以及为什么遵循它是有意义的。我们还将重点介绍JavaScript及其流行程度，最后，我们将讨论构建API和微服务的热门JavaScript框架。API优先方
305
0
0
响应式编程
响应式编程
Lv1
春风十里扬州路，卷上珠帘总不如。
文章
8
粉丝
0
获赞
0
热门文章
真的很实用！一文搞懂Websocket 接口测试方法
go strings.Builder 使用
Chrome下使用WebRTC实现屏幕共享
Terraform使用案例
Guice AOP(Matcher)