八股文（三）

目录

一、 如何理解原型与原型链

二、 js继承

三、 vuex的使用

1.mutation和action的区别

mutation

action

2.Vuex都有哪些API

四、 前端性能优化方法

五、 类型判断

题目

（1）typeof判断哪个类型会出错（即结果不准确）？

（2）Object.prototype.toString.call()判断哪个类型会出错（即结果不准确）？

1.typeof用来查看字面量或者变量的数据类型

2.instanceof判断自定义构造函数实例

六、 null和undefined的区别

七、 vue父子组件挂载顺序

（1）加载渲染过程

（2）更新过程

（3）销毁过程

八、 computed和watch的区别

（1）应用场景不同

（2）computed计算属性

（3）watch监听

（4）总结区别

九、 vue-router原理以及两种模式区别

（1）路由有哪两种模式？默认是哪种模式？

（2）两种模式区别是什么？

（3）讲一下vue-router原理？

一、 如何理解原型与原型链

1. 构造函数有个prototype对象（原型），该对象有个“constructor”属性，指向构造函数。

2. 每个对象都有一个“proto”属性，指向它的构造函数的“prototype”属性。

3. 构造函数的prototype对象，也有一个“proto”对象，它指向Object的prototype对象。

4. 当我们访问对象中的属性时候，会先访问该对象中的本身的属性（私有属性），如果访问不到，会查找对象的“proto”指向的构造函数的prototype对象，如果其中有要访问的属性，就使用该值，否则继续访问prototype的“proto”，在其中查找要访问属性。这样一直上溯到Object对象。这个就是“原型链”

函数 - prototype - 对象(函数的prototype)

对象 - 对象._proto -对象(函数的prototype)

原型和原型链具体可看这篇文章JS的基础知识学习（二）(原型和原型链的基础理论）_七小山的博客-CSDN博客

二、 js继承

1. 原型继承

2. 借用构造函数继承

3. 组合继承

4. 寄生组合式继承

三、 vuex的使用

1.mutation和action的区别

Vuex 中的 action 和 mutation 都是用来管理状态的，但是它们有一些重要的区别。

• mutation 是用来直接修改状态的，它是同步的。

• action 是用来执行异步操作的，最终会调用 mutation 来修改状态。

这样设计的原因是，在大多数情况下，状态的修改应该是同步的，而 action 则可以用来执行异步操作，比如请求服务器数据。另外, 为了保证数据的一致性, Vuex 要求所有状态的修改都必须经过 mutation 来完成

mutation

this.$store.commit(“mutation函数名”，发送到mutation中的数据)

更改store中状态的唯一方法是提交mutation

action

this.$store.dispatch(‘action中的函数名’，发送到action中的数据)

2.Vuex都有哪些API

• state

• getters

• mutations

• actions

• module

• 辅助函数：mapState、mapGetters、mapMutations、mapActions

• createStore

其中state和getters用来保存状态；mutations和actions用来改变状态

四、 前端性能优化方法

页面展示可以分为3个阶段，请求页面，加载和解析页面，渲染。

（主要优化方法请参考知识点链接）

1、请求数据阶段主要指标是服务器响应时间，从服务器角度优化。

2、加载和解析页面阶段，性能优化的主要思路是减少请求数量、降低资源的大小和避免阻塞。

3、渲染阶段优化思路是避免重绘和重排。

五、 类型判断

题目

（1）typeof判断哪个类型会出错（即结果不准确）？

typeof判断null和数组会出错

（2）Object.prototype.toString.call()判断哪个类型会出错（即结果不准确）？

Object.prototype.toString.call()判断自定义对象只能得到"[object Object]"的结果，所以如果需要判断构造函数可以结合instanceof或者constructor来使用

1.typeof用来查看字面量或者变量的数据类型

typeof 1                        // 'number'
typeof '1'                  // 'string'
typeof false                // 'boolean'
typeof {}                       // 'object'
typeof []                       // 'object'
typeof new Date()       // 'object'
typeof (() => {})       // 'function'
typeof undefined        // 'undefined'
typeof Symbol(1)        // 'symbol'

由结果可知typeof可以测试出number、string、boolean、Symbol、undefined及function，而对于null及数组、对象，typeof均检测出为object，不能进一步判断它们的类型

2.instanceof判断自定义构造函数实例

({}) instanceof Object // true
[] instanceof Array // true
new Date() instanceof Date // true
/123/g instanceof RegExp // true

六、 null和undefined的区别

• 本身都表示“没有”，但null表示引用类型的对象为空，undefined则表示变量未定义

• 在相等判断时候，null和undefined是相等的

• null表示对象空指针，undefined表示变量未定义

• typeof类型判断是不一样

typeof null // 'object'
typeof undefined // 'undefined'
Number(null) // 0
Number(undefined) // NaN

七、 vue父子组件挂载顺序

（1）加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created ->子 beforeMount -> 子 mounted -> 父 mounted

（2）更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

（3）销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

八、 computed和watch的区别

（1）应用场景不同

computed一般用于在渲染中，计算得到一个新值

watch 用在监听数据变化

（2）computed计算属性

• 使用方法和data中的数据一样，但是类似一个执行方法

• 在调用时候不加（）

• 必须有return返回

• 如果函数所依赖的属性没有发生变化，从缓存中读取

（3）watch监听

• watch的函数名称必须和data中的数据名一致

• watch中的函数有两个参数，前者是newVal，后者是oldVal

• watch中的函数是不需要调用的

• watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用

• immediate:true 页面首次加载的时候做一次监听

（4）总结区别

• 功能：computed是计算属性；watch是监听一个值的变化执行对应的回调

• 是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调

• 是否调用return：computed必须有；watch可以没有

• 使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框

• 是否支持异步：computed函数不能有异步；watch可以

九、 vue-router原理以及两种模式区别

（1）路由有哪两种模式？默认是哪种模式？

前端路由有两种模式，HTML5（即history)和hash，默认是hash模式。这两种模式本质是不同的底层浏览器技术

（2）两种模式区别是什么？

import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router';
import routerConfig from './route.config';
​
const router = createRouter({// createWebHashHistoryhistory: createWebHistory(),routes: routerConfig
});
​

可以看到在使用createRouter创建vue路由时候，可以指定使用HTML5（createWebHistory）还是hash模式（createWebHashHistory）

比如如果访问home页，hash是这样的http://localhost:8080/#/home，HTML5模式是这样的http://localhost:8080/home

1. HTML5模式的路由没有"#"字符，而是在域名后直接写路径，更加优雅

2. 由于#后面的字符不会发给服务器，因此hash路由SEO比较差，且不会在服务器生成日志记录

3. HTML5需要服务器在访问不同的路径时候都能fallback到index.html，因此相对麻烦

（3）讲一下vue-router原理？

前端路由的原理关键有2点

• 可以修改url，但不会引起刷新，从而在不刷新的页面的情况下跳转路由。

• 监听url改变，根据url渲染对应组件

hash是通过浏览器提供的locationAPI修改url，通过onhashchange方法监听hash改变；history通过浏览器提供的history.pushState或者history.replacestate修改url，通过popState事件监听url改变