一、 Vue3快速入门

1. Vue3 带来了什么

性能的提升

打包和渲染更快
内存更少

源码的升级

使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和tree-Shaking

更好的支持TypeScript
新的特性

（1）Composition API（组合式API）

setup配置
ref与active
watch与watchEffect
provide与inject
。。。。。。

（2）新的内置组件

Fragment
Teleport
Suspense

（3）其它改变
- 新的生命周期钩子
- data选项始终被声明为一个函数
- 移除keyCode支持为v-on的修饰符

2. Vue3工程的创建

2.1 使用vue-cli创建

vue-cli官网

安装@vue/cli，确保vue-cli版本在4.5.0以上

cnpm install -g @vue/cli

升级@vue/cli

npm update -g @vue/cli

查看@vue/cli版本

vue --version

创建vue项目

winpty vue.cmd create 项目名

注：这样输入是为了解决git bash中上下箭头不能使用的问题。如果不需要自定义则可以输入“vue create 项目名”

启动项目

npm run serve

2.2 使用vite创建

vite官网

2.2.1 是什么

vite是新一代前端构建工具（webpack之后的）

2.2.2 vite的优势

开发环境中，vite无需打包，可快速的冷启动
轻量快速的热重载（HMR）
真正的按需编译，不需要等待整个应用编译完成

2.2.3 使用步骤

vue官方的vite使用

创建工程
npm 6.x

cnpm init vite@latest --template vue

npm 7+

cnpm init vite@latest – --template vue

或者

npm init vite-app 项目名称
进入项目目录

cd < project-name>
安装依赖

npm install
运行项目

npm run dev

3. vue3项目结构的分析

3.1 vue-cli 项目结构

Vue3新特性Composition API详解

main.js

// 不再引入Vue构造函数，引入的是名为createApp的工厂函数，无需通过new调用import{ createApp}from'vue'// 引入根组件APP.vueimport Appfrom'./App.vue'// createApp(App)：创建应用实例对象——app（类似于vue2中的vm，但app比vm更“轻”，即app没有vm那么多的方法属性等）const app=createApp(App)// 挂载
app.mount('#app')

vue3的模板结构中可以没有根节点

4. vue3中的开发者工具

4.1 在线安装

打开谷歌网上应用商店，搜索vue选择对应的版本

4.2 离线安装

下载工具
vue3开发者工具下载
打开谷歌扩展程序，将下载的 .crx 工具拖入扩展程序

二、常用Composition API

组合API都是函数，再使用时需要先引入（setup不需要引入）

1. setup

是vue3的一个新配置项，值是一个函数
执行时间：在beforeCreate之前，即组件创建之前
这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
在模版中需要使用的数据和函数，需要在 setup 返回

exportdefault{
  name:'App',setup(){console.log(this)},beforeCreate(){console.log('beforeCreate')},}

Vue3新特性Composition API详解
4.setup的参数

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
context：上下文对象
- attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
- slots: 收到的插槽内容, 相当于 this.$slots。
- emit: 分发自定义事件的函数, 相当于 this.$emit。

setup是所有组合式API表演的舞台，是组合式API的起点
组件中所用到的：数据（vue2中的data）、方法（vue2中的methods）、生命周期等，均需要写在setup中，且需要被返回后才可以在模板中使用
setup有两种返回值

返回一个对象，则对象中的属性、方法，在模板中可以直接使用
返回一个渲染函数，则可以自定义渲染的内容

// import {h} from 'vue'exportdefault{
  name:'App',setup(){// 数据（相当于vue2中的data）let name='dudu'// 方法（相当于vue2中的methods）constsayHi=()=>{console.log(`hi,${name}`)}// 返回一个对象return{
      name,
      sayHi}// 返回一个渲染函数// return () => {//   return h('要返回的元素','要返回的内容')// }},}

尽量不要vue2、vue3混用

vue3可以向下兼容vue2的data、methods，vue2的data、methods可以通过this获取setup中数据和方法
setup里不可以读取data、methods中数据、方法
如果vue2、vue3有重名，setup优先

setup不能是一个async函数，如果使用了async返回的就不是一个对象，而是promise，模板中也就不能使用。但是可以和Suspense、异步组件搭配使用async

2. ref函数

作用：定义响应式数据（一般用于基本类型）
语法：

import{ref}from'vue'exportdefault{......setup(){// const 定义的对象可以修改里面的属性const xxx=ref(initValue)return{
			xxx}}}

创建一个包含响应式数据的引用对象（reference对象）
JS操作数据：xxx.value
模板中读取数据不需要 .value

备注

接收的数据（initValue）可以是：基本类型、也可以是对象类型
基本类型的数据：响应式是通过Object.defineProperty()的get与set完成
对象类型的数据：通过vue3的新函数——reactive函数实现（proxy）

<script>import{ref}from'vue'exportdefault{
  name:'App',setup(){// 数据（相当于vue2中的data）let name=ref('dudu')//stringlet age=ref(4)// numberlet job=ref({type:'前端工程师',
      salary:'30K'})// 方法（相当于vue2中的methods）constchangeInfo=()=>{
      name.value='heihei'
      age.value=18
      job.value.type="高级算法工程师"
      job.value.salary='300W'}// 返回一个对象return{
      name,
      age,
      changeInfo,
      job}},}</script>

