VUE3.0

引言：在vue2中我们可以使用 this.$refs.xxx调用组件内部的属性或者方法，同时子组件也可以使用 this.$parent.xxx 调用父组件的属性和方法； 但是 当我们在setup 语法

为什么会需要使用defineModel() 注意：defineModel() 需要在3.4及以上版本才可使用； 组件之间通讯，通过 props 和 emits 进行通讯,是单向数据流，比如：props

作用 1、vue3中编译宏，是一种特殊的代码，在编译时候，可以根据不同的宏，编译成不同的代码； 2、vue3中编译宏，只能用在setup顶层语法糖中，如果将编译宏写在setup的 非顶层语法里，则会将

引言： 上一节说了key的用途，而这个key属性，在vue的vnode 中至关重要，直接影响了虚拟DOM的更新机制； 什么场景中会用到diff算法 如：修改响应式属性需要重新渲染页面，会重新执行ren

本节说明介绍vue3中的特殊属性：key、is、ref； 其中key、is用法vue2、vue3基本一致，而ref在vue3 中与vue2中出入较大 1、key作用与用途 vue3与vue2的diff

keep-alive 1、目的 在使用组件时，有时我们需要将组件进行缓存，而不是重新渲染，用以提高性能，避免重复加载DOM，提升用户的体验； keep-alive 组件可以做到这一点，它允许你缓存组件

vue3 中新增的内置组件，用于处理异步组件加载的状态，使页面视觉可以更加平滑的过渡，用于异步组件异步数据的获取与处理，并提供一种新的组件加载状态，直到组件解析加载完成； 作用： 异步组件加载：当使用

作用目的： 用于将指定的组件或者元素传送到指定的位置； 通常是自定义的全局通用弹窗，绑定到 body 上，而不是在当前元素上面； 使用方法： 接收两个参数 to: 要将目标传到的位置； 可以是指定的元

常用的通讯方式有如下方式 props 自定义事件 $emits $on provide/inject $refs | $parent | $children | defineExpose() $att

1、组件的作用用途 目的： 提高代码的复用度，和便于维护，通过封装将复杂的功能代码拆分为更小的模块，方便管理， 当我们需要实现相同的功能时，我们只需要复用已经封装好的组件，而不需要重新编写相同的代码

本机介绍：provide/inject 注意：大家在看此小节时候，默认大家已经了解一些组件的使用方法 1、依赖注入的用途： 当嵌套层级多的时候，某个子组件需要较远层级的父组件数据时候，如果我们依然使用

本节主要介绍一下 v-slot 插槽指令，以及插槽相关内容 1、定义： 子组件给父组件提供使用的一个位置，使用<slot></slot>表示，父组件可以在这个位置填充任何代码； 2、默认插槽 匿名插槽

1、v-pre 作用：防止编译器解析某个特定的元素及其内容，即v-pre 会跳过当前元素以及其子元素的vue语法解析，并将其保持原样输出； 用于：vue 中一些没有指令和插值表达式的节点的元素，使用

1、自定义指令的作用： 自定义指令是用来操作底层DOM的，尽管vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和拓展，不仅仅可用于定义任何DOM操作，并且是可以

本文主要介绍以下api readonly()、isReadonly()、shallowReadonly()、isProxy()、toRaw()、markRaw() 1、readonly() 接受一个对

1、computed 计算属性：computed 原理：不管是 Vue2 中还是在 Vue 3 中，计算属性会基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。 在对赋值求

1、定义 reactive() 创建一个响应式代理对象，不同于ref()可以创建任意类型的数据，而reactive()只能是对象，会响应式的深层次解包任何属性，将其标注为响应式 响应式是基于ES6的p

主要记录以下api：ref()、isRef()、unref()、 shallowRef()、triggerRef()、customRef() 1、ref() 定义 接受一个内部值，返回一个响应式的、可

特殊说明： 以下vue3语法是基于 3.4之前版本进行使用的，3.4之后的版本 引入了 defineModel 宏，后续会介绍defineModel 1、vue3 与vue2 中v-model区别 v

使用vite 创建vue3项目 详细步骤与讲解，根据自己项目需要 选择 ts 或者 js 进行项目相关的基础构建