vue3.0 composition API
一、Setup函数
1.创建时间:组件创建之前被调用,优先与created被调用,this指向的实例为window,created所指向的实例为proxy
2.this指向:不会指向组件实例
3.参数为props和context,context可被解构为{attr,slots,emit}
4.函数的返回对象,对象的属性可以直接在模板中使用。
5.生命周期
二、Proxy实现响应
1.proxy是一个对象
2.可以代理一个对象或函数
3.允许拦截被代理的对象或函数
三、 reactive和toRef
注意:vue3.0中无法对响应式数据进行解构,解构后的数据将失去响应性。但可通过toRef()函数进行包裹实现响应式。
四、watch、watchEffect、computed
关于watch
watch监听数组或对象的嵌套属性时,需要将souce指定为一个函数,并将监听属性return 出去
关于watchEffect
1.watchEffect不会监听某一个值的变化
2.watchEffect函数参数是否重新执行,取决于依赖项是否发生了变化
关于computed
五、provide和inject
六、teleport移动
vue3.0 composition API的更多相关文章
- 基于 Vue3.0 Composition Api 快速构建实战项目
Quick Start 项目源码:https://github.com/Wscats/vue-cli 本项目综合运用了 Vue3.0 的新特性,适合新手学习
- Vue3.0新版API之composition-api入坑指南
关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composit ...
- 好久没发文了,一篇Vue3的Composition API使用奉上
Composition API Composition API是Vue3中推荐的组件代码书写方式,相较于传统的Options API来说,它能让业务逻辑处理和后期代码维护变的更加简单. 首先我们来看O ...
- Vue 3.0 Composition API - 中文翻译
Composition API 发布转载请附原文链接 https://www.cnblogs.com/zgh-blog/articles/composition_api.html 这两天初步了解了下 ...
- mixin和composition api
1. 这两个都是实现组件逻辑复用的法宝 2. composition api是vue3的, composition api的出现就是解决mixins的不足之处的 一. mixin 回顾下mixin, ...
- composition api和react hooks的对比
一. 我的走位: 保持中立 1. 各有各的好处, 谁也别说谁 2. 一个东西带来的好处, 相应的副作用肯定也有, 人无完人 二 . vue3 的composition api 和 rea ...
- 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和方法的时候 ...
随机推荐
- 一目了然的 Node.js Windows10 安装篇
本篇文章 介绍 NodeJS 的安装 及环境变量配置 Node JS 的 了解 1.Node.js简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于 ...
- Gradle 是干什么吃的?
Gradle维基解释:Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具.它使用一种基于Groovy的特定领域语言来声明项目设置,而不是传统的XML.当前其支 ...
- 用Python实现童年的回忆:俄罗斯方块!别说还挺好玩
在那个电子产品比较匮乏的年代,小游戏机
- web项目中使用火狐浏览器导出文件时文件名乱码
原因 主要是编码的问题.在设置文件名称前,加上判断.判断下载者使用的浏览器,如果不是火狐浏览器,则对文件名称进行UTF8编码;如果是火狐浏览器,则不对文件名称进行操作. 解决办法 文件名称编码时进行判 ...
- Windows Server 2016介绍与安装
版本介绍 Windows Server 2016 Essentials edition Windows Server 2016 Essentials版是专为小型企业而设计的.它对应于Windows S ...
- (十)、cat--查看文件命令
一.命令描述与格式 将文件或标准输入组合输出到标准输出,所以注定了其可以配合管道应用, 格式:cat [选项] [files] 选项: -A --show-all ...
- 【Tomcat】Tomcat服务器核心配置说明及标签
目录 一,主要标签结构 二,Server标签 标签属性: 子标签: 三,Service 标签 子标签: 四,Executor 标签 属性: 五,Connector标签 属性: 六,Engine标签 属 ...
- python初学者-水仙花数简单算法
输出"水仙花数".所谓水仙花是指一个3位数的十进制数,其各位数字的立方和等于该数本身.例如:153是水仙花数. 用for循环实现水仙花数的计算图如下所示: 1 for i in r ...
- Redis 设计与实现:数据库
本文的分析都是基于 Redis 6.0 版本源码 redis 6.0 源码:https://github.com/redis/redis/tree/6.0 服务器中的数据库 Redis 服务器将绝大部 ...
- 实用干货!Java开发企业级权限管理系统视频教程
全程手把手带你运用Java技术栈,打造一套基于最流行的RBAC拓展模型的,分布式的,有界面的,高灵活性,高拓展性的企业级权限管理系统.学完本课程你将可以轻松应对绝大多数企业开发中与权限管理及后台系统相 ...