Vue相关

Vue2

组件传递事件：
props $emit
sync v-model
$parent / $children $parent获取父组件的实例，任意调用父组件的方法，修改父组件的数据
ref 父组件获取子组件实例，任意调用子组件的方法获取子组件的属性
provide / injectprpvide父组件内部提供数据inject嵌套的子组件可以注入数据
$attrs / $listeners $attrs(没有被props接收的所有自定义属性) $listeners(可以获取所有的父组件传递过来的自定义事件)
eventBus 定义一个事件总线使用$on 绑定 $emit 触发
vuex\vue3使用pinia

pinia:修改数据的4种方式：1.storeToRefs、2.$patch(对象或者3.函数)、 4.store action里面
路由传参

NextTick是什么？

在修改数据之后立即使用这个方法，获取更新后的 DOM

修饰符passive：监听元素滚动， pc 端是没啥问题。移动端，会让我们的网页变卡，使用这个修饰符的时候，相当于给onscroll 事件整了一个.lazy 修饰符

scoped原理是什么？

作用：使样式私有化（模块化），不对全局造成污染

原理：动态的给组件加上一个hash值，用属性选择器去匹配

vue响应式原理（数据劫持）

格式不同：v-model=“num”, :num.sync=“num”

v-model只能用一次；.sync可以有多个

如何做样式穿透

如果不添加scoped，可能影响全局样式，如果添加scoped，嵌套的子组件内部样式不能生效

scss:使用::v-deep

less:使用 /deep/

路由导航

全局导航钩子：beforeEach、beforeResolve、afterEach

组件内的钩子：beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave

路由独享的守卫：beforeEnter

完整的导航解析流程

1. 导航被触发。

2. 在失活的组件里调用 beforeRouteLeave 守卫。

3. 调用全局的 beforeEach 守卫。

4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。

5. 在路由配置里调用 beforeEnter。

解析异步路由组件。

7. 在被激活的组件里调用 beforeRouteEnter。

8. 调用全局的 beforeResolve 守卫(2.5+)。

导航被确认。

10. 调用全局的 afterEach 钩子。

触发 DOM 更新。

调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

自定义指令钩子函数

每个指令都有 bind、inserted、update、componentupdated 和 unbind 等钩子函数

e l
binding
- value：传递给指令的值。
- oldValue：之前的值
- arg：传递给指令的参数
- modifiers：一个包含修饰符的对象
- instance：使用该指令的组件实例.
- dir：指令的定义对象.
vnode
prevNode

Vue3

新特性：

数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能
(原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持
虚拟DOM - 新算法 (更快更小)
提供了composition api, 可以更好的逻辑复用
模板可以有多个根元素
源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)

使用：

Setup特性：更好地支持Composition API（组合式API）的使用

setup会在beforeCreate钩子函数之前执行

页面使用的方法都需要从vue中引入

Vue3。Tree shaking：清除多余代码优化打包

好处：静态类型检查、面向对象编程（接口、类、继承）、兼容想、模块化开发、

setup中不能使用this, this指向undefined

setup需要有返回值,只有返回的值才能在模板中使用
1. 支持逻辑复用：使用setup函数可以将组件中的逻辑进行复用。将逻辑封装为可复用的函数，然后在多个组件中使用。这种方式避免了传统Vue2中mixins的问题，能够更灵活地复用逻辑。
2. 更好的组织代码：使用setup函数能够更好地组织代码，将组件内部的逻辑和状态集中在一个地方。通过setup函数，可以将组件逻辑按照功能进行划分，使代码更加清晰、易读、易维护。
3. 更方便地访问组件实例：在Vue2中，通过this可以访问到组件实例，但在Vue3中，组件实例没有被作为默认参数传递给setup函数。而是通过返回一个包含组件实例和其他数据的对象来访问组件实例，可以更灵活地控制访问组件实例的时机和方式。 Vue3可以通过getCurrentInstance获取当前实例，但不推荐，因为它破坏了组件的封装性和可测试性
4. 提高性能：Vue3通过静态分析组件的模板和组合式API的代码，可以更好地优化组件的渲染过程。使用setup函数可以帮助Vue3更好地理解组件的逻辑，提高渲染性能。
总结：使用setup函数可以更好地支持Composition API的使用，提高代码的复用性、组织性和性能。使用setup函数能够更好地封装和组织组件内部的逻辑和状态，使代码结构更清晰、易读、易维护

默认普通的数据,不是响应式的