第一章 vue3 安装

1.1安装

安装的方式有很多种，我们选择 npm

1. 查看版本
   $ npm -v
   2.3.0
2. 升级
   npm cnpm install npm -g
3. 升级或安装 cnpm
   cnpm npm install cnpm -g
4. 最新稳定版
   npm init vue@latest
5. 安装依赖包
   cd runoob-vue3-test

1.2开启服务器

npm run dev

1.3 使用图形化界面

使用vue ui 命令来打开图形化界面创建和管理项目。

vue ui

vue ui是可视化界面，方便你去创建，更新和管理vue项目，包括下载router，vuex，axios，elementui等插件，配置好一些属性以及依赖关系，方便我们使用。
执行以上命令会在浏览器中打开图形化界面来引导项目创建：

1.4 Vite

vite是一个web开发构建工具，由于其原生ES6模块导入方式，可以实现闪电般的冷却服务器启动。通过在终端输入以下命令可以快速构建vue项目，语法格式如下：

npm init vite-app <project-name>

创建项目 runoob-vue3-test2:

npm init vite-app runoob-vue3-test2

运行项目

$ cd runoob-vue3-test2
$ cnpm install
$ cnpm run dev
> runoob-vue3-test2@0.0.0 dev /Users/tianqixin/runoob-test/vue3/runoob-vue3-test2
> vite

最后打开项目：
打开 http://localhost:3000/

1.5 vue3项目打包

打包命令的指令如下：

cnpm run  build

打包完成显示界面：

打包完成文件夹显示界面

双击index.html 就能显示界面，当然也有可能是空白界面，要正常显示则需要修改下 index.html 文件中 js、css 文件路径。
当打包的时候出现：

错误的时候，是因为：错误引用方式：

正确的引用方式如下：

1.6 vue3 创建项目

1.6.1 vue create命令

vue create 创建命令的语法格式如下：
vue create 【option】< app-name >
创建一个由vue-cli-service 提供支持的新项目：
【option】可以选择的是：

• -p, --preset ： 忽略提示符并使用已保存的或远程的预设选项
• -d, --default： 忽略提示符并使用默认预设选项
• -i, --inlinePreset ： 忽略提示符并使用内联的 JSON 字符串预设选项
• -m, --packageManager ： 在安装依赖时使用指定的 npm 客户端
  -r, --registry ： 在安装依赖时使用指定的 npm registry
  -g, --git [message]： 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git： 跳过 git 初始化
  -f, --force： 覆写目标目录可能存在的配置
  -c, --clone： 使用 git clone 获取远程预设选项
  -x, --proxy： 使用指定的代理创建项目
  -b, --bare： 创建项目时省略默认组件中的新手指导信息
  -h, --help： 输出使用帮助信息

1.6.2 创建一个项目

• vue create vue3test
• 执行以上命令会出现安装界面，然后会出现安装界面，按下回车就会安装，等待安装完成即可。
• 启动应用 npm run serve

import {creatApp} from 'vue'
import App from './App.vue'
//创建应用的实例对象--app（类似于之间的vue2 中的vm）
const App =createApp（App）
//挂载
app.mount('#app')

第二章 vue3 基础

2.1 vue3 的目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
node_modules	配置目录，包括端口号等。我们初学可以使用默认的。
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：asserts :放置图片，比如logo；components:放置组件信息；App.vue：项目入口，main.js 项目核心文件；index.css 样式文件。
static	静态资源目录，如图片、字体等。
public	公共资源
test	初始测试目录
index.html	首页入口
package.JSON	项目配置文件
Readme.md	项目的说明文档
dist	使用npm run build 命令打包后生成该目录。

2.2 vue3 的起步

Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：

const app = Vue.createApp({ /* 选项 */ })

传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。

Vue.createApp(HelloVueApp).mount('#hello-vue')

createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。