3. reactive函数

定义对象类型的响应式数据（基本类型用ref）

import { reactive } from ‘vue’
// 语法
const 代理对象 = reactive(源对象)

接收一个对象或数组，返回一个代理对象（proxy对象）
reactive定义的响应式数据是深层次的
内部基于ES6的proxy实现，通过代理对象对源对象内部数据进行操作

let job=reactive({type:'前端工程师',
      salary:'30K',
      test:{
        a:{
          b:{
            c:'666'}}}})let hobby=reactive(['唱歌','画画','跑步'])// 方法（相当于vue2中的methods）constchangeInfo=()=>{
      job.type='高级算法工程师'
      job.salary='300W'
      job.test.a.b.c='reactive是深层次的'
      hobby[0]='学习'}

4. ref和reactive的对比

定义

ref ：定义基本数据类型
reactive：定义对象或数组类型的数据

原理

ref：通过Object.defineProperty()的get和set来实现响应式（数据劫持）
reactive：通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部数据

使用：

ref定义的数据：操作数据需要.value ，读取数据时模板中不需要 .value
reactive定义的数据：操作和读取都不需要 .value
一般使用 reactive 较多，可以将基本类型的数据封装在对象里，然后再使用reactive

5. vue3中的响应式原理

5.1 Vue2 的响应式原理

实现原理

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

存在的问题

新增属性、删除属性，界面不会更新
直接通过下表修改数组，界面不会自动更新

5.2 vue3的响应式实现原理

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作

// 源数据let person={
            name:'嘟嘟',
            age:18}/*******  vue3的响应式原理 start *******/// p:代理数据，代理person// proxy代理对象const p=newProxy(person,{// 读取目标对象的某个属性时被调用get(target,propName){console.log(`p上的${propName}属性被读取了！！`)// Reflect反射对象return Reflect.get(target,propName)},// 修改或添加目标对象的属性时被调用set(target,propName,val){console.log(`p上的${propName}属性被修改了，此时界面会被更新`)
                Reflect.set[target,propName,val]},// 删除目标对象的某个属性时被调用deleteProperty(target,propName){console.log(`哦豁！！p上的${propName}属性删除了`)return Reflect.deleteProperty(target,propName)}})

6. computed

与Vue2中computed配置功能一致
使用vuex中的state时，需要用到响应式

第一步：先引入computed

import{ computed}from'vue'

使用：写在setup内部

setup(){...//计算属性——简写let fullName=computed(()=>{return person.firstName+'-'+ person.lastName})//计算属性——完整let fullName=computed({// 读get(){return person.firstName+'-'+ person.lastName},// 写set(value){const nameArr= value.split('-')
              person.firstName= nameArr[0]
              person.lastName= nameArr[1]}})

总结：计算属性两种用法

给computed传入函数，返回值就是计算属性的值
给computed传入对象，get获取计算属性的值，set监听计算属性改变。这种写法适用于需要读写计算属性的情况

7. watch

7.1 监视单个数据

// 监视（简单写法）/**
     * 第一个参数：要监视的内容
     * 第二个参数：监视的值：newValue、oldValue
     */watch(sum,(newVal,oldVal)=>{console.log('sum值发生了变化')})

7.2 监视多个数据

可以写多个watch，也可以写成数组形式

watch([xxx,xxxxx],(newVal,oldVal)=>{console.log('监视多个内容！',newVal,oldVal)})

7.3 参数问题

第一个参数：要监视的内容
第二个参数：监视的值：newValue、oldValue
watch的第三个参数为相关配置
immediate：是否立即监听
deep：深度监听

watch([xxx,xxxxxx],(newVal,oldVal)=>{console.log('监视多个内容！',newVal,oldVal)},{
      immediate:true,
      deep:true})

7.4 两个小坑

坑1： 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。

/* 监视reactive定义的响应式数据
  	若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
  	若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
  */watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{immediate:true,deep:false})//此处的deep配置不再奏效

坑2： 监视reactive定义的响应式数据中某个或某些属性时：deep配置有效
监视某个或某些属性要写成函数形式，返回需要监视的属性

//监视reactive定义的响应式数据中的某些属性watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)},{immediate:true,deep:true}

7.5 watch监视ref时的value问题

基本类型数据：监视的是数据对应的实例对象，加上了.value 表示监视ref的值
对象或数组：需要加上 .value 或者开启深度监视

7.6 watchEffect函数

watchEffect函数中直接写回调函数，不需要指定监视的内容
回调函数内部使用的数据就是被监视的数据

watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
watchEffect有点像computed
- 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
- 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。watchEffect(()=>{const x1= sum.valueconst x2= person.ageconsole.log('watchEffect配置的回调执行了')})

7.7 watch 和 computed 的区别

计算属性侧重于监听多个值的变化，最终计算并返回一个新值
侦听器侧重于监听单个数据的变化，最终执行特定的业务逻辑，不需要有任何的返回值

8. vue3的生命周期

8.1 vue2 的生命周期

包含创建、运行、销毁三个阶段
Vue3新特性Composition API详解

created 常用来发起ajax请求，此时组件在内存中已经被创建完毕
如果要**操作DOM元素，要在mounted**之后（包含mounted）
如果要在**数据发生变化后操作最新的DOM要在updated**中实现

8.2 vue3 的生命周期