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(两端对齐)
justify-content:space-around(自动分配间隔，每个元素的边距一致)
主轴变换：
flex-direction:row  ---默认水平排列
flex-direction:column  ---内容变为垂直排列

用flex弹性布局，布局会特别的方便

== 和===的区别

==是非严格意义上的相等
值相等就相等
===是严格意义上的相等，会比较两边的数据类型和值大小
值和引用地址都相等才相等

js数据类型

基本数据类型
Number、String、Boolean、Null、Undefined、Symbol、bigInt
引用数据类型
object、Array、Date、Function、RegExp

基本数据类型和引⽤类型在存储上的差别
***前者存储在栈上，后者存储在堆上

如何实现浏览器响应式布局？

常用如下
    使用媒体查询（@media）
    使用flex弹性布局
    使用百分比单位
    使用rem单位
推荐一种冷门万能自适应方式：tranfrom:scale(动态比值)

项目性能优化方案

1.对象层级不要太深，
2.不需要响应的数据不需要放在data中
3.图片和路由懒加载
4.异步路由
5.可以适当采用keep-alive缓存组件
6.减少 HTTP 请求数
7.避免重定向
8.减少Dom操作
9.css放在顶部，js放在底部

软件开发的流程（这是一个前后端通问的题）
1.市场调研需求
2.需求探讨评价
3.UI设计
4.编程开发
5.调整测试
6.交付验收
7.上线发布
8.后期运营

HTTP的⼏种请求⽅法⽤途
GET ⽅法
      发送⼀个请求来取得服务器上的某⼀资源
POST ⽅法
      向 URL 指定的资源提交数据或附加新的数据
PUT ⽅法
      跟 POST ⽅法很像，也是想服务器提交数据。但是，它们之间有不同。 PUT 指定了资
      源在服务器上的位置，⽽ POST 没有
DELETE ⽅法
      删除服务器上的某资源
以上都是比较常用的请求
Get 请求能缓存， Post 不能
Get 传送的数据长度有限制， Post 没有
Get 一般用于简单的数据查询， Post 一般用于表单提交
HTTP状态码及其含义：
2** ：成功状态码
        200 OK 正常返回信息
        201 Created 请求成功并且服务器创建了新的资源
        202 Accepted 服务器已接受请求，但尚未处理
4** ：客户端错误
        400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内
        容发起请求。
        401 Unauthorized 请求未授权。
        403 Forbidden 禁⽌访问。
        404 Not Found 找不到如何与 URI 相匹配的资源。
5**: 服务器错误
        500 Internal Server Error 最常⻅的服务器端错误。
        503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。
以上都是常见的状态码
html5有哪些新特性：
绘画 canvas
⽤于媒介回放的 video 和 audio 元素
本地离线存储 localStorage ⻓期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后⾃动删除
语意化更好的内容元素，⽐如 article 、 footer 、 header 、 nav 、 section
表单控件， calendar 、 date 、 time 、 email 、 url 、 search
css3有哪些新特性：
圆⻆ border-radius
多列布局
阴影和反射
⽂字特效 text-shadow
线性渐变
旋转 transform

请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？

cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（通常经过加密）
      cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存
存储⼤⼩：
cookie 数据⼤⼩不能超过4k
sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得
多，可以达到5M或更⼤
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据
sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除
cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭
WEB标准以及W3C标准是什么?
标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离
<!DOCTYPE> 声明位于⽂档中的最前⾯，处于 <html> 标签之前。告知浏览器的解析器， ⽤什么⽂档类型 规范来解析这个⽂档
⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

⾏内元素有： a b span img input select strong
块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p
空元素： <br> <hr> <img> <input> <link> <meta>
⾏内元素不可以设置宽⾼，不独占⼀⾏
块级元素可以设置宽⾼，独占⼀⾏
Canvas和SVG有什么区别？
1.svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修
改。 canvas 输出的是⼀整幅画布
2.svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽
canvas 输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮
为什么要初始化CSS样式?
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化
往往会出现浏览器之间的⻚⾯显示差异。
当然，初始化样式会对 SEO 有⼀定的影响，但⻥和熊掌不可兼得，但⼒求影响最⼩的情况
下初始化

