Vue3笔记01 创建项目，Composition API，新组件，其他

Vue3

创建Vue3项目

vue-cli

//查看@vue/cli版本，确保在4.5.0以上
vue --version
//安装或升级@vue/cli
npm install -g @vue/cli
//创建项目
vue create new_project
//启动
cd new_project
npm run serve

也可以通过vue ui进入图形化界面进行创建

---

vite

新一代前端构建工具

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

项目结构

main.js

vue3开发工具插件与vue2不共用需重新下载

常用 Composition API

setup

理解：Vue3.0中一个新的配置项，值为一个函数

setup是所有 Compositon API(组合API) 表演的舞台

组件中所用到的：数据，方法等，均要配置在setup中

setup函数的两种返回值：

        若返回一个对象，则对象的属性，方法在模板中均可直接使用

        

        若返回一个渲染函数，则可以自定义渲染内容(了解)

        

注意：

        1、不要与Vue2配置混用，(data,method等)可以访问setup，反之不行，重名setup优先

        2、setup不能是一个async函数，因为async函数返回值不再是return对象，而是promise

ref函数

想要setup中数据是响应式的就需要，在定义是使用ref函数，并在使用时xxx.value来使用或修改

处理对象类型

总结

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

语法：const xxx=ref(initValue)  创建一个包含响应式数据的引用对象

用法：js操作数据xxx.value，模板读取数据{{xxx}}

备注：接收的数据可以是基本类型，也可以是对象类型

reactive函数

reactive与ref的区别

ref用来定义基本数据类型，ref定义对象或数组底层借助reactive

reactive用来定义对象或数组类型

ref定义的数据使用时需要xxx.value，ref定义的数据不用

Vue3.0响应式原理

通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写，属性的添加，删除

通过Reflect(反射)：对被代理对象的属性进行操作

setup的两个注意点

父组件传值，绑定事件

子组件接收使用数据，触发事件传参

props：值为对象，接收组件外传递过来并且组件内部声明接收了的属性，供setup使用

context：上下文对象

        attrs：值为对象，组件外部传递过来，但并没有在props中声明的属性

        (如果没有props:["msg"])，那么就可以在context.attrs中找到msg

        slots：收到的插槽内容，相当于this.$slots

        emit：分发自定义事件的函数，相当于this.$emit

computed计算属性

watch函数

监视ref函数定义的响应式数据

监视reactive定义的响应式数据

坑：

        监视reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监视

        监视reactive定义的响应式数据中某个属性时，deep配置有效

监视ref函数定义的对象类型响应式数据

watchEffect

Vue3生命周期

  

自定义hook函数

hook本质是一个函数，把setup函数中使用的Composition API进行了封装。

类似与Vue2中的mixin

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

原始写法

使用hook抽取公共数据

新建hooks文件夹

使用hook函数

toRef

作用：创建一个ref对象，其value值指向另一个对象中的某个属性

语法：const name=toRef(person,'name')

应用：要将响应式对象中的某个属性单独提供给外部使用时

toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)

其他Composition API

略

shallowReactive：只处理对象最外层的响应式(当一个对象数据变化的只有外层属性时使用)

shallowRef：只处理基本数据类型的响应式(当一个对象数据后续不会修改其内的属性，而是生成新对象整体替换时)

readonly：让一个响应式数据变为只读的(深只读)

shallowReadonly：让一个响应式数据变为只读的(浅只读) 不希望数据被修改时使用

toRaw：将一个由reactive生成的响应式对象转为普通对象

markRaw：标记一个对象，使其永远不会再成为响应式对象(有些值不应该被设置为响应式的，如第三方类库等；当渲染具有不可变数据的大列表时，跳过响应式转换可以提高性能)

---

customRef

创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制

防抖案例

---

provide&&inject

实现祖孙组件间通信(实际上所有后代组件都可以使用inject接收到)

 

响应式数据的判断

isRef：检查一个值是否为一个ref对象

isReactive：检查一个对象是否是由reactive创建的响应式代理

isReadonly：检查一个对象是否是由readonly创建的只读代理

isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

composition API的优势

传统OptionsAPI中：新增或者修改一个需求，我需要分别再data，method，computed中修改

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

Vue3新组件

Fragment

在Vue2中，组件必须有一个根标签

在Vue3中，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中

减少标签层级，减小内存占用

Teleport

Teleport是一种能够将我们的组件html结构移动到指定位置的技术

 

传到body后，就可以方便的进行定位以及一些遮罩效果的编写

Suspense

等待异步组件时渲染一些额外的内容，让应用有更好用户体验

其他

全局API的转移

将vue.xxx转移到app(应用实例)上

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

过渡类名的更改

移除keyCode作为v-on的修饰符，同时也不在支持config.keyCodes

移除v-on.native修饰符

移除过滤器（建议使用方法调用或计算属性去替换）