vue基础知识(vue发展史、vue基础配置、vue组件化)+面试题

最新推荐文章于 2024-05-15 20:43:52 发布

Krismiling

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量262

点赞数

分类专栏：前端补缺笔记文章标签： vue.js mvc 前端 javascript

本文链接：https://blog.csdn.net/weixin_46920847/article/details/124943170

版权

前端补缺笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue理论

面试题1：简单聊聊对于MVVM的了解

最初，以语义化模板描述网页。=>开始追求交互，从表单提交开始有了交互。
借用软件开发模式MVC（model，表示基础数据、数据结构，从后台得到的数据；model通过constructor的调度和处理，展示在view上，DOM对应即view层）。
MVVM：model-view-viewModel（数据绑定在ViewModel上并会自动渲染到页面中；当视图变化时通知ViewModel层更新数据）。

MVC、MVP、MVVM的区别

三者均为常见的软件架构设计模式，通过分离关注点来改进代码的组织结构。

MVC：C，Controller，定义用户界面对用户输入的响应方式，连接模型和视图，用于控制应用程序的流程。，处理用户的行为和数据上的改变，即将用户对view的操作交给了controller。响应机制：view向model注册，model更新通知view，让model更新数据并通知view更新视图。MVC的每个事件都流经controller再处理，但前端的view本身具备独立处理用户事件的能力。
MVP：P，presenter，采用view为presenter提供接口，让presenter去更新model，然后更新view。将view和model解耦，完全分离视图和模型。此时presenter作为中间人，用户对view的操作都转移到presenter了，只让view暴露接口给presenter调用，待presenter通知model更新后，presenter再调用view提供的接口更新视图。会使presenter很重，维护困难，只要视图一变就需要变化。
MVVM：VM，ViewModel，view通过模板语法来声明式地将数据渲染进DOM，当ViewModel对model进行更新时，会通过数据绑定(如vue的数据劫持、angular的脏值检查)更新到view，即model变化只需通过模板语法能力更新view，无需像MVP一样通过presenter，而view变化则需要通过ViewModel通知model。数据(model)会绑定在viewModel层并自动(数据劫持、模板引擎等)将数据渲染到页面(view)中，当视图变化时，会通知ViewModel层更新数据。既解耦了视图与model，ViewModel任务也不会很重。

vue是如何利用mvvm思想进行项目开发

双向数据绑定：

利用双花括号**{{}}，构筑了数据与视图的双向绑定**（内部使用若干正则）。{{}}内部为语句，框住里面的关系而非变量本身。以下均可在{{}}中写：
1. 绑定数据的计算，对数据进行二次处理。{{ number + 1 }}
2. 截断，可作基础字符串操作。{{ msg.slice(0, -1) }}
3. 浮点数相关处理。{{ number.toFixed(2) }}，{{ parseInt(number, 10) }}
4. 利用函数进行加工数据。{{ calcNumber(number) }}
5. 三元运算。{{ 100>99 ? 'yes' : 'no' }}
6. 逻辑运算(与、或、非…){{ 100>99 && 100>98 }}；取反操作{{ !number }}。
7. 变量判断。{{ number>10 ? 'yes' : 'no' }}
{{}}内部处理逻辑：作为template解析时，是使用若干个正则去匹配这块区域，并对这块区域做类型定义，使得这块区域作为关系的桥梁。
通过视图绑定事件来处理数据。如@click等。底层即利用MVVM思想设计vue的开发逻辑。
对比：jQuery，采用MVC模式，通过监听事件，找到关联的DOM，依次进行操作，完成后解除监听。耦合严重。

vue的相关配置

面试题2：vue生命周期

思路：答题采用主谓宾思路。

beforeCreate：创建一个vue实例(空实例)。——完成实例挂载功能。
created：创建一个完整的vue实例，即data、props、method、computed在created时创建出来了。——可做数据操作，但不可涉及vdom和dom的操作。
beforeMount：生成了虚拟DOM（vdom）。——可做数据操作，但不可涉及dom。
mounted：vdom挂载到dom上，生成实际的dom（不一定已全部生成）。——可做任何操作。
beforeUpdate：对视图更新之前，此时vdom是更新之后的数据，dom还未更新。——可在此继续更新数据。
updated：dom已经更新了。——在此谨慎操作数据，可能会造成死循环，只能对数据进行读取等。
beforeDestroy：实例尚未被销毁。——可在此清空EventBus、reset、store、计时器等。
destroyed：实例已被销毁。——可在此做一些收尾工作，如vuex的store多在此做。

