一、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. Networking from the container's point of view 笔记

    Networking from the container's point of view Published portsThe type of network a container uses, w ...

  2. Windows系统提示:“windows找不到文件请确定文件名是否正确后

    最近使用Win7/10系统的用户反应在系统中移动了桌面上的一些与系统无关的文档,在挪动了文件之后出现的问题,弹出了windows找不到文件请确定文件名是否正确后,再试一次, 的错误提示,该怎么办呢? ...

  3. 篇章三:SVN-对文件的操作

    添加文件 在检出的工作副本中添加一个Readme文本文件,这时候这个文本文件会显示为没有版本控制的状态,如图: 这时候,你需要告知TortoiseSVN你的操作,如图: 加入以后,你的文件会变成这个状 ...

  4. Apache Hudi使用简介

    Apache Hudi使用简介 目录 Apache Hudi使用简介 数据实时处理和实时的数据 业务场景和技术选型 Apache hudi简介 使用Aapche Hudi整体思路 Hudi表数据结构 ...

  5. 操作系统微内核和Dubbo微内核,有何不同?

    你好,我是 yes. 在之前的文章已经提到了 RPC 的核心,想必一个 RPC 通信大致的流程和基本原理已经清晰了. 这篇文章借着 Dubbo 来说说微内核这种设计思想,不会扯到 Dubbo 某个具体 ...

  6. 手写一个简单的starter组件

    spring-boot中有很多第三方包,都封装成starter组件,在maven中引用后,启动springBoot项目时会自动装配到spring ioc容器中. 思考: 为什么我们springBoot ...

  7. [leetcode]118,119PascalsTriangle,杨辉三角1,2

    杨辉三角1Given numRows, generate the first numRows of Pascal's triangle.For example, given numRows = 5,R ...

  8. svg基础--基本语法与标签

    svg系列–基础 这里会总结svg的基础知识和一些经典的案例. svg简介 SVG(Scalable Vector Graphics)is an XML-based Language for crea ...

  9. Spring(1) --入门(IoC,AOP)

    说说你对spring的理解? Spring框架是一个轻量级的企业级开发的一站式解决方案,所谓一站式解决方案就是可以基于Spring解决Java EE开发的所有问题.Spring框架主要提供了IoC容器 ...

  10. readhat6.5下安装weblogic10.3.6

    转载自:http://www.mianhuage.com/752.html 1.安装前准备 1.1.准备安装包generic.jar1.2.创建weblogic用户及用户组创建组命令:groupadd ...