整理下前端面试题

憨豆儿_
145 阅读7分钟

Vue

1.为什么 data 是一个函数 ？

简答：为了更好的状态复用

详解：组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果

  1. vDom 虚拟dom的本质？ 虚拟DOM：就是用js对象来模拟页面上的DOM元素和嵌套关系，从而实现页面元素的高效更新。 页面是怎么呈现？

（1）浏览器请求服务器获取html代码

（2）浏览器解析DOM结构，渲染出一棵DOM树

（3）浏览器将DOM树呈现在页面上，我们才看见页面

页面上的数据变化

（1）发生交互事件，获取到新的数据（仅存在与浏览器的内存中）

（2）将最新的数据渲染到页面上-------此时会存在性能上的问题 所以为了优化性能，需要实现按需渲染页面（只重新渲染更新了的页面元素），怎么知道哪些是更新的呢？就把浏览器中的DOM树与虚拟DOM树进行对比。分别从每层（tree diff）、组件（component diff）、元素（element diff）逐层对比

  1. Vue 和react区别？

Vue : 数据双向绑定，基于mvvm模式，有指令，模板渲染，占位符{{}}

React: 单项数据流，基于mvc模式，采用jsx语法糖，基于原生es6语法规范，占位符{}

  1. 父子组件的生命周期顺序？ 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。

  2. 怎么理解mvvm？

VUE是基于MVVM架构模式写出来的框架, MVVM是一种双向绑定架构模式，

通过VM层使用Object.defineProperty函数实现数据双向绑定，连接M和V

#Object.defineProperty存在的问题

  1. 只能劫持一个属性，需要对对象遍历进行批量劫持
  2. 新增数据无法实现
  3. 无法监听数组变化

Proxy类的基本概念 :

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。Proxy构造函数的第一个参数是原始数据data；第二个参数是一个叫handler的处理器对象。Handler是一系列的代理方法集合，它的作用是拦截所有发生在data数据上的操作。这里的get()和set()是最常用的两个方法，分别代理访问和赋值两个操作。

Vue3采用Proxy

2019年10 月 5 日凌晨，尤雨溪在微博宣布 Vue 3.0 的源码开放。目前依然是 pre-alpha（预测试版） 状态，但主要的架构改进、优化和新功能都已经完成。 数据双向绑定采用 Proxy，并为低版本浏览器保留Object.defineProperty方式。

Proxy的优势    Proxy在ES2015规范中正式发布，它是浏览器底层实现的一种对象拦截器，Proxy不需要各种hack技术就可以无压力监听数组变化    自动检测length，支持新数据  性能远优于Object.defineProperty

  1. 前端路由？

前端路由:是现代SPA应用必备的功能,每个现代前端框架都有对应的实现,例如vue-router、react-router。

前端路由的原理: 哈希模式和历史模式

哈希模式: a 标签锚点，浏览器地址上?后面的变化，是可以被监听的，浏览器提供了原生监听事件 hashchange，可以监听到的变化： 点击 a标签，浏览器地址改变和浏览器的前进后退行为 ，通过 window.location方法，改变浏览器地址

历史模式: history模式会比hash模式稍麻烦一些， 因为history模式依赖的是原生事件popstate： 就是调用history.pushState()或history.replaceState() 不会触发popstate事件。 只有在做出浏览器动作时，才会触发改事件，如用户点击浏览器的回退按钮，或者在js代码中调用history.banck()或者history.forward()方法。

  1. Vue3了解不，和vue2的区别，看过源码没，怎么实现响应式原理，模板最后编译成啥，执行之后是啥

Vue3/vue2区别：

  1. vue3中template支持多个根标签

  2. main.js

  3. setup：函数返回一个对象，这个对象中包含方法和数据，生命周期钩子函数也在setup中运行，取代的是vue2中的data，methods? ref 是一种响应式的数据

  4. v-model在组件中的运用

  5. 新组件 Teleport

  6. Vue3 实现响应式原理

  7. -1. Vue3采用Proxy   2019年10 月 5 日凌晨，尤雨溪在微博宣布 Vue 3.0 的源码开放。目前依然是 pre-alpha（预测试版） 状态，但主要的架构改进、优化和新功能都已经完成。 数据双向绑定采用 Proxy，并为低版本浏览器保留Object.defineProperty方式。

  8. -2. Proxy实现原理

  9. -3. Proxy的优势 Proxy在ES2015规范中正式发布，它是浏览器底层实现的一种对象拦截器，Proxy不需要各种hack技术就可以无压力监听数组变化  自动检测length，支持新数据  性能远优于Object.defineProperty

  10. 介绍computed和watch

Computed：是一个计算属性,类似于过滤器,对绑定到view的数据进行处理（比如：计算总价格、过滤某些数据） Watch：监听数据的变化，监听路由的变化（监听浏览器宽高、如果有变化就存在localStorage里面去，或者有变化就通知其他组件改变化）

9.什么是diff算法? 总结： diff算法是一种对比算法。 对比两者是旧虚拟DOM和新虚拟DOM，对比是哪个虚拟节点更改了，找出这个虚拟节点。并只更新这个虚拟节点所对应的真实节点。而不更新其他数据没发生改变的节点。实现精准更新dom，提高性能。

  1. 日常中如何拷贝的, 深拷贝、浅拷贝

为什么拷贝对象：直接赋值，会共享对象，互相影响

浅拷贝：只拷贝对象的一层属性

深拷贝：每一层都拷贝 方式1 Json.stringify() // 转字符串 Json.parse() // 把字符串重新生成新对象 方式2 递归（效率不高）

方式1. 拷贝对象会出现的问题：

(1) . 如果对象里面有时间对象，则json.stringify再json.parse后，时间将只是字符串的形式,而不是对象形式

(2) . 如果对象有正则/error对象，则序列化的结果只得到空对象

(3) . 如果对象有函数/undefined，则序列化结果会把函数或undefined丢失

(4) . 如果对象有Nan/infinity和-Infinity,则序列化的结果会变成null

(5) . JSON.stringify()只能序列化对象的可枚举的自有属性。如果 对象是有构造函数生成的，则使用这种方式深拷贝后，会丢失对象的constructors

(6) . 如果对象中存在循环引用的情况也无法正确实现深拷贝

  1. v-model 的实现方式? 只要在一个自定义组件内设置value的prop，并且在数据发生变化时$emit，一个带新值的input事件，就可以在自定义组件中使用v-model进行双向绑定。

12.为什么避免v-if 和v-for用在一起

因为v-for的优先级比v-if的优先级高，所以每次渲染时都会先循环再进行判断，而又因为v-if会根据渲染条件为true或false来决定渲染与否的，所以如果将v-if和v-for用在一起会特别消耗性能

13.vue 的query传参和params传参的区别

1.params传参，必须使用命名路由的方式传参 2.params传参，不会显示在地址栏上，会保存在内存中，刷新会丢失，可以配合本地缓存进行使用 3.query的参数会显示在地址栏上，不会丢失

avatar
文章
阅读
粉丝