一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount(‘#hello-vue’) 将 Vue 应用 HelloVueApp 挂载到

中。
mount(‘#hello-vue’) 将 Vue 应用 HelloVueApp 挂载到 < div id=“hello-vue”>< /div> 中。

{{ }} 用于输出对象属性和函数返回值。

{{ message }} 对应应用中 message 的值。

2.2.2 data 选项

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

2,2.3 methods

我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。

2.3 Vue3 指令

Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。

Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。

与传统的 JavaScript 方法相比，使用 Vue 创建响应式页面要容易得多，并且需要的代码更少。

以下是几个常用的 Vue 指令：

指令	用法
v-bind 缩写 ：	用于将 Vue 实例的数据绑定到 HTML 元素的属性上。
v-if	用于根据表达式的值来条件性地渲染元素或组件。
v-show	v-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。
v-for	用于根据数组或对象的属性值来循环渲染元素或组件。
v-on缩写@	用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。
v-model	用于在表单控件和 Vue 实例的数据之间创建双向数据绑定

除了这些常用的指令，Vue 还提供了一些其他的指令，如 v-text、v-html 等，以及自定义指令，让开发者能够更加灵活地操作 DOM 元素。

2.4 vue3 模板语法

vue使用了基于html的模板语法，允许开发者声明式的将DOM的绑定到底层vue实例的数据，

2.4.1 插值

2.4.1 .1 文本

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值
{{…}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{…}} 标签内容也会更新。

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

2.4.1.2 html

使用v-html指令输出html代码。

2.4.1.3 属性

HTML 属性中的值应使用 v-bind 指令。对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。

2.1.1.4 表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

第三章 常用的Composition API

3.1 set up

1. vue3 的新的配置项，值是函数
2. 组件中的：数据，方法等，都要配置在set up 中
3. set up 的两种返回值：
   一种是返回一个对象，对象的属性，方法在模板中都可以直接使用。
   另一种是返回一个渲染函数：则可以自定义渲染内容（了解即可）

渲染函数：
import {h} from ‘vue’
return ()=>h(‘h1’,‘尚硅谷’)

• 注意点：
  尽量不要和vue2 配置混淆
  vue2.x的配置（data methods compute ）中可以访问到setup 中的属性和方法。但是在sutup 中不能访问到vuex中的配置（data methods compute）如果有重名的，setup优先。
  setup不是一个async函数，因为返回值不在是return对象，而是promise 模板看不到return 对象中 的属性。
  案例：
  

3.2 ref

• 作用：定义一个响应式的数据

• 语法：const xx = ref(initValue)
  创建一个包含响应式的数据引用对象（reference对象）
  js中操作数据：xxx.value
  模板中读取数据的时候不需要使用value

• 备注：
  接收的数据的类型可以是基本类型也能是对象类型
  基本类型的数据是依靠响应式object.defineProperty()的get与set完成的
  对象类型的数据：内部的‘求助’vue的一个新的函数-----reactive函数
  

3.3 reactive 函数

• 作用：定义一个对象类型的响应式数据（基本类型不能用，只能用ref）
• 语法：const 代理对象 = reactive（源对象）接收一个对象（或者数组），返回一个代理对象（Proxy的实例对象）
• reactive 定义的响应式数据是‘深层次的’
• 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

3.4 vue2中的响应式原理

• 实现原理
  对象类型：通过Object.defineProperty() 对属性的读取，修改进行拦截（数据劫持）
  数据类型：通过重写更新数组的一系列方法来实现拦截

Object.defineProperty(data,'count',{
get(){}
set(){}
})

存在的问题：
新增属性。删除属性，界面不会更新
直接通过下标修改数据，界面不会自动更新。

3.5 vue3中的响应式原理

实现原理：通过proxy代理：拦截对象中的任意属性的变化，包括：属性的增删改查
通过reflect（反射）：对被代理的属性进行操作
实例：

3.5.1 reactive 和ref的对比

• 从定义的角度上来看：ref用于定义基本数据类型，而reactive用于定义对象数据类型，当然ref也能定义对象数据类型，内部会指定通过reactive转为代理数据类型（proxy）
• 从原理上来看 ref通过object.defineProperty（）的get和set（）来实现响应式数据劫持，而reactive是通过proxy来实现响应式数据劫持，并且通过reflect操作源对象的内部数据
• 从使用角度上来看，ref：操作数据需要 .value。读取数据时候的模板中直接读取不需要.value reactive：操作的时候和读取数据的时候都不需要value

3.6 setup的注意事项

• setup 执行机制：
  在beforeCreate之前执行一次，this是undifined
• setup 的参数：
  props：值是对象，包含：组件外部传递过来，和组件内部声明接收了的属性
  context：上下文对象（本质是一个对象）
  attrs：值为对象，包含：组件外部传递的信息，但是没有在props配置中声明的属性，相当于this.$attrs
  slots:收到的插槽内容相当this. $emit

3.7 计算属性和监视

3.7.1 computed 函数

与vuex2 中的计算属性相同
写法：

3.7.2 watch属性

组合式的api
首先要引用：

import {reactive,computed,ref,watch} from 'vue'

使用：
情况一：监视ref所定义的一个响应式数据

watch(n,(newValue,oldValue)=>{console.log('n变了',newValue,oldValue)
})

情况二：监视ref定义的多个响应式数据

let str= ref('你好呀')
watch([n,str],(newValue,oldValue)=>{console.log('n 或者str变了',newValue,oldValue)
},{immediate:true})

情况三：watch监视reactive属性的值
注意：此处无法正确获取oldvalue,强制开启的深度监视，使用deep：false无效

watch(person,(newValue,oldValue)=>{console.log('person发生了变化',newValue,oldValue)
})

情况四：只监视reactive所定义的一个响应式的数组中的一个属性

watch(()=>person.name,(newValue,oldValue)=>{console.log('只有名字改变了',newValue,oldValue)
})

情况5：监视reactive所定义的响应式数组的许多的数据的变化，将多组数据写成数组的形式

watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{console.log('数据发生了变化',newValue,oldValue)})

情况6：监视reactive所定义的响应式数组中的更深一层的数据变化(这个是时候需要使用深度显示deep属性)

  watch(()=>person.job,(newValue,oldValue)=>{console.log('job发生了变化',oldValue,newValue)},{deep:true})//

3.7.3 watchEffect

上来就写回调，不写监视谁。
监视watchEffect中的函数中包含的数据
watchEffect和computed很相似：
但是computed注重的是值，所以要写返回值，
watchEffect注重的是过程，所以不用写返回值。

3.8 vue3的生命周期

在vue3 换名字的只有最后一组：befortUnmount / Unmounted （卸载前面/卸载后）
最开始就调用CreatApp，之后才会调用，不用。
生命周期：

vue3提供了组合式api形式的生命周期的钩子，与vuex2的关系是如下表所示：

vue2	vue3
beforeCreat	setup()
created	setup
beforeMount	onBeforeMounted
mounted	onMounted
beforeUpdate	onBeforeUpdate
update	onUpdate
beforeUnmount	onBeforeUnmount
Unmounted	onUnmounted

onbeforemount的优先级高于beforeMount

3.9 自定义hook函数

• 什么是hook？ —本质是一个函数，把setup函数中使用组合式api进行封装
• 类似于vue2的mixin
• 自定义hook的优势是：复用代码，让setup中的逻辑更加的清除。

3.10 toRef

• 作用：创建一个ref对象，其value值指向另一个对象中的某个属性值，
• 语法：const name = toRef(person,‘name’)
• 应用：要将响应式对象中的某个属性单独提供给外部使用时
• 扩展：toRefs和toRef功能一致，但是可以批量创建多个ref对象，语法：toRefs（person）

第4章 一些其他的组合API

4.1 shallowReactive 和shallowRef （浅层次的响应式，只处理第一层）

• shallowReactive：只处理对象最外层的属性的响应式（浅层响应式）
• shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
• 什么时候使用： 如果有一个对象数据，结构比较深，但是变化时候只有外层属性变化 ==》shallowReactive
  如果有一个对象数据，后续功能不会改变对象的属性，而新生成的对象来替换 ==》shallowRef

4.2 readonly与shallowReadonly

• readonly：是将一个响应式数据变成只读（深只读模式）
• shallowReadonly：让一个响应式数据变成只读模式（浅只读）
• 应用场景：不希望数据被修改

4.3 toRaw 与markRaw

• toRaw ：
  作用是：将一个由reactive生成的响应式对象（后面用到数据能改变）转为普通对象
  使用场景：用于读取响应式对象当中的普通对象，对这个普通对象的所有操作，不会引起页面更新，
• markRaw：永远不会成为响应式数据了。

4.4 customRef

• 作用：创建一个自定义的ref（本质上是一个函数，或者是容器），并对其依赖项进行跟踪和更新触发进行显示控制。
• 实现防抖动效果（延迟显示）：

   name:'App',setup(){//使用程序员自己定义的ref// let keyword = ref('hello')//自定义一个myref函数function myref(value){return customRef((track,trigger)=>{return{//有人读get(){track()//通知vue去追踪数据变化console.log('有人读取了数据')return value},//有人改set(newvalue){console.log('有人改了数据')//取消其设置的延迟操作clearTimeout(timer)timer = setTimeout(()=>{value= newvalue trigger()//通知vue去重新解析模板},5000)},}})}//自定义let keyword = myref('hello')return {keyword}}

4.4 provide与 inject

实现 祖和后代之间的通信。
套路：父组件用一个provide来提供数据，后代组件使用inject来收取这些被提供的数据。
具体的操作方法：
父组件：

 setup() {let car = reactive({name:'奔驰',price:'40k'})provide('car',car)

接收组件：

   setup(){let car = inject('car')return{car}}

4.5响应式数据的判断

isRef（）、isReactive。。。

4.6 组合式api的优势

vue2 中的是配置式api vue3 是组合式api，
使用传统的option的api时候，新增或者修改一个需求，要分别在data method和computed中修改
vue3可以更加优雅的组织函数，代码和功能，让相关的函数更加有序的组织在一起。

4.7Fragment组件

• 在vue2中：组件必须是一个根标签
• 在vue3中，组件可以没有根组件，内部会将多个标签包含在一个Fragment虚拟元素中
• 好处：减少标签层数，减小内存的占用

4.8 Teleport组件

• 定义：将组件html结构移动到指定位置的技术。

4.9 Suspense组件

• 等待异步组件时渲染一些额外内容，让应用有更好的体验感
• 使用步骤：
  1.异步引入组件
  2.使用suspense包裹组件，并且配置好default与fallback（v-solt）

第五章 其他

5.1 全局API的转移

• vue2.有许多的全局API和配置：如全局注册，全局指令
• vue3对这些api都做了调整，将全局的api都调整到了应用实例上面（app）

5.2 其他

data选项必须申明为函数
过度类名的更改
移除keyCode作为v-on的修饰符
移除v-on.native的修饰（表示为原生事件） ：通过emit[‘close’]申明自定义事件。
移除过滤器