react & vue & angularvue

vue小宋总结

2022-07-12  本文已影响0人  金药

Vue 知识点

原理篇

一、Vue 响应式原理

二、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 就可以实现，也比较方便，但当一个组件需要向孙子级组件或者更深层次的组件传递数据时，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 属性来指定

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

八、$nextTick

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

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

上一篇下一篇

猜你喜欢

热点阅读