前端面试题总结之（四）：Vue开发相关（陆续更新）

最新推荐文章于 2024-11-03 15:50:32 发布

Dr.叶子

最新推荐文章于 2024-11-03 15:50:32 发布

阅读量297

点赞数

分类专栏：前端面试题专栏文章标签： vue 面试

本文链接：https://blog.csdn.net/LTAO427/article/details/108772432

版权

前端面试题专栏专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

你好，我是Dr.叶子，用心写最优美的博客，弹最好听的钢琴！

最近更新：

2020年10月10日

1. Vue 的生命周期

【概括】

Vue 实例从创建到销毁的过程

“创建” 、“挂载”、“更新”、“销毁”

beforeCreate： 组件创建——前
created： 组件创建——完成
beforeMount： 模版挂载——前
mounted： 模版挂载——完成
beforeUpdate： 组件数据更新——前
updated： 组件数据更新——完成
beforeDestroy： 组件销毁——前
destroyed： 组件销毁——完成

【官网图示】
在这里插入图片描述

第一次加载页面触发： beforeCreate, created, beforeMount, mounted；
DOM 渲染： 在 mounted 中完成；

2. 对于 MVVM 的理解

M（model）： 数据层
V（view）： 视图层
VM（view-model）： 视图模型层，用来连接 “数据层” 和 “视图层”

MVVM 与 MVC 模式的区别：

MVC 中 Controller 演变成 MVVM 中的 view-model；
MVVM 解决了 MVC 中大量 DOM 操作使页面渲染性能降低、加载速度慢的问题；
Vue 是数据驱动，通过数据来显示视图层，替代节点操作；
适合数据操作较多的场景，更加便捷；

3. v-show 和 v-if 指令区别

v-show： 通过修改 display 显示 / 隐藏。（实际已经渲染）
v-if： 直接销毁和重建 DOM 显示 / 隐藏。（未渲染）

4. Vue 的常用指令和它的用法

v-if： 是否隐藏
v-for： 数据循环
v-bind： 绑定属性
v-model： 双向数据绑定

5. Vue 双向数据绑定原理

基于JS原型链

数据劫持
发布订阅者模式

当要读取数据的时候会自动触发方法，并且会被赋值。

6. Vue 响应式原理

解释： 在改变数据的时候，视图会跟着更新
React： 是通过 this.setState 去改变数据，然后根据新的数据重新渲染出虚拟DOM，最后通过对比虚拟DOM找到需要更新的节点进行更新。
Vue： 利用了 Object.defineProperty 的方法里面的 setter 与 getter 方法的观察者模式来实现。

// 1.初步认识 Object.defineProperty
const data = {};
let name = 'vue';

Object.defineProperty(data, 'name', {
    get: function() {
        console.log('get');
        return name;
    },
    set: function(newValue) {
        console.log('set');
        name = newValue;
        // todo 视图重新渲染
    }
})

console.log(data.name);	// > vue
data.name = '叶子';
console.log(data.name);	// > 叶子

// 2.基本响应式实现
const data = {
    name: '叶子',
    age: 20
};

// 变成响应式数据
observer(data);

function observer(target) {
    if (typeof target !== 'object' || target === null) {
        return target;
    }

    for (let key in target) {
        defineReactive(target, key, target[key]);
    }
}

function defineReactive(target, key, value) {
    Object.defineProperty(target, key, {
        get() {
            return value;
        },
        set(newValue) {
            if (newValue !== value) {
                value = newValue;
            }
            console.log('更新视图');
        }
    })
}

console.log(data.name);
data.name = '叶子2';
console.log(data.name);
==================================================
> 叶子
> 更新视图
> 叶子2