Vue3.0

v-model ref 属性 Teleport 等等。。。。。。。。。。。。。。。。。。。。。。。，。

父传子 子传父 provide/inject 📝 把 App.vue 中的数据传递给孙组件，Child.vue。

内容 组合 API生命周期写法，其实 选项 API 的写法在 Vue3 中也是支持。 Vue3（组合 API）常用的生命周期钩子有 7 个，可以多次使用同一个钩子，执行顺序和书写顺序相同。 setup

监听一个 ref 数据 📝 监听 age 的变化，做一些操作。 监听多个 ref 数据 📝 可以通过数组的形式，同时监听 age 和 num 的变化。 立即触发监听 开启深度监听 ref 数据 解决

监听 reactive 内部数据 注意 1：监听 reactive 内部数据时，强制开启了深度监听，且配置无效；监听对象的时候 newValue 和 oldValue 是全等的。 注意 2：react

Vue3.0中computed的作用：computed 是Vue3.0中函数用来定义计算属性。。。。

toRef 内容 toRef 函数的作用：转换响应式对象中某个属性为单独响应式数据，并且转换后的值和之前是关联的（ref 函数也可以转换，但值非关联）。

ref 其实也可以包裹复杂数据类型为响应式数据，一般对于数据类型未确定的情况下推荐使用 ref，例如后端返回的数据。

监听一个 ref 数据 📝 监听 age 的变化，做一些操作 监听多个 ref 数据 📝 可以通过数组的形式，同时监听 age 和 num 的变化。 立即触发监听

computed 基本 作用：computed 函数用来定义计算属性。 Watch 监听 reactive 内部数据

内容 toRefs 函数的作用：转换响应式对象中所有属性为单独响应式数据，并且转换后的值和之前是关联的。

内容 toRef 函数的作用：转换响应式对象中某个属性为单独响应式数据，并且转换后的值和之前是关联的（ref 函数也可以转换，但值非关联）。

基本使用 ref 函数，可以把简单数据类型包裹为响应式数据（复杂类型也可以），注意 JS 中操作值的时候，需要加 .value 属性，模板中正常使用即可。 包装复杂数据类型 注意：ref 其实也可以包

内容： reactive是一个函数，用来将普通对象/数组包装成响应式数据使用。 实列 数据缺失是删除了，但是试图没更新，不是响应式的！ 所以可以用reactive包装数组

Vue2 优点;已于学习和使用，写代码的位置约定好。 Vue3 优点：可以把同一功能的数据 和业务逻辑组织到一起，方便复用和维护。

Vite基本使用 内容 是下一代前端开发与构建工具，热更新、打包构建速度更快，但目前周边生态还不如Webpack成熟，所以实际开发中还是建议使用Webpack。 但目前就学习Vue3 语法来说，我们可

Vue3基本概述 内容 2020年9月18日，Vue发布了3.0版本，代号：One Piece(海贼王)，周边生态原因，当时大多数开发者还处于观望状态。 现在主流组件库都已经发布了支持Vue3.0