web前端面试题整理(vue、uni-app、前端三件套、web基础)

Vue

对mvvm的理解

mvvm分为model、view、viewmodel三者
model代表数据模型
view代表视图
viewmodel代表连接视图和模型，实现了vue数据的双向绑定

viewmodel主要职责就是
数据变化后更新视图，视图变化后更新数据
它有两个重要的部分Observer（监听器）、Compiler（解析器）
监听器对所有的数据属性进行监听，
解析器对每个元素节点进行扫描，替换数据以及绑定相应的更新数据

---

vue中的el代表什么？

vue中的el代表Vue实例挂载的元素节点
（值可以是css选择器，id选择器）

---

vue-router是什么？有哪些组件？

Vue Router 是 Vue的路由管理器。它和 Vue的核心深度集成，让构建单页面应用更加容易。
<router-link>和<router-view>和<keep-alive>

---

怎么定义vue-router的动态路由？怎么获取传过来的值？

动态路由的创建，主要是使用path属性过程中使用动态路径参数，用冒号设置参数名

{
  path: '/jdb/:id'
  name: 'jdb'
  components: jdb
}

访问jdb目录下的文件，如果jdb/a1，jdb/a2等，都会映射到jdb组件上
参数值会被设置到this.$route.params下，通过这个属性就可以获取动态参数了

console.log(this.$route.params.id)

---

vue父组件向子组件传递数

props

---

子组件向父组件传递事件

$emit
$refs
props的函数闭包用法

---

vue如何获取dom

给dom元素加ref=‘refname’,然后通过this.$refs.refname进行获取dom元素

---

为什么用key

给每个dom元素加上key作为唯一标识 ，使页面渲染更加迅速。虽然index也是下标
但key是给每一个vnode的唯一id,可以依靠key,更准确, 
更快的拿到oldVnode中对应的vnode节点。所以渲染更快

---

vue在双向数据绑定是如何实现的？

vue双向数据绑定是通过数据劫持、组合、发布订阅模式的方式来实现的，
也就是说数据和视图同步，数据发生变化，视图跟着变化，
视图变化，数据也随之发生改变
核心：关于vue双向数据绑定，其核心是Object.defineProperty()方法

---

什么是 vue 生命周期？有什么作用？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，
需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，
用户可以在不同的阶段根据不同的需求添加相应的代码

---

第一次页面加载会触发哪几个钩子？

beforeCreate， created， beforeMount， mounted

---

对vue生命周期的理解

总共分为8个阶段
创建前/后，
载入前/后，
更新前/后，
销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，
还未初始化。

在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，
	但还是挂载之前为虚拟的dom节点，data.message还未替换。
	在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数。

---

vuex是什么？

vuex是对vue提供全局状态管理系统，用于组件之间的数据共享和缓存

---

vuex有哪几种属性？

有五种，State、 Getter、Mutation 、Action、 Module
state： 基本数据(数据源存放地)
getters： 从基本数据派生出来的数据
mutations ： 提交更改数据的方法，同步！
actions ： 像一个装饰器，包裹mutations，使之可以异步。
modules ： 模块化Vuex

---

vue 事件中如何使用 event 对象?

获取事件对象，方法参数传递 $event 。注意在事件中要使用 $ 符号
<button @click="Event($event)">事件对象</button>

---

Vuex 页面刷新数据丢失怎么解决？

需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，
可以自己设计存储方案，也可以使用第三方插件。
推荐使用 vuex-persist (脯肉赛斯特)插件，
它是为 Vuex 持久化储存而生的一个插件。不需要你手动存取 storage，
而是直接将状态保存至 cookie 或者 localStorage中。

---

为何组件 data 必须是一个函数？

防止组件重用的时候导致数据相互影响。根本上 .vue 文件编译出来是一个类，这个组件是一个class，我们在使用这个组件的时候相当于对class 实现实例化，在实例化的时候执行data，如果 data不是函数的话拿每个组件的实例结果都一样了，共享了，如果 data不是函数的话在一个地方改了，另一个地方也改了。如果data是函数在左边实例化一个右边实例化一个都会执行这个函数，这两个data都在闭包中，两个不会相互影响

---

前端三件套、web前端基础

元素的分类

元素分为inline(行内元素)、block(块元素)、inline-block(行内块元素)、flex(弹性元素)，

其中flex弹性元素更加灵活

---

flex弹性布局

当一个元素的类型被改为flex   ---   display:flex;
我们管这个元素称为flex容器
在这个容器里float失效
内部的div容器不会独占一行了（布局会更加简单）
justify-content:flex-start(开始对齐--内容在左侧--默认)
justify-content:flex-end(结尾对齐--内容在右侧)
justify-content:center(中心对齐--内容居中)
justify-content:space-between(两端对