开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

前言

不甘于平庸又不努力

2023继续！！！

回顾

涉及的前端小知识【遇到就记录一下】

关于页面上scrollTop、offsetTop、clientTop等

offsetTop

offsetTop：元素到offsetParent顶部的距离（当前元素顶部距离最近父元素顶部的距离）
offsetLeft：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。

offsetWidth,offsetHeight

offsetWidth = width + 左右padding + 左右boder
offsetHeight = height + 上下padding + 上下boder

clientTop

clientTop = 元素上边框的宽度border-top-width

clientWidth,clientHeight

clientWidth = width+左右padding
clientHeigh = height + 上下padding

scrollTop

内容层顶部到可视区域顶部的距离(滚动条顶部到内容元素顶部的距离)

scrollWidth、scrollHeight

scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）
scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）

Object.freeze() 冻结

冻结一个对象，返回和传入的参数相同的对象

被冻结的对象再也不能被修改；
不能向这个对象添加新属性，不能删除已有属性；
不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值；
其原型也不能被修改

若想对象深层次冻结，需要递归冻结每一层对象（深冻结）

function deepFreeze(obj) {0
  var propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach(function(name) {
    var prop = obj[name];
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });
  return Object.freeze(obj);
}

vue常见的一些面试问题

 ## vue中指令的优先级
 ## Vue中的use()是如何实现的，干嘛的

vue中指令的优先级

知识点：vue2 中 v-for 比 v-if 先起作用

指令的顺序可以按照genElement[src/compiler/codegen/index.js(56) ]方法中的判断顺序说明

export function genElement (el: ASTElement, state: CodegenState): string {
 if (el.parent) {
   el.pre = el.pre || el.parent.pre
 }

 if (el.staticRoot && !el.staticProcessed) {
   return genStatic(el, state)
 } else if (el.once && !el.onceProcessed) {
   return genOnce(el, state)
 } else if (el.for && !el.forProcessed) {
   return genFor(el, state)
 } else if (el.if && !el.ifProcessed) {
   return genIf(el, state)
 } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
   return genChildren(el, state) || 'void 0'
 } else if (el.tag === 'slot') {
   return genSlot(el, state)
 } else {
   // component or element
   let code
   if (el.component) {
     code = genComponent(el.component, el, state)
   } else {
     let data
     if (!el.plain || (el.pre && state.maybeComponent(el))) {
       data = genData(el, state)
     }

     const children = el.inlineTemplate ? null : genChildren(el, state, true)
     code = `_c('${el.tag}'${
       data ? `,${data}` : '' // data
     }${
       children ? `,${children}` : '' // children
     })`
   }
   // module transforms
   for (let i = 0; i < state.transforms.length; i++) {
     code = state.transforms[i](el, code)
   }
   return code
 }
}

Vue中的use()是如何实现的，干嘛的

initUse(Vue)[src/core/global-api/index.js(65)]

vue2官网用法

安装Vue.js插件。如果插件是一个对象，必须提供install方法，如果插件是一个函数，他会被作为install方法，install方法调用时，会将Vue作为参数传入
该方法需要在调用new Vue()之前被调用
当install方法被同一插件多次调用，插件将只会被安装一次

上面提到的插件：

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

添加全局方法或者 property。如：vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
  /*这里就是说明 当install（插件）被多次调用时，插件只会安装一次*/
  // 判断_installedPlugins是否存在且这个数组里面是否有当前这个插件的对象，如果有直接返回vue对象
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this // 如果有就return，以下的不执行了
    }
/* arguments 删除第一个参数后转换成真正的数组，并且添加this作为数组的第一个元素 */
// eg：Vue.use(MyTest,1,2,3,4),经过·toArray方法处理后：args = [1,2,3,4]·
    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this) // 将 this（Vue）插入到args数组前面
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    // 将插件的名字（比如：MyTest）push到installedPlugins这个数组中
    installedPlugins.push(plugin) 
    return this // 返回this 为了可以让use支持链式调用
  }
}

后记

本文仅作为自己一个阅读记录，具体还是要看大佬们的文章

下一篇：我的源码学习之路（九）---vue-2.6.14

我的源码学习之路（八）---vue-2.6.14

前言

回顾