本文介绍: 什么hook?—— 本质一个函数,把setup函数使用的Composition API进行了封装。类似于vue2.x中的mixin自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

Vue3快速上手

1.Vue3简介

2.Vue3带来了什么

1.性能提升

2.源码升级

3.拥抱TypeScript

4.新的特性

  1. Composition API(组合API)

  2. 新的内置组件

  3. 其他改变

一、创建Vue3.0工程

1.使用 vuecli 创建

官方文档https://cli.vuejs.org/zh/guide/creatingaproject.html#vuecreate

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

2.使用 vite 创建

官方文档https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网https://vitejs.cn

## 创建工程
npm init vite-app <project-name&gt;
## 进入工程目录
cd <project-name&gt;
## 安装依赖
npm install
## 运行
npm run dev

二、常用 Composition API

官方文档: https://v3.cn.vuejs.org/guide/compositionapiintroduction.html

1.拉开序幕的setup

  1. 理解:Vue3.0中一个新的配置项,值为一个函数
  2. setup是所有Composition API(组合API)“ 表演的舞台 ”
  3. 组件中所用到的:数据方法等等,均要配置setup中。
  4. setup函数的两种返回值
    1. 返回一个对象,则对象中的属性方法, 在模板中均可以直接使用。(重点关注!)
    2. 返回一个渲染函数:则可以自定义渲染内容。(了解)
  5. 注意点:
    1. 尽量不要与Vue2.x配置混用
    2. setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

2.ref函数

3.reactive函数

4.Vue3.0中的响应式原理

vue2.x的响应式

Vue3.0的响应式

5.reactive对比ref

6.setup的两个注意点

7.计算属性与监视

1.computed函数

2.watch函数

3.watchEffect函数

8.生命周期

vue2.x的生命周期
lifecycle_2
vue3.0的生命周期
lifecycle_2

1

9.自定义hook函数

10.toRef

三、其它 Composition API

1.shallowReactive 与 shallowRef

2.readonly 与 shallowReadonly

3.toRaw 与 markRaw

4.customRef

5.provideinject

6.响应式数据的判断

四、Composition API 的优势

1.Options API 存在问题

使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methodscomputed修改

2.Composition API 的优势

我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序组织在一起。

五、新的组件

1.Fragment

2.Teleport

3.Suspense

六、其他

1.全局API的转移

2.其他改变

原文地址:https://blog.csdn.net/michiko98/article/details/134768369

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_36100.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注