Vue3学习笔记

样式穿透 样式穿透主要用于修改第三方组件库(Element ui)，虽然配好了样式但是我们还需要更改它的其他样式就需要用到样式穿透。 scoped原理 Vue中的scoped通过在DOM结构及Css加

开发移动端最主要的就是适配各种手机，为此我研究了一套解决方案 在之前我们用的是rem 根据HTML font-size 去做缩放 现在有了更好用的vw vh vw 视口的最大宽度，1vw等于视口宽度的

css Style完整新特性 1.插槽选择器 A 组件定义一个插槽 在App.vue 引入 在A组件修改class a 的颜色 无效果 默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容

插件是自包含的代码，通常向 Vue 添加全局级功能。你如果是一个对象需要有install方法Vue会帮你自动注入到install 方法 你如果是function 就直接当install 方法去使用。

因为Vue3 没有 Prototype 属性使用 app.config.globalProperties 代替然后去定义变量和函数 Vue2.x Vue3.x 案例 在setup中读取值

自定义Hook主要用来做一些可以复用的代码逻辑的封装。减少重复代码的数量。 在Vue2中提供了Mixins可以实现抽离相同的代码逻辑，每一个组件只需要引入mixins就能实现代码的复用。 但是Mixi

Vue中有很多方便快捷的指令，今天来学习一下Vue3的自定义指令。 在Vue3中自定义指令属于破坏性更新，和Vue2有了很明显的区别。 Vue3指令的钩子函数 created 元素初始化的时候 bef

v-model TIps 在Vue3 v-model 是破坏性更新的 v-model在组件里面也是很重要的 v-model 其实是一个语法糖 通过props 和 emit组合而成的 1.默认值的改变

Mitt 1.安装 2.main.ts 初始化 全局总线，vue 入口文件 main.js 中挂载全局属性 3.使用方法通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有

依赖注入Provide / Inject Provide / Inject 通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只

单个节点 多个节点，每次只渲染一个 那么怎么同时渲染整个列表，比如使用 v-for？在这种场景下，我们会使用 组件。在我们深入例子之前，先了解关于这个组件的几个特点： 默认情况下，它不会渲染一个包裹元

transtion 动画组件 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入或者离开过渡: 条件渲染 (使用 v-if) 条件展示 (使用 v-show)

keep-alive 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。 开启

Teleport传送组件 Teleport Vue 3.0新特性之一。 Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数

slot 插槽 插槽就是子组件中的提供给父组件使用的一个占位符,用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。 匿名插槽 1.在子组件放置一个

动态组件 什么是动态组件 就是：让多个组件使用同一个挂载点，并动态切换，这就是动态组件。 在挂载点使用component标签，然后使用v-bind:is=”组件” 用法如下 引入组件 通过is 切换

全局组件 使用方法 在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用 其次调用 component 第一个参数组件名称 第二个参数

父传子 父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值， 如以下代码 给Menu组件 传递了一个title 字符串类型是不需要v-bind 传递非字符串类型需要

生命周期 生命周期就是Vue在初始化应用的时候，给我们在特定时期调用的一些回调函数，我们可以在这些回调函数中做一些事情。 beforeCreate-> 使用setup() created-> 使用se

1.watch侦听器 2.watchEffect 高级侦听器 侦听器的用法，案例，细节，，，，，，