一、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的更多相关文章

  1. 基于 Vue3.0 Composition Api 快速构建实战项目

    Quick Start 项目源码:https://github.com/Wscats/vue-cli 本项目综合运用了 Vue3.0 的新特性,适合新手学习

  2. Vue3.0新版API之composition-api入坑指南

    关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composit ...

  3. 好久没发文了,一篇Vue3的Composition API使用奉上

    Composition API Composition API是Vue3中推荐的组件代码书写方式,相较于传统的Options API来说,它能让业务逻辑处理和后期代码维护变的更加简单. 首先我们来看O ...

  4. Vue 3.0 Composition API - 中文翻译

    Composition API 发布转载请附原文链接 https://www.cnblogs.com/zgh-blog/articles/composition_api.html 这两天初步了解了下 ...

  5. mixin和composition api

    1. 这两个都是实现组件逻辑复用的法宝 2. composition api是vue3的,  composition api的出现就是解决mixins的不足之处的 一. mixin 回顾下mixin, ...

  6. composition api和react hooks的对比

    一.  我的走位:   保持中立 1. 各有各的好处,  谁也别说谁 2. 一个东西带来的好处, 相应的副作用肯定也有, 人无完人 二 .  vue3 的composition api 和   rea ...

  7. vue3.0 的 Composition API 的一种使用方法

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面, ...

  8. Vue3全家桶升级指南一composition API

    1.setup() vue3中的composition API中最重要的就是setup方法了,相当于组件的入口,所有的composition API都必须放到setup()中的使用. setup是在组 ...

  9. Vue3 Composition API写烦了,试试新语法糖吧—setup script

    前言 Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了.那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐.比如你的模板里用到了大量的state和方法的时候 ...

随机推荐

  1. HCIP --- MPLS BGP 实验

    实验要求: 实验拓扑: 一.配置IP地址 二.给AS 2配置OSPF 1.R2-R7配置相同: 查看路由表: 可以看到,业务网段学的是32位的 修改:在R2-R7上都修改 [R2]int loo1[R ...

  2. 使用CentOS8搭建私有NAS存储的一些建议

    对于超过2TB的硬盘来说只能考虑GPT分区表,因此还是建议使用EFI来安装系统. 对于超过2TB的硬盘来说应该选择LVM,然后磁盘末尾预留出至少100G的空间用于将来方便维护安装个Windows系统之 ...

  3. 将.Net Core发布至Docker,并连接 Redis、上传文件到本机、连接sqlserver数据库

    此片文章目标是将 .Net Core 发布到 Docker 上,并且连接到在 Docker上的 Redis .上传文件到本机文件夹和连接 sqlserver 数据库. 创建项目 创建项目就不用说了,我 ...

  4. spring依赖注入的方式(一)

    为了方便类的管理,spring提供了依赖注入的思想:类的实例化不由程序员控制,而是交给sprig容器进行管理. spring提供了多种类型的注入方式---注解.xml注入: 1  注解注入 有两种:@ ...

  5. easyui模板页面 不良调查

    <%@page import="com.xy.cc.util.CUtil" %><%@page import="com.xy.cc.bean.UserP ...

  6. Mysql Workbench查询成功但是不显示

    先来看看MysqlWorkbench的一个bug: 当执行SQL语句成后显示结果在屏幕下方,但是当你拖动结果拦边框往下移动到与Action Output时两者就会合并,再也拖不上来!!!! 回归正题: ...

  7. MongoDb学习(四)--Repository

    在学习这个的时候.关于Repository的映射.在备注xml的时候出现了错误. 错误有点坑.以后写的时候注意一点,在学习的时候.用的mongo的jar包版本比较低. 然而本机操作的时候,用的是最新版 ...

  8. VNC使用及其常见问题解决方法

    博主之前在博文(https://www.cnblogs.com/kangbazi666/p/14153604.html)中已经介绍了多人VNC的配置方法,下面将简单介绍其使用方法及常见问题的解决方法. ...

  9. 关于if-else代码的优化

    if-else分支代码在我们日常开发中基本上是最常用的逻辑,但是,经常在if-else代码过多的情况下,代码会变得特别臃肿,并且代码的可扩展性会变得不好,所以,优化if-else代码逻辑是很有必要的. ...

  10. Buffer的重要属性 position/limit/capacity

    1 package nio; 2 3 import java.nio.IntBuffer; 4 5 /** 6 * Buffer的重要属性 position/limit/capacity 7 * po ...