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和方法的时候 ...
随机推荐
- Docker 笔记学习
文章目录 概述 CentOS7 Docker 安装 启动 Docker 后台服务 镜像加速 Docker常用命令 如何创建一个镜像 存储和载入镜像 上传镜像 容器的基本操作 创建容器 终止容器 如何进 ...
- 微博爬虫,python微博用户主页小姐姐图片内容采集爬虫
python爬虫,微博爬虫,需要知晓微博用户id号,能够通过抓取微博用户主页内容来获取用户发表的内容,时间,点赞数,转发数等数据,当然以上都是本渣渣结合网上代码抄抄改改获取的! 要抓取的微博地址:ht ...
- JS C# 正则表达式去除html字符中所有的标签(img em标签除外)
js去除em标签 $(this).html().replace(/<(?!em|\/em).*?>/g, '') C#去除 System.Text.RegularExpressions.R ...
- Django中关于“CSRF verification failed. Request aborted”的问题
遇到该问题的情境 在Django中采用Ajax提交表单,涉及到跨域问题. 解决措施 在html页面中的表单内添加如下代码: {% csrf_token %} 在视图函数所在的py文件中添加如下代码: ...
- U8CO使用C#版(一)
1.懒加载: object obj = null; System.Type oType = System.Type.GetTypeFromProgID("U8Login.clsLogin&q ...
- python在线练习
不管学习那门语言都希望能做出实际的东西来,这个实际的东西当然就是项目啦,不用多说大家都知道学编程语言一定要做项目才行. 这里整理了70个Python实战项目列表,都有完整且详细的教程,你可以从中选择自 ...
- Android ADB原理及常用命令
Android调试桥(ADB, Android Debug Bridge)是一个Android命令行工具,包含在SDK 平台工具包中,adb可以用于连接Android设备,或者模拟器,实现对设备的控制 ...
- 线程上下文类加载器(Context ClassLoader)
1.线程上下文类加载器是从jdk1.2开始引入的,类Thread中的getContextClassLoader()与setContextClassLoader(ClassLoader c1),分别用来 ...
- 什么是urlencode编码
今天看文章中看到了urlencode,不理解 ,故上网查了查,看到了如下的答案,在此记录下,以加深印象 urlencode编码:就是将字符串以URL编码,一种编码方式,主要为了解决url中中文乱码问题 ...
- 面试官:数据库自增ID用完了会怎么样?
看到这个问题,我想起当初玩魔兽世界的时候,25H难度的脑残吼的血量已经超过了21亿,所以那时候副本的BOSS都设计成了转阶段.回血的模式,因为魔兽的血量是int型,不能超过2^32大小. 估计暴雪的设 ...