vue3快速上手-vue3核心语法-做项目必备

1.vue3简介

• 2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n

• 经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者

• 官方发版地址：Release v3.0.0 One Piece · vuejs/core

1.1. 【性能的提升】

• 打包大小减少41%。

• 初次渲染快55%, 更新渲染快133%。

• 内存减少54%。

1.2.【 源码的升级】

• 使用Proxy代替defineProperty实现响应式。

• 重写虚拟DOM的实现和Tree-Shaking。

1.3. 【拥抱TypeScript】

• Vue3可以更好的支持TypeScript。

1.4. 【新的特性】

1. Composition API（组合API）：

   • setup

   • ref与reactive

   • computed与watch

     ......

2. 新的内置组件：

   • Fragment

   • Teleport

   • Suspense

     ......

3. 其他改变：

   • 新的生命周期钩子

   • data 选项应始终被声明为一个函数

   • 移除keyCode支持作为v-on 的修饰符

     ......

2. vue3核心语法

2.1. 【OptionsAPI 与 CompositionAPI】

• Vue2的API设计是Options（配置）风格的。

• Vue3的API设计是Composition（组合）风格的。

Options API 的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

2.2. 【拉开序幕的 setup】

setup 概述

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

特点如下：

• setup函数返回的对象中的内容，可直接在模板中使用。

• setup中访问this是undefined。

• setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

setup 的返回值

• 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。

• 若返回一个函数：则可以自定义渲染内容，代码如下：

setup(){
  return ()=> '你好啊！'
}

setup 与 Options API 的关系

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

• 但在setup中不能访问到Vue2的配置（data、methos......）。

• 如果与Vue2冲突，则setup优先。

setup 语法糖

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

2.3. 【ref 创建：基本类型的响应式数据】

• 作用：定义响应式变量。

• 语法：let xxx = ref(初始值)。

• 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

• 注意点：

  • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。

  • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

2.4. 【reactive 创建：对象类型的响应式数据】

• 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）

• 语法：let 响应式对象= reactive(源对象)。

• 返回值：一个Proxy的实例对象，简称：响应式对象。

• 注意点：reactive定义的响应式数据是“深层次”的。

注意点:reactive定义的响应式数据,如果是从后端请求回来的数据,我们不能直接进行赋值,这样页面被没有进行渲染.

2.5. 【ref 创建：对象类型的响应式数据】

• 其实ref接收的数据可以是：基本类型、对象类型。

• 若ref接收的是对象类型，内部其实也是调用了reactive函数。

2.6. 【ref 对比 reactive】

宏观角度看：

1. ref用来定义：基本类型数据、对象类型数据；

2. reactive用来定义：对象类型数据。

• 区别：

1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。

2.reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

• 使用原则：

1. 若需要一个基本类型的响应式数据，必须使用ref。

2. 若需要一个响应式对象，层级不深，ref、reactive都可以。

3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

2.7. 【toRefs 与 toRef】

• 作用：将一个响应式对象中的每一个属性，转换为ref对象。

• 备注：toRefs与toRef功能一致，但toRefs可以批量转换。

• 语法如下：

2.8. 【computed】

作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。

2.9.【watch】

• 作用：监视数据的变化（和Vue2中的watch作用一致）

• 特点：Vue3中的watch只能监视以下四种数据：

1. ref定义的数据。

2. reactive定义的数据。

3. 函数返回一个值（getter函数）。

4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

* 情况一

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

​

* 情况二

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

• 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

• 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

​

* 情况三

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

​

* 情况四

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

1. 若该属性值不是【对象类型】，需要写成函数形式。

2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

​

* 情况五

监视上述的多个数据

​

2.10. 【watchEffect】

• 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

• watch对比watchEffect

  1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

  2. watch：要明确指出监视的数据

  3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

• 示例代码：

2.11. 【标签的 ref 属性】

作用：用于注册模板引用。

• 用在普通DOM标签上，获取的是DOM节点。

• 用在组件标签上，获取的是组件实例对象。

2.12. 【props】

2.13. 【生命周期】

• 概念：Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子

• 规律：

  生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

• Vue2的生命周期

  创建阶段：beforeCreate、created

  挂载阶段：beforeMount、mounted

  更新阶段：beforeUpdate、updated

  销毁阶段：beforeDestroy、destroyed

• Vue3的生命周期

  创建阶段：setup

  挂载阶段：onBeforeMount、onMounted

  更新阶段：onBeforeUpdate、onUpdated

  卸载阶段：onBeforeUnmount、onUnmounted

• 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

2.14. 【自定义hook】

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。

• 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。

4. 路由

4.1. 【对路由的理解】

官网:介绍 | Vue Router

不断持续更新......