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和方法的时候 ...
随机推荐
- (已解决)'ng' 不是内部或外部命令,也不是可运行的程序或批处理文件
前言: 之前在安装Angular环境的时候有个问题,就是通过命令成功安装了angular cli脚手架工具,但是在终端(win+r cmd)中输入ng version一直提示的是'ng' 不是内部或外 ...
- vue API 知识点(3) --- 实例 总结
一.实例 property 1.vm.$data Vue 实例观察的数据对象,Vue 实例代理了对其 data 对象 property 的的访问 2.vm.$props 当前组件接收到的 props ...
- Python:大神用的贼溜的实用技巧分享
整理字符串输入 整理用户输入的问题在编程过程中极为常见.通常情况下,将字符转换为小写或大写就够了,有时你可以使用正则表达式模块「Regex」完成这项工作.但是如果问题很复杂,可能有更好的方法来解决: ...
- Python稳基修炼之异常处理
错误与异常 1.区分错误与异常 两种错误(都必须改正): 语法错误(代码不规范,格式不对或缺少符号).逻辑错误(逻辑不通) 异常: 程序运行时发生错误的信号 2.异常处理与注意事项 异常处理: 程序员 ...
- 【STL 源码剖析】浅谈 STL 迭代器与 traits 编程技法
大家好,我是小贺. 点赞再看,养成习惯 文章每周持续更新,可以微信搜索「herongwei」第一时间阅读和催更,本文 GitHub : https://github.com/rongweihe/Mor ...
- eclipse-切换分支-用途描述
操作细节参考文章 https://www.cnblogs.com/sunrunzhi/p/6509448.html 分析切换分支的用途: 背景: 1. 项目开发使用分支1.分支2: 2. 分支1代码是 ...
- python常用操作和内置函数
一.常用数据处理方法. 1.索引:按照号码将对应位置的数据取出使用 2.list将任意类型数据用逗号分割存在列表中 3.range:产生一堆数字(顾头不顾尾) 4.切片:可以从复制数据的一部分,不影响 ...
- mysql的binlog+maxwell+kakka
1.业务库痛点及解决⽅案 初期出⾏业务的订单相关,是以mysql作为业务库为基准的,但是随着业务线增多,每⽇新增数据指 数上涨,⼏乎在每天的⾼峰期期间,都会出现业务库所在服务器的cpu.IO.内存等跑 ...
- NAT模式/路由模式/全路由模式 (转)
route全路由NAT NAT模式.此模式下,由局域网向广域网发送的数据包默认经过NAT转换,但路由器对所有源地址与局域网接口不在同一网段的数据包均不进行处理.例如,路由器LAN口IP设置为192.1 ...
- Redis守护进程作用+数据类型
Redis开启守护进程的作用: 在 linux 中,每一个系统与用户进行交流的界面称为终端 如果没有开启守护进程,相当于知识在前台开启了Redis,当终端关闭时,Reids服务也会跟着关闭 而开启守护 ...