谈谈This对象的理解（this就相当于一个作用域）
this 总是指向函数的直接调⽤者（⽽⾮间接调⽤者）
如果有 new 关键字， this 指向 new 出来的那个对象

闭包
闭包的定义其实很简单：函数 A 内部有⼀个函数 B ，函数 B 可以访问到 函数 A 中的变量，那么函数 B 就是闭包
我的理解是，闭包能够读取其他函数内部变量的函数。在本质上， 闭包就是将函数内部和函数外部连接起来的一座桥梁。
var、let 及 const 区别：

var 存在提升，我们能在声明之前使⽤。 let 、 const 因为暂时性死区的原因，不能 在声明前使⽤
var 在全局作⽤域下声明变量会导致变量挂载在 window 上，其他两者不会
let 和 const 作⽤基本⼀致，但是后者声明的变量不能再次赋值

防抖与节流

防抖与节流函数是⼀种最常⽤的 ⾼频触发优化⽅式，能对性能有较⼤的帮助。

防抖 (debounce): 将多次⾼频操作优化为只在最后⼀次执⾏

节流(throttle): 每隔⼀段时间后执⾏⼀次，也就是降低频率，将⾼频操作优化成低频操作，简单来说节流就是控制事件触发的次数

uni-app小程序

优点：
小程序是个单页面应用，基于微信平台开发，享受微信自带的流量，
这个优点最大，无需安装，有微信即可，不占内存，开发周期短，
开发资金是原生App的一半不到，容易上手，不需要考虑兼容性，
只要你的手机可以运行微信，那就肯定可以运行小程序，
缺点：
但是缺点也很明显
局限性很高，页面大小不能超过1M，不能打开超过5层级的页面，
后台调试麻烦，API接口必须是https请求，且后台代码必须发布到服务器上
才可以访问数据

小程序页面间传递数据的方式

1.全局遍历实现数据传递
2.页面跳转重定向时，使用url带参数传递
3.使用组件模板template传递参数
4.缓存传参

那些方法可以提高小程序的应用速度

1.减少默认data的大小
2.组件化方案，减少重复代码的编写

小程序和H5的区别
1.运行环境不同（小程序在微信运行，H5在浏览器运行）
2.h5需要兼容不同的浏览器

简述微信开发者工具的调试工具(*这题是我去一家公司面试原题)

1.查看状态码
2.检查请求路径、方式
3.查看是否传递参数，检查参数格式
4.查看通过接口获取的数据

最后整理一些面试常问的问题吧

⾃我介绍
⾯试完你还有什么问题要问的吗
你有什么爱好?
你最⼤的优点和缺点是什么?
你为什么会选择这个⾏业，职位?
你觉得你适合从事这个岗位吗?
你有什么职业规划?
你对⼯资有什么要求?
如何看待前端开发？
        前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近，因为这个职位是编写页面的，页面的展示，页面的布局，页面的特效，页面的交互，页面的体验，页面中的数据，用户无时无刻都会看到前端页面的效果，所以前端这个职位需要不断去考虑用户的体验以及产品对用户的视觉冲击，虽然很多人对前端存在鄙视的态度，说前端那么简单什么什么的，烂大街，但是我认为每个职位都有每个职位的职责，每个职位都有自己需要去完成的工作内容，不存在什么鄙视，不管是前端后端还是UI设计，目的都是去完成一个产品，都是为公司服务，只有每个人都出力都进步都团结才能使一个产品更加高质量的完成，才能使公司发展的更好。
