vue小宋总结

Vue 知识点

原理篇

一、Vue 响应式原理

• Vue2 中，是通过 ES5 中的defineProperty api 来对对象的属性进行 get 和 set 操作的拦截，在进行拦截操作时还创建了一个 watcher 用来跟踪对应的 value 的变化，因为这种方式无法对数组进行拦截，所以在 vue 中，要实现数组的响应式，需要调用其内置的 set 的用法），defineProperty 是一个无法 polyfill 的api，所以 vue 不支持 IE8 以下的版本
• Vue3 使用ES6 的 Proxy 内置对象完全改了响应式的底层实现，但原理都是类似地，（为对象属性添加拦截器和侦听器），Proxy 能更高效地对对象添加自定义操作，同时也支持了对数组的代理。不过也有问题，就是 Proxy 不支持对原始类型数据的代理，所以在 vue3 中，为实现原始类型数据的响应，对原始数据类型进行了对象化包装。同样地，Proxy 也是一个无法被 polyfill 的 api，所以 vue3 不支持 IE11 以下的版本

二、v-model的实现原理

v-model 是通过表单元素的 change/input 事件，然后在事件触发时，发送一个 自定义的 update 事件，并将原始事件对象中的 value 当作参数发送出去，然后更新到 v-model 绑定的值上

应用（APP）篇

三、组件的生命周期

Vue 2

beforeCreated => created => beforeMount => mounted => beforeDestroy => destroyed

如果组件发生了更新，还会触发以下生命周期钩子

beforeUpdate => updated

如果使用了 keep-alive，则会额外增加两个生命周期: actived, deactived

Vue 3

Vue 3 新增了组合式 API，不过 Vue 2 中的 Option API 也可以继续使用，要使用组合式 API，需要使用 setup 方法或者 <script setup> 语法糖

在组合式 API 中，beforeCreated 和 created 直接整合到了 setup 方法，其他的采用了 on + 生命周期名称形式的方法钩子函数，其中 destroy相关的钩子都改成了 unmounted / beforeUnmount

选项式 API 生命周期

Vue2.x	Vue3.x	Composition API
beforeCreate	-- (代表无变化)	setup
created	--	setup
beforeMount	--	onBeforeMount
mounted	--	onMounted
beforeDestroy	beforeUnmount	onBeforeUnmount
destroyed	unmounted	onMounted

同样的，beforeUpdate 在 composition API 中需要使用 onBeforeUpdate, updated => onUpdated, activated => onActivated

四、组件间的通信

父子级组件

当子组件需要接收父组件中的数据时，可以通过 props 的方式传递

当父组件需要获取子组件中的数据时，可以在子组件中发送一个自定义事件，然后将相关数据当作参数传递出去，在父组件中监听对应的事件并接收参数。另外一种方式就是给子组件添加一个 ref，然后在父组件中通过 this.$refs.[componentRefName]的方式获取子组件的实例然后拿到子组件中的数据

同级组件

同级组件之间进行数据通信，通常可以使用以下几种方式：

• 将数据交给共同的父级组件管理，子组件通过自定义事件将父组件传递数据，而父组件通过 props 将数据传给子组件，这种方式相对来说比较麻烦，有时可能需要层层上传，甚至到根组件
• 在 Vue 2 中可以通过 new 一个 Vue 的实例来创建 eventBus，通过全局事件总线来传递数据，不过这种方式在 vue 3 中被废弃了
• 通过第三方 PubSub 工具（比如：emitter）创建自定义事件，通过事件参数的方式来实现同级组件之间的通信
• 使用 Vuex / redux 这种全局状态管理工具也可以实现组件间的数据通信
• 还有种方式就是通过 mixin，但这种方式容易导致数据被污染，一般不建议使用

深层嵌套组件

父子级组件进行数据传递，通过 props 就可以实现，也比较方便，但当一个组件需要向孙子级组件或者更深层次的组件传递数据时，props 就显得比较复杂了，每个子组件上都需要添加一个 props，这种方法十分不方便，所以 Vue 提供了 Provider/Inject来实现多级嵌套组件之间的数据传递。

在顶层组件中使用 Provider 定义需要传递下去的数据，在嵌套层级组件中通过 Inject 来使用

需要注意的是，组件 Provider 中的数据，只提供给其子孙级组件使用

五、对 Vue 进行扩展

在 vue 2 中，可以通过给 Vue 的原型加上自定义的方法来实现全局的方法，在组件实例中通过 this.customMethod 调用

Vue.prototype.customMethod

