09 2022 档案
摘要：Vue加载流程 1.初始化的第一阶段是Vue实例也就是vm对象创建前后：首先Vue进行生命周期，事件初始化发生在beforeCreate生命周期函数前，然后进行数据监测和数据代理的初始化，也就是创建vm对象的过程，当vm对象创建完成就可以通过vm对象访问到劫持的数据，比如data中的数据，metho
阅读全文
摘要：前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优
阅读全文
摘要：Vue3.0 和 2.0 的响应式原理区别 Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。 相关代码如下 import { mutableHandlers } from "./baseH
阅读全文
摘要：delete和Vue.delete删除数组的区别？ delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 Vue.delete直接删除了数组 改变了数组的键值。 var a=[1,2,3,4] var b=[1,2,3,4] delete a[0] cons
阅读全文
摘要：created和mounted的区别 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 vue-cli 工程常用的 npm 命令有哪些 下载 nod
阅读全文
摘要：Vue组件data为什么必须是个函数？ 根实例对象data可以是对象也可以是函数 （根实例是单例），不会产生数据污染情况 组件实例对象data必须为函数 一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。
阅读全文
摘要：Vuex和单纯的全局对象有什么区别？ Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit)
阅读全文
摘要：Vue中如何扩展一个组件 此题属于实践题，考察大家对vue常用api使用熟练度，答题时不仅要列出这些解决方案，同时最好说出他们异同 答题思路： 按照逻辑扩展和内容扩展来列举 逻辑扩展有：mixins、extends、composition api 内容扩展有slots； 分别说出他们使用方法、场景差
阅读全文
摘要：Vue路由hash模式和history模式 1. hash模式 早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 '#search' htt
阅读全文
摘要：Vue 中 computed 和 watch 有什么区别？ 计算属性 computed： （1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数； （2）计算属性内不支持异步操作； （3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法； （4
阅读全文
摘要：Vue-router 导航守卫有哪些 全局前置/钩子：beforeEach、beforeResolve、afterEach 路由独享的守卫：beforeEnter 组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 对 SPA 单页面
阅读全文
摘要：vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做 一、是什么 权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的来说，所有的请求发起都触发自前端路由或视
阅读全文
摘要：说说你对slot的理解？slot使用场景有哪些 一、slot是什么 在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符 该占位符可以在后期使用自己的标记语言填充 举个栗子 <template id="element-details-tem
阅读全文
摘要：了解nextTick吗？ 异步方法，异步渲染最后一步，与JS事件循环联系紧密。主要使用了宏任务微任务（setTimeout、promise那些），定义了一个异步方法，多次调用nextTick会将方法存入队列，通过异步方法清空当前队列。 Vue 组件间通信有哪几种方式？ Vue 组件间通信是面试常
阅读全文
摘要：Vue中的key到底有什么用？ key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异. diff程可以概括为：oldCh和newCh各
阅读全文
摘要：如果让你从零开始写一个vue路由，说说你的思路 思路分析： 首先思考vue路由要解决的问题：用户点击跳转链接内容切换，页面不刷新。 借助hash或者history api实现url跳转页面不刷新 同时监听hashchange事件或者popstate事件处理跳转 根据hash值或者state值从rou
阅读全文
摘要：闭包 首先说明什么是闭包，闭包简单来说就是函数嵌套函数，内部函数引用来外部函数的变量，从而导致垃圾回收 机制没有把当前变量回收掉，这样的操作带来了内存泄漏的影响，当内存泄漏到一定程度会影响你的项目运行 变得卡顿等等问题。因此在项目中我们要尽量避免内存泄漏。 AJAX 实现：利用 XMLHttpReq
阅读全文
摘要：label 的作用是什么？如何使用？ label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。 使用方法1： <label for="mobile">Number:</label> <input type="text" id="mobi
阅读全文
摘要：代码输出结果 async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2() { console.log("asyn
阅读全文
摘要：IE 兼容 attchEvent('on' + type, handler) detachEvent('on' + type, handler) 事件触发的过程是怎样的 事件触发有三个阶段： window 往事件触发处传播，遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往
阅读全文
摘要：对JSON的理解 JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。 在项目开发中，使用 JSON 作为前后端数据交换的方式。在前端通过将一个符合 JSON 格式的数据结构序列化为 JSON 字符串，然后将它传递到后端，后端通过 JSON 格式的字符串解
阅读全文
摘要：说一下原型链和原型链的继承吧 所有普通的 [[Prototype]] 链最终都会指向内置的 Object.prototype，其包含了 JavaScript 中许多通用的功能 为什么能创建 “类”，借助一种特殊的属性：所有的函数默认都会拥有一个名为 prototype 的共有且不可枚举的属性，它会指
阅读全文
摘要：call apply bind 题目描述:手写 call apply bind 实现 实现代码如下: Function.prototype.myCall = function (context, ...args) { if (!context || context null) { context =
阅读全文
摘要：左右居中方案 行内元素: text-align: center 定宽块状元素: 左右 margin 值为 auto 不定宽块状元素: table布局，position + transform /* 方案1 */ .wrap { text-align: center } .center { displ
阅读全文