*****看是不是这回答，面试绝对嘎嘎加分
未来三到五年的规划是怎样的？
你的项⽬中技术难点是什么？遇到了什么问题？你是怎么解决的？
你认为哪个项⽬做得最好？
平时是如何学习前端开发的？
你为什么要离开前⼀家公司？
你对加班的看法
你希望通过这份⼯作获得什么？
***把这些问题的答案都都事先准备好，绝对面试官提问，对答如流

先到这里吧，，，看到合适的题会不断更新的

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

  1. WEB前端面试题整理

    WEB前端面试题 文章目录 WEB前端面试题 一.html部分 1.Doctype有什么作用?标准模式与兼容模式有什么区别 2.标准模式与兼容模式(怪异模式)各有什么区别? div1和div2之间的距 ...

  2. 【web前端面试题整理03】来看一点CSS相关的吧

    前言 昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...

  3. 【web前端面试题整理03】来看一点CSS相关的吧 - 叶小钗

    原帖地址:http://www.cnblogs.com/yexiaochai/p/3154031.html 前言 昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间 ...

  4. 【web前端面试题整理05】做几道前端面试题休息休息吧

    前言 连续学了两天javascript的东西了,我们都累了,于是今天还是上一套面试题吧,大家一起休息休息,也为下个星期可能会有的面试准备下. 题目一览 CSS 1.  overflow-x  属于 C ...

  5. 吐血熬夜整理!2020最全web前端面试题!!!你想要的我这都有！！！

    吐血总结了下web前端面试题,分享给大家,以后还会持续更新,有些题目有多种答案,本文只给出其中一种,哪里有问题的欢迎指出. Html&CSS 1.谈谈你对web标准的理解 web标准的理解 2 ...

  6. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上

    引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...

  7. 应届生web前端面试题_2020最新Web前端经典面试题试题及答案（持续更新）

    Web前端面试题 Web前端面试题:说说你对webpack的看法 解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...

  8. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）下

    引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...

  9. web前端面试题(附答案)

    web前端面试题 1.src和href的区别 ? href: Hypertext Reference的缩写,超文本引用,多数用于a link 标签 看下图 加载他们的时候 不会停止对当前页面的加载 浏 ...

最新文章

  1. Java学习总结：53(单对象保存父接口：Collection)
  2. GitHub App终于来了，iPhone用户可尝鲜，「同性交友」更加便捷
  3. Git 码云 Github
  4. 转载：Quartz.NET 入门
  5. Angular网络请求的封装
  6. bzoj 4016: [FJOI2014]最短路径树问题
  7. 路由器距离向量算法计算举例_路由器基本原理是什么 路由器基本发展情况介绍【图文】...
  8. html两个div有缝隙_HTML第一课
  9. js面向对象的程序设计 --- 下篇 继承启蒙
  10. XNA:2D图元与3D模型共存时的渲染问题
  11. 《Go语言实战》Go 类型：基本类型、引用类型、结构类型、自定义类型
  12. linux上设置jar包加载顺序,SpringBoot配置加载顺序
  13. roboware studio教程_2.2.RoboWare Studio安装及使用
  14. Mysql环境变量配置
  15. X5之position_estimator_inav_main.c
  16. 谷歌浏览器安装 elasticsearch-head 插件
  17. Excel单元格科学计数法转换和小数点取整
  18. VR球类游戏填坑总结
  19. Java小白-9.Java多线程
  20. jQuery stop()用法

热门文章

  1. 检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件失败，原因是出现以下错误: 8000401a 因为配置标识不正确...
  2. Java 基于TCP的socket实现文件传输
  3. 转！ 完美解决 ERROR 1064 (42000): You have an error in your SQL syntax ... near …
  4. python无角矩形_python代码战斗计算黑匣子，模拟矩形的对角线
  5. Linux学习笔记05、CentOS 7的中文输入法设置
  6. UNIX网络编程第三版(卷1)读书笔记以及习题-章节1
  7. Linux vi 模式下查找命令
  8. 火山视窗添加窗口菜单
  9. 驱动安装成功 adb devices无法找到设备 解决方法
  10. STM32CUBEIDE——malloc