Vue 3 废弃了修改 prototype 来对 vue 进行自定义扩展的操作。vue 3 为应用实例（通常命名为 app）添加了 config 对象属性，在 config 属性上，通过配置 globalProperties 来实现自定义扩展，调用的方法与 vue 2 中基本一致

六、API 篇

1. v-if 与 v-show 的异同

   v-if 与 v-show 都是控制元素的显示与隐藏，其中 v-if 是通过控制 DOM 节点的创建与销毁来实现的，v-show 是通过控制 css 中的 display 属性来实现的。

   v-if 有更高的渲染开销，v-show 有更高的初始化开销，如果要频繁控制 DOM 节点的话，需要使用 v-show，如果用在组件上，需要能触发组件的生命周期，则需要使用 v-if，这时需要注意最好不要对组件进行频繁的显示与隐藏切换操作

   另外，v-if 可以与 v-else-if, v-else 配合使用来进行条件渲染，不过绑定了这些指令的元素必须为同级的

2. v-if 与 v-for

   v-if 与 v-for 其实是可以在同一个元素上使用的，但是不管是官方还是实际项目中都不推荐这么使用，如果需要在 v-for 生成的列表元素使用条件渲染，建议将 v-for 放在一个 template 标签上去使用，同理，也是建议将 v-if 放在 template 上去使用，也可以自定义一个包裹容器，只是 template 不会生成额外的 DOM 节点。

   优先级：在 vue 2.x 中，v-for 的优先级要比 v-if 高，但在 vue 3中，v-if 的优先级要比 v-for 高

3. key 的作用

   在 vue 中，key 这个属性最常见的用法就是与 v-for 一起使用，当然也可以独立使用，key 的主要作用就是对组件或虚拟DOM节点添加唯一标识符，方便底层 diff 算法在节点或组件发生变化时能快速定位更新。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。某些时候会导致 BUG，比如 v-for 渲染了 输入类元素时，缺少 key 或使用 index 当作key时，当列表长度发生了非顺序性变化时，就极易出 BUG。

4. watch 与 computed

   watch 与 computed 在很多时候，用法都差不多，但也有差异，computed 主要是依赖项发生了变化时，它自身属性跟着变化，但如果其依赖项没有发生变化时，则其同样不会发生变化，这种特性使其可以用来进行一定的性能优化。watch 主要是当侦听的数据发生变化时，去触发其他的数据变化。

   简单来说，watch 主要用于需要根据数据变化来修改其他数据的操作，而computed更适用于依赖其他数据变化来修改自身的操作

   另外，有较大开销和异步操作时，watch 更合适

5. 样式绑定

   Class绑定：vue 可以对元素的类名进行动态绑定，其值大概有以下几种：

   • { className: truthy | falsy }： 当绑定的值为对象时，该对象的属性则会被编译成元素的类目，而属性对应的值应该为一个Boolean值，用于控制该属性是否被编译成类目
   • classNameString[]： 纯 className 字符串组成的数组，数组中的所以元素都会被编译成样式类别
   • classNameString | classObject []: 对象语法与数组语法混用的模式

   Style 绑定：

   • { styleProperty: styleValue }: 当样式绑定的值为对象时，对象的property则应该为具体样式对应的属性，value 则为样式的值，注意写法需要符合js对象的基本语法
   • styleObj[]: 当绑定的值为数组时，则数组中的每个元素应该为一个样式对象的引用

6. 组件props 与 data 的优先级

   根据 vue 的源码，props 的优先级要高于 data，也就是说当 props 和 data 中有同名属性时，最终会渲染 data 中的而不是 props 中的那个

7. 异步组件：在组件的 components 中，通过() => import(Component)导入的组件就是异步组件

8. 动态组件：需要配合 keep-alive 使用，通过给组件添加 :is 属性来指定

七、其他需要熟悉用法的功能

• 自定义指令
• 插槽与作用域插槽
• 渲染函数（比较高级的用法，包括在 Vue 中写 JSX）
• 过滤器（Vue 3 废弃了，vue2中用的也不算多)

八、$nextTick

简单的来说，nextTick 的工作原理就是将传入的回调收集起来，等到 DOM 加载完成或者watcher触发之后再调用。因为是用的依赖收集的机制，所以先被收集的会先执行，所以如果多个 nextTick 嵌套时，外层的nextTick 会先执行

Vue 3 新增的一些值得关注的特性

• Composition API （重点）
  • setup 方法
  • <script setup> 语法糖
  • 在 Composition API 中慎用解构赋值(可能导致响应性丢失)，或者需要配合 toRefs 使用
• Teleport内置组件 （了解用法）
• 在 <style> 标签中使用 JS 变量
• 深度选择器的变更
• 样式的插槽选择器与全局选择器