Vue 3.x Composition API
Vue 3.x Composition API
setup
调用时机
创建组件实例,然后初始化 props ,紧接着就调用setup 函数;
从生命周期钩子的视角来看,它会在 beforeCreate 钩子之前被调用;
https://composition-api.vuejs.org/zh/api.html
tempalte
如果 setup 返回一个对象,则对象的属性将会被合并到组件模板的渲染上下文
<template>
<div>{{ count }} {{ object.foo }}</div>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
setup() {
const count = ref(0)
const object = reactive({ foo: 'bar' })
// export 给模板
return {
count,
object,
}
},
}
</script>
注意 setup 返回的 ref 在模板中会自动解开,不需要写 .value;
function / jsx
setup 也可以返回一个函数,函数中也能使用当前 setup 函数作用域中的响应式数据
import { h, ref, reactive } from 'vue'
export default {
setup() {
const count = ref(0)
const object = reactive({ foo: 'bar' })
return () => h('div', [count.value, object.foo])
},
}
why-the-composition-api
- 减少代码冗余,提高可读性,可维护性
https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/
- 提高代码复用,替代 mixin
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
Vue 3.x Composition API的更多相关文章
- Vue 3.0 Composition API - 中文翻译
Composition API 发布转载请附原文链接 https://www.cnblogs.com/zgh-blog/articles/composition_api.html 这两天初步了解了下 ...
- 来自 Vue 3.0 的 Composition API 尝鲜
来自 Vue 3.0 的 Composition API 尝鲜:https://segmentfault.com/a/1190000020205747
- Vue 3.0 中令人激动的新功能:Composition API
正如你所期望的那样,Vue 3带来了很多令人兴奋的新功能.值得庆幸的是,Vue团队主要是在当前API的基础上引入了一些补充和改进,而不是进行重大更改,所以已经了解Vue 2的人应该很快就会对新的语法感 ...
- 蒲公英 · JELLY技术周刊 Vol.21 -- 技术周刊 · React Hooks vs Vue 3 + Composition API
蒲公英 · JELLY技术周刊 Vol.21 选 React 还是 Vue,每个人心中都会有自己的答案,有很多理由去 pick 心水的框架,但是当我们扪心自问,我们真的可以公正的来评价这两者之间的差异 ...
- Composition API
介绍 Composition API的主要思想是,我们将它们定义为从新的 setup 函数返回的JavaScript变量,而不是将组件的功能(例如state.method.computed等)定义为对 ...
- vue3.0 的 Composition API 的一种使用方法
网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面, ...
- Vue3全家桶升级指南一composition API
1.setup() vue3中的composition API中最重要的就是setup方法了,相当于组件的入口,所有的composition API都必须放到setup()中的使用. setup是在组 ...
- Vue3 Composition API写烦了,试试新语法糖吧—setup script
前言 Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了.那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐.比如你的模板里用到了大量的state和方法的时候 ...
- 好久没发文了,一篇Vue3的Composition API使用奉上
Composition API Composition API是Vue3中推荐的组件代码书写方式,相较于传统的Options API来说,它能让业务逻辑处理和后期代码维护变的更加简单. 首先我们来看O ...
随机推荐
- 1 flume快速入门——十分钟学会flume
flume ## 1.1 Flume定义 Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统.Flume基于流式架构,灵活简单. 大数据框架大致分为3类: ...
- 1、剑指offer-数组——二维数组中的查找
*题目描述* **在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含 ...
- Set、Map的区别
应用场景Set用于数据重组,Map用于数据储存Set: (1)成员不能重复(2)只有键值没有键名,类似数组(3)可以遍历,方法有add, delete,hasMap:(1)本质上是健值对的集合,类似集 ...
- CF912A
题意 你手里有 A 个黄水晶和 B 个蓝水晶,其中两个黄水晶可以造一个黄水晶球,三个蓝水晶可以造一个蓝水晶球,一黄一蓝两个水晶可以造一个绿水晶球. 现在你需要 x 个黄水晶球,y 个绿水晶球,z 个蓝 ...
- C#编写一个在asp.net core 3.1下的简单的corn模式的计划任务和一个更简单的定时器类
asp.net core 下,新增了一个BackgroundService用来实现能在后台跑一个长久运行的任务,因此,也可以用来替换掉原来使用的static的Timer组件, Timer组件主要有以下 ...
- 五万字长文带你学会Spring
Sping Spring概念介绍 spring是啥呢,你在斗地主的时候把别人打爆了那叫spring, 你成功的追到了你爱慕已久的女神,人生中的春天来了,那也叫sping 好了别看我老婆了,咱来讲讲啥是 ...
- Nginx上安装SSL证书
准备 参考 :链接 下载的Nginx证书压缩文件解压后包含: .pem:证书文件.PEM文件的扩展名为CRT格式. .key:证书密钥文件.申请证书时如果未选择自动创建CRS,则下载的证书文件压缩包中 ...
- (十八)整合Nacos组件,环境搭建和入门案例详解
整合Nacos组件,环境搭建和入门案例详解 1.Nacos基础简介 1.1 关键特性 1.2 专业术语解释 1.3 Nacos生态圈 2.SpringBoot整合Nacos 2.1 新建配置 2.2 ...
- JavaWeb——JSP内置对象application,JSP属性范围
application application语法 application对象 JSP属性范围 范围的分类 page request session application pagecontext延伸 ...
- Docker (error getsockopt: connection refused ,使用http无法使用 docker login 登录的问题)
因部署Harbor 镜像仓库,部署完了之后根据提示上传 images,需要使用docker login ip:port 进行登录, 登录的时候发现因为docker 默认是https,因为测试环 ...