vue3教程(vue3教程pdf下载)

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

往期文章

个人主页