面试题：data为什么要返回一个函数而非一个对象？

涉及作用域问题：（利用vue组件思想答题）

子组件渲染在父组件时，涉及依赖收集过程，即收集每个子组件的变量，判断当前变量是否被另一变量所依赖。
如果采用各个组件的data均返回一个对象的形式，就产生了引用关系，这样就不是一个单独的作用域了。故采用函数形式，这个若干个函数即使同名也不会相互覆盖。

$nextTick()相关

执行时机：视图的下一次更新来触发(即在updated钩子触发)。
如果写在updated里可触发多次，写在created和mounted都一样，只触发一次。

定向监听——面试题：computed和watch

相同点：

均是基于vue的依赖收集机制。
都是被依赖的变化触发，进而改变进行处理计算。
底层均采用DOM diff机制处理。

不同点：

声明赋值方面：
computed：包含声明和赋值。
watch：data中已声明，在此只赋值。
入和出：
computed：多入单出——多个值变化组成一个值变化。
watch：单入多出——单个值变化，进而影响到一系列的状态变更，
性能上：
computed：会自动进行diff依赖，若依赖没有变化，会变成从缓存中读取当前计算值。
watch：无论监听值是否变化，都会执行回调。
写法上：
computed：必须有return值。
watch：可没有return值。
执行时机上：
computed：从首次生成复制就开始进行计算运行。
watch：首次不运行，除非加上immediate:true首次才可以运行。
watch中的deep、$set都十分耗性能，不建议使用。

条件业务（涉及性能优化）——v-if、v-show、v-else、v-else-if

v-if：无DOM，不会渲染实际节点及其子节点。
v-show：存在实际节点及其子节点，但不展示，不占据位置。
v-if和v-show都会触发重排。
v-if使用场景：在移动端时，超长列表滚动，窗口有限，超过缓冲区域设置v-if为false。

循环业务——面试题：v-for和v-if优先级

在vue2时，v-for优先级>v-if，即先循环后判断。
在vue3时，v-if优先级>v-for。

面试题：key的作用

答题思路：模板编译原理——DOM diff算法——key在DOM diff时作用。

模板编译原理：vue如何将template渲染为DOM？
template => 正则匹配语法 => 生成AST：区分静态值和动态变量（待收集的依赖存放起来，进行动态标记+依赖收集）=> 转化为AST可执行方法 => 执行render()方法 => 生成DOM
DOM diff：区分前一次和后一次哪些发生了变化。
层级：只考虑单层复用，多层级复用不考虑，采用遍历实现。
diff顺序：采用双向指针机制，首尾两个指针向中间移动，共四个指针，oldStart、oldEnd、newStart、newEnd。
如何替换：移动、新增、删除。=> 使用key来快速识别顺序，优先考虑复用。
key作用：尽可能复用节点。
涉及面试题index作为key的缺点，随机数作为key的缺点。

基础指令

默认指令

v-once：只渲染单次。
v-text：渲染字符串。
v-html：渲染html。
v-bind：简写:，绑定赋值。
v-on：简写@，监听事件。
v-model：双向数据绑定，是一个语法糖，本质是：:value(属性下传)+@input(事件上抛)。
model可进行重配置，作为全局、局部组件。model: { prop: 'selected', event: 'change' }

自定义指令

利用directives。

directives: {
	self: {
		update: function() {
			//....
		}
	}
}
//使用
<div v-self></div>

Vue事件——v-on

修饰符：.stop、.prevent、.capture、.self、.once、.passive
按钮修饰符：.enter、.delete
事件设计：为什么vue把事件写在模板上，而不是js中？=> 将DOM与JS解绑。
这设计好/不好？（开放题）
答：好。
1. 模板定位事件触发源 + 触发源去相应函数找触发事件逻辑。 => 可以更方便地定位问题所在，便于测试隔离。
2. ViewModel销毁时，template自动解绑事件，无须手动销毁。=> 更便于垃圾回收。

Vue组件化机制——面试重点

一般组件

直接封装，在需要的地方直接展示。

动态组件

使用场景：互斥的多个组件在不同情况下展示。

<component :is="判断机制"></component>
computed: {
	判断机制() {
		return (一些逻辑)
	}
}

//eg:
<component :is="currentComponent"></component>
computed: {
	currentComponent() {
		return this.number > 2 ? 'component1' : 'component2';
	}
}