vue3教程(vue3教程pdf下载)

发布网友 发布时间：2024-09-29 15:10

我来回答

共1个回答

热心网友 时间：2024-09-29 18:39

返回一个提供应用上下文的应用实例。应用实斗缺例挂载的整个组件树共享同一个上下文。

创建组件

或者是一个setup函数，函数名称将作为组件名称来使用

创建一个空桐辩异步加载组件

//高阶组件

在当前应用中查找组件，只能在render或setup函数中使用。

查找组件

在当前应用中查找指令，只能在render或setup函数中使用。

将回调推迟到下一个DOM更新周期之后执行。在更改了一些数据以等待DOM更新后立即使用它。

vue2.x的生命周期

vue3的生命周期

与2.x版本生命周期相对应的组合式API

新增的钩子函数

组合式API还提供了以下调试钩子函数：

把一个响应式对象转换成普通对象，该普通对象的每轮纳个property都是一个ref

应用:当从合成函数返回响应式对象时，toRefs非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

问题:reactive对象取出的所有属性值都是非响应式的

解决:利用toRefs可以将一个响应式reactive对象的所有原始属性转换为响应式的ref属性

利用ref函数获取组件中的标签元素

功能需求:让输入框自动获取焦点

Vue3.x超详细安装教程

npm或yarn安装

查看版本（是否安装成功轮型棚）：

进入demo目录：cdG:\demo\

创建my-project项目：vuecreatemy-project

选择自己所要集成的配置（格键是选中腊则与取消，A键是全选，回车确定）

这里我的选择租拆如下：

配置项：

安装的vue-cli将会是基于vue3.x版本

如果在项目中想要保持使用TypeScript的class风格的话，建议大家选择y。

这里我选择：Sass/SCSS（withnode-sass）

这里我选择：ESLintwitherrorpreventiononly

这里我选择：Lintonsave

这里我选择：Indedicatedconfigfiles

cdmy-project(进入项目根目录)

yarnserve(启动项目)

现在的目录是Vue3.x的cli看上去简洁多了，去掉了Vue2.x中build和config等目录

在项目的根目录下新建vue.config.js文件（是根目录，不是src目录）

这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档。其实V2到V3的学习成本不高，熟悉V2的话，看完这篇文章就可以上手V3。

Vue3官网

在线源码编译地址

setup是所有CompositionAPI的容器，值为一个函数。组件中所用到的数据、方法等等，均要配置在setup中，它会在beforeCreate之前执行一次，注意：V3里this不再是指向Vue实例，访问this会是undefined

尽量不要与V2配置混用

V2配置（data、methos、computed...）中可以访问到setup中的属性、方法。

但在setup中不能访问到V2配置（data、methods、computed...）。

如果有重名,setup优先。

setup不能是一个async函数

因为返回值不再return的对象,而是promise,模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

使用ref可以创建一个包含响应式数据的引用对象（reference对象，简称ref对象），可以是基本类型、也可以是对象。

语法

定义一个对象类型的响应式数据，内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

语法

与V2中computed配置功能一致

语法

与V2中watch配置功能一致，语法有点改动

语法

和watch的区别是，watch既要指明监视的属性，也要指明监视的回调。而watchEffect，不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性，不用写返回值。

语法

生命周期全都写在setup中

创建一个ref对象，其value值指向另一个对象中的某个属性

语法

将响应式对象转换为普通对象，其中结果对象的每个property都是指向原始对象相应property的ref

语法

只处理对象最外层属性的响应式（浅响应式）。适用于：一个对象数据，结构比较深,但变化时只是外层属性变化

语法

只处理基本数据类型的响应式,不进行对象的响应式处理。适用于：一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换

语法

让一个响应式数据变为只读的（深只读），应用于不希望数据被修改时

语法

让一个响应式数据变为只读的（浅只读），应用于不希望数据被修改时

语法

将一个由reactive生成的响应式对象转为普通对象，对这个普通对象的所有操作，不会引起页面更新。

语法

标记一个对象，使其永远不会再成为响应式对象，有些值不应被设置为响应式的，竖纯例如复杂的第三方类库等，当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

语法

创建一个自定义的ref，并对其依赖项跟租则踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收track和trigger函数作为参数，并余型咐且应该返回一个带有get和set的对象。

语法

实现祖与后代组件间通信，父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据

语法

检查一个值是否为一个ref对象

语法

检查一个值是否为一个isReactive对象

语法

检查一个对象是否是由readonly创建的只读代理

语法

检查对象是否是由reactive或readonly创建的proxy

语法

Teleport提供了一种干净的方法，允许我们控制在DOM中哪个父节点下渲染了HTML，而不必求助于全局状态或将其拆分为两个组件。

语法

等待异步组件时先渲染一些额外内容，让应用有更好的用户体验

语法

将全局的API，即：Vue.xxx调整到应用实例（app）上

由于V3中不在存在this，所以ref的获取调整了

语法

V3中在for循环元素上绑定ref将不再自动创建$ref数组。要从单个绑定获取多个ref，请将ref绑定到一个更灵活的函数上

语法

定义一个组件可以向其父组件触发的事件

使用方式修改

通过事件来监听组件生命周期中的关键阶段

语法

如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎点赞关注评论；

END

往期文章

个人主页