Vue重点知识总结—理论篇(二)

前端 4,674° Views

作为前端开发中现行最火的框架之一，基于此，总结了一些 Vue 方面经常出现的问题，留给自己查看消化，也分享给有需要的小伙伴。

由于篇幅较长，不能将所有知识点放到一篇文章内。这是Vue重点知识梳理理论篇的第二篇。前端茫茫，学无止境。

1.模板引擎原理（指令和插槽表达式如何生效）

使用with改变作用域，渲染数据。并将其包到字符串中。`var render = with(vm){return ${data}}`，使用new Function(render)执行字符串语句。

2.描述组件渲染和更新过程

渲染组件时，会通过Vue.extend()方法构建子组件的构造函数并实例化为vueComponent。extend方法会合并一些父类如Vue的属性。最终手动调用$mount()进行挂载。更新组件时会进行patchVnode流程，也就是diff流程。

3.为什么要使用异步组件加载方式？

如果组件功能较多，打包出的文件会过大。导致页面加载过慢。这时候可以使用import("url")函数异步加载组件的方式，可以实现文件的分隔加载。

  1. 会将组件分开打包。减小体积。
  2. 会采用jsonp的方式加载，有效解决一个文件过大问题。
  3. import语法是webpack提供的。
  4. 异步组件一定是一个函数。
components:{
    mycomp:()=>import("../components/mycomp.vue")
}

4. Vue-loader 是什么

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序可以直接引用的模块。所以 loader 就是个搞预处理工作的。

Vue-loader 可以解析和转换 .vue ⽂件，提取出其中的逻辑代码 script 、样式代码 style 、以及模版 template ，再分别把它们交给对应的 Loader 去处理。

5.Vue 中 key 的作用

key主要作用是为了高效得更新虚拟DOM。原理是VUE在patch过程中会通过key精准判断两个节点是否是同一个。从而避免频繁更新不同元素，使得整个patch过程更加高效，减少dom操作量，提高性能。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

准确: 如果不加key,那么vue会选择复⽤节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产⽣⼀系列的bug.。

快速: key的唯⼀性可以被Map数据结构充分利⽤,相⽐于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1)

  1. 若不设置key，会在列表的渲染过程中发生一些隐蔽的bug，比如新增数据乱序。
  2. 重复的 key 会造成渲染错误。
  3. key是为Vue中的vnode标记的唯⼀id,通过这个key,我们的diff操作可以更准确、更快速
  4. diff算法的过程中,先会进⾏新旧节点的⾸尾交叉对⽐,当⽆法匹配的时候会⽤新节点的key与旧节点进⾏⽐对,然后超出差异

没有key情况还会导致节点的删除和重建，影响性能。若有key，在进行更新时会直接保留原有节点，只插入新节点，无需删除重建。

  1. v-for循环的时候，key属性只能使用number/string
  2. key属性值必须是唯一标识符。
  3. key属性不要使用索引作为标识。

用引索index作为key可能会引发的问题：

  1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
  2. 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
  3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

本文固定连接：https://code.zuifengyun.com/2020/02/1823.html，转载须征得作者授权。

加载中...
加载中...