2021Vue面试题，大厂面试必备！

2401_86637624

于 2024-09-06 16:43:50 发布

阅读量559

点赞数 5

文章标签：面试 javascript vue.js

本文链接：https://blog.csdn.net/2401_86637624/article/details/141963686

版权

const arrayProto = Array.prototype

export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [

‘push’,

‘pop’,

‘shift’,

‘unshift’,

‘splice’,

‘sort’,

‘reverse’

]

methodsToPatch.forEach(function (method) {

// cache original method

const original = arrayProto[method]

def(arrayMethods, method, function mutator (…args) {

const result = original.apply(this, args)

const ob = this.ob

let inserted

switch (method) {

case ‘push’:

case ‘unshift’:

inserted = args

break

case ‘splice’:

inserted = args.slice(2)

break

}

if (inserted) ob.observeArray(inserted) // 新增的数据需要进行观测

// notify change

ob.dep.notify()

return result

})

3.Vue中如何进行依赖收集？

每个属性都拥有自己的dep属性，存放他所依赖的watcher，当属性变化后会通知自己对应的watcher去更新
默认在初始化时会调用render函数，此时会触发属性依赖收集 dep.depend
当属性发生修改时会触发watcher更新 dep.notify()

4.如何理解Vue中模板编译原理

问题核心：如何将template转换成render函数 ?

1.将template模板转换成ast语法树 - parserHTML
2.对静态语法做静态标记 - markUp diff来做优化的静态节点跳过diff操作

3.重新生成代码 - codeGen

src/compiler/index.js:11

export const createCompiler = createCompilerCreator(function baseCompile (

template: string,

options: CompilerOptions

): CompiledResult {

const ast = parse(template.trim(), options) // 1.解析ast语法树

if (options.optimize !== false) {

optimize(ast, options) // 2.对ast树进行标记,标记静态节点

}

const code = generate(ast, options) // 3.生成代码

return {

ast,

render: code.render,

staticRenderFns: code.staticRenderFns

}

})

5.Vue生命周期钩子是如何实现的

Vue的生命周期钩子就是回调函数而已，当创建组件实例的过程中会调用对应的钩子方法。
内部会对钩子函数进行处理，将钩子函数维护成数组的形式

src/core/instance/init.js:38 初始化合并

src/core/util/options.js:388 合并选项

function mergeHook (

parentVal: ?Array,

childVal: ?Function | ?Array

): ?Array {

const res = childVal // 儿子有

? parentVal

? parentVal.concat(childVal) // 父亲也有，那就是合并

Array.isArray(childVal) // 儿子是数组

? childVal

[childVal] // 不是数组包装成数组

parentVal

return res

? dedupeHooks(res)

res

}

6.Vue的生命周期方法有哪些？一般在哪一步发送请求及原因

beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
keep-alive (activated 和 deactivated)

在哪发送请求都可以，主要看具体你要做什么事

7.Vue.mixin的使用场景和原理

Vue.mixin的作用就是抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。如果混入的数据和本身组件中的数据冲突，会采用“就近原则”以组件的数据为准。
mixin中有很多缺陷 “命名冲突问题”、“依赖问题”、“数据来源问题”

src/core/global-api/mixin.js

8.Vue组件data为什么必须是个函数？

每次使用组件时都会对组件进行实例化操作，并且调用data函数返回一个对象作为组件的数据源。这样可以保证多个组件间数据互不影响

function Vue() {}

function Sub() { // 会将data存起来

this.data = this.constructor.options.data;

}

Vue.extend = function(options) {

Sub.options = options;

return Sub;

}

let Child = Vue.extend({

data: { name: ‘zf’ }

});

// 两个组件就是两个实例, 希望数据互不干扰

let child1 = new Child();

let child2 = new Child();

console.log(child1.data.name);

child1.data.name = ‘jw’;

console.log(child2.data.name);

src/core/util/options.js:121 data的合并策略

strats.data = function (

parentVal: any,

childVal: any,

vm?: Component

): ?Function {

if (!vm) { // 组件在合并时并没有产生实例，所以会校验类型

if (childVal && typeof childVal !== ‘function’) {

process.env.NODE_ENV !== ‘production’ && warn(

'The “data” option should be a function ’ +

'that returns a per-instance value in component ’ +

‘definitions.’,

)

return parentVal

}

return mergeDataOrFn(parentVal, childVal)

}

return mergeDataOrFn(parentVal, childVal, vm)

}

function mergedInstanceDataFn () {

// instance merge

const instanceData = typeof childVal === ‘function’

? childVal.call(vm, vm)

childVal

const defaultData = typeof parentVal === ‘function’

? parentVal.call(vm, vm)

parentVal

if (instanceData) {

return mergeData(instanceData, defaultData) // 合并两个对象

} else {

return defaultData

}

9.nextTick在哪里使用？原理是?

nextTick中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。
可用于获取更新后的 DOM。
Vue中数据更新是异步的，使用nextTick方法可以保证用户定义的逻辑在更新之后执行。

src/core/util/nextTick.js:89

10.computed和watch区别

computed和watch都是基于Watcher来实现的
computed属性是具备缓存的，依赖的值不发生变化，对其取值时计算属性方法不会重新执行
watch则是监控值的变化，当值发生变化时调用对应的回调函数

src/core/instance/state.js:58

src/core/instance/state.js:241 计算属性取值函数

src/core/instance/state.js:345 watch的实现

function createComputedGetter (key) { return function computedGetter () { const watcher = this._computedWatchers && this._computedWatchers[key] if (watcher) { if (watcher.dirty) { // 如果值是脏的进行求值操作 watcher.evaluate() } if (Dep.target) { // 让计算属性所依赖的属性收集渲染watcher watcher.depend() } return watcher.value } }}

Vue.prototype.$watch = function (expOrFn: string | Function, cb: any, options?: Object): Function { const vm: Component = this if (isPlainObject(cb)) { return createWatcher(vm, expOrFn, cb, options) } options = options || {} options.user = true // 标记为用户watcher const watcher = new Watcher(vm, expOrFn, cb, options)}

11.Vue.set方法是如何实现的

我们给对象和数组本身都增加了dep属性
当给对象新增不存在的属性则触发对象依赖的watcher去更新
当修改数组索引时我们调用数组本身的splice方法去更新数组

// src/core/observer:45; 给对象增加dep属性 // src/core/observer:201; set方法的定义

export function set (target: Array | Object, key: any, val: any): any { // 1.是开发环境 target 没定义或者是基础类型则报错 if (process.env.NODE_ENV !== ‘production’ && (isUndef(target) || isPrimitive(target)) ) { warn(Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}) } // 2.如果是数组 Vue.set(array,1,100); 调用我们重写的splice方法 (这样可以更新视图) if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1, val) return val } // 3.如果是对象本身的属性，则直接添加即可 if (key in target && !(key in Object.prototype)) { target[key] = val return val } // 4.如果是Vue实例或根数据data时报错,（更新_data 无意义） const ob = (target: any).ob if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== ‘production’ && warn( 'Avoid adding reactive properties to a Vue instance or its root $data ’ + ‘at runtime - declare it upfront in the data option.’ ) return val } // 5.如果不是响应式的也不需要将其定义成响应式属性 if (!ob) { target[key] = val return val } // 6.将属性定义成响应式的 defineReactive(ob.value, key, val) // 通知视图更新 ob.dep.notify() return val}

12.Vue为什么需要虚拟DOM