【面试】web前端经典面试题试题及答案-vue

ゞ浴缸里的玫瑰 2022-02-24 02:12 359阅读 0赞

> **vue**  
> vue的生命周期、vue实现双向数据绑定、Vue组件间的参数传递/ vue通信、vue路由、vue跨域、vuex、vue基础  
>

*  vue的生命周期
 *  vue实现双向数据绑定
 *  Vue组件间的参数传递/ vue通信
 *  vue路由
 *  vue跨域
 *  vuex
 *  vue基础
 *  ### *vue的生命周期* ###

**beforeCreate**（创建前） 在数据观测和初始化事件还未开始  
**created**（创建后） 完成数据观测，属性和方法的运算，初始化事件，`$el`属性还没有显示出来  
**beforeMount**（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。  
**mounted**（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。  
**beforeUpdate**（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。  
**updated**（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。  
**beforeDestroy**（销毁前） 在实例销毁之前调用。实例仍然完全可用。  
**destroyed**（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

# <table>   <tbody>    <tr>     <td align="left">1、什么是vue生命周期？</td>    </tr>   </tbody>  </table> #

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

# <table>   <tbody>    <tr>     <td align="left">2、vue生命周期总共有几个阶段？/ vue生命周期具体的名字和过程？</td>    </tr>   </tbody>  </table> #

它可以总共分为8个阶段：beforeCreate创建前、created创建后, beforeMount载入前、mounted载入后，beforeUpdate更新前、updated更新后，beforeDestroy销毁前、destroyed销毁后。

# <table>   <tbody>    <tr>     <td align="left">3、vue生命周期的作用是什么？</td>    </tr>   </tbody>  </table> #

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

# <table>   <tbody>    <tr>     <td align="left">4、第一次页面加载会触发哪几个钩子？</td>    </tr>   </tbody>  </table> #

会触发下面这几个beforeCreate, created, beforeMount, mounted 。

# <table>   <tbody>    <tr>     <td align="left">DOM 渲染在哪个周期中就已经完成？</td>    </tr>   </tbody>  </table> #

DOM 渲染在 mounted 中就已经完成了。

# <table>   <tbody>    <tr>     <td align="left">简述每个周期具体适合哪些场景？</td>    </tr>   </tbody>  </table> #

1、`beforeCreate`：可以在这加loading事件，在加载实例时触发。  
2、`created`：初始化完成时的事件写在这里，如在这里结束loading，异步请求也适合在这里调用。  
3、`mounted`：挂载元素，获取到dom节点。  
4、`updated`：如果对数据统一处理，在这里写上相应的函数。  
5、`beforeDestroy`：可以做一个确定停止事件的确认框。

# <table>   <tbody>    <tr>     <td align="left">聊聊你对Vue.js的template编译的理解？</td>    </tr>   </tbody>  </table> #

先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）  
1、通过compile编译器把template编译成AST语法树（abstract syntax tree 抽象语法树 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。  
2、AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

--------------------

*  ### *Vue实现数据双向绑定* ###

1、Vue实现数据双向绑定的原理：Object.defineProperty（）  
2、vue实现数据双向绑定主要步骤：  
（1)需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter。  
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。  
（2)compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。  
（3)Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:  
①在自身实例化时往属性订阅器(dep)里面添加自己  
②自身必须有一个update()方法  
③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。  
（4)MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。  
3、js实现简单的双向绑定

<body>
        <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
    </body>
    <script type="text/javascript">
        var obj = {}
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj
            },
            set: function (newValue) {
                document.getElementById('txt').value = newValue
                document.getElementById('show').innerHTML = newValue
            }
        })
        document.addEventListener('keyup', function (e) {
            obj.txt = e.target.value
        })
    </script>

# <table>   <tbody>    <tr>     <td align="left">vue如何实现双向绑定/ vue双向绑定的原理/ vue双向绑定机制/ vue data是怎么实现的?</td>    </tr>   </tbody>  </table> #

采用数据劫持结合发布者-订阅者模式的方式，通过`Object.defineProperty()`来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

--------------------

*  ### *Vue组件间的参数传递、vue通信* ###

# <table>   <tbody>    <tr>     <td align="left">7、父子组件、兄弟组件之间组件传值是怎么传的？</td>    </tr>   </tbody>  </table> #

1、父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据;  
子组件传给父组件：`$emit` 方法传递参数  
2、非父子组件间的数据传递，兄弟组件传值eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。`$emit` 传值，`$on()` 接收值。项目比较小时，用这个比较合适。  
3、整个状态存储：vuex

--------------------

*  ### *vue路由* ###

1、Vue的路由实现：hash模式 和 history模式  
hash模式：在浏览器中符号“\#”，\#以及\#后面的字符称之为hash，用window.location.hash读取；  
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无害，hash不会重新加载页面。  
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 `http://www.xxx.com`，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。  
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。  
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 `http://www.xxx.com/items/id`。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。  
Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

# <table>   <tbody>    <tr>     <td align="left">vue路由的实现/ vue路由的原理？</td>    </tr>   </tbody>  </table> #

hash模式 和 history模式

# <table>   <tbody>    <tr>     <td align="left">路由之间跳转方式？</td>    </tr>   </tbody>  </table> #

1、直接修改地址栏中的路由地址。  
2、声明式（标签跳转）：通过router-link实现跳转

<router-link to="/myRegister">注册</router-link>

3、编程式（js跳转）：通过js的编程方式

this.$router.push('/myLogin');

# <table>   <tbody>    <tr>     <td align="left">怎么定义vue-router的动态路由以及如何获取传过来的动态参数？</td>    </tr>   </tbody>  </table> #

1、定义路由：在router目录下的index.js文件中，对path属性加上/:id  
2、获取参数：使用router对象的params.id

# <table>   <tbody>    <tr>     <td align="left">active-class是哪个组件的属性？</td>    </tr>   </tbody>  </table> #

vue-router模块的router-link组件

# <table>   <tbody>    <tr>     <td align="left">嵌套路由怎么定义？</td>    </tr>   </tbody>  </table> #

嵌套路由顾名思义就是路由的多层嵌套。一级路由里面使用children数组配置子路由，就是嵌套路由。

# <table>   <tbody>    <tr>     <td align="left">vue-router有哪几种导航钩子？它们有哪些参数？</td>    </tr>   </tbody>  </table> #

3种。  
1、全局导航钩子：  
（1）前置守卫：跳转前进行拦截。  
`router.beforeEach(to, from, next)`  
（2）后置钩子  
`router.afterEach((to, from) => {})`  
2、组件内的钩子  
`beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave`  
3、单独路由独享组件。  
`beforeEnter: (to, from ,next)`

const router = new VueRouter({
     routes: [
      {
       path: '/foo',
       component: Foo,
       beforeEnter: (to, from, next) => {
        // ...
       }
      }
     ]
    })

# <table>   <tbody>    <tr>     <td align="left">vue-router导航钩子实现的原理？</td>    </tr>   </tbody>  </table> #

待完善

--------------------

*  ### *vue跨域* ###

# <table>   <tbody>    <tr>     <td align="left">vue实现跨域的方法有哪些？</td>    </tr>   </tbody>  </table> #

1、proxyTable  
这里以vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件。

里面格式如下：

'use strict'
    const path = require('path')
    module.exports = {
        dev: {
            // Paths
            assetsSubDirectory: 'static',
            assetsPublicPath: '/',
            proxyTable: {
                '/api': {
                    target: 'http://localhost:7001',//后端接口地址
                    changeOrigin: true, // 是否允许跨越
                    pathRewrite: {
                        '^/api': '/api', // 重写,
                    }
                }
            },
            host: '192.168.0.104',
            port: 8081,
            autoOpenBrowser: false,
            errorOverlay: true,
            notifyOnErrors: true,
            poll: false,
            useEslint: true,
            showEslintErrorsInOverlay: false,
            devtool: 'eval-source-map',
            cacheBusting: true,
            cssSourceMap: false,
        },
    
    }

2、cors

CORS即跨源资源共享，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。但是CORS也具有一定的风险性，比如请求中只能说明来自于一个特定的域但不能验证是否可信，而且也容易被第三方入侵。 这里一般需要后端配合,开启cors。一般各种语言都有类似的包。比如NodeJS的koa2-cors

var koa = require('koa');
    //npm install --save koa2-cors
    var cors = require('koa2-cors');
    var app = koa();
    //开启
    app.use(cors());

3、Nginx  
4、后端程序代理

自己启一个后端程序做代理。然后把所有的请求转发到服务器。这里要用到node的一个包http-proxy-middleware。关键代码(express)如下

var proxy = require('http-proxy-middleware');
    var app = express();
    app.use('api', proxy({
    	target: "http://baidu.com:7001",
    	changeOrigin: true
    }))

--------------------

*  ### *vuex* ###

1、vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。  
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。  
2、应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

# <table>   <tbody>    <tr>     <td align="left">mutation 和action的区别</td>    </tr>   </tbody>  </table> #

改变状态的方式，同步逻辑封装在mutation中，异步逻辑封装在action中。

--------------------

*  ### *vue基础* ###

# <table>   <tbody>    <tr>     <td align="left">vue-cli怎样使用自定义的组件/ vue中引入组件的步骤？有遇到过哪些问题?</td>    </tr>   </tbody>  </table> #

1、components目录创建组件文件，如indexPage.vue。  
注意：script一定要export default\{\}  
2、在需要的页面（组件）引入组件（2种方式)：  
（1）es6的`import..from...`  
`import indexPage from '@/components/indexPage.vue'`  
（2）CommonJS的`require()`  
3、组件注册：注入到vue子组件的components属性上面，components\{indexPage\}  
4、在template视图view中使用。  
`<index-page></index-page>`  
注意：命名时如果是indexPage,使用的时候用index-page

# <table>   <tbody>    <tr>     <td align="left">封装插件的过程？</td>    </tr>   </tbody>  </table> #

使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。  
待完善，vue.extend vue.components vue.use之类的，和封装组件之间的关系。

# <table>   <tbody>    <tr>     <td align="left">在vue中使用插件的步骤</td>    </tr>   </tbody>  </table> #

1、引入插件(2种方式)：  
（1）es6的`import...from...`  
（2）CommonJS的`require()`  
2、使用全局方法Vue.use(plugin)使用插件，可以传入一个选项对象  
`Vue.use(myPlugin, {someOption: true})`

# <table>   <tbody>    <tr>     <td align="left">methods， computed, watch 区别？</td>    </tr>   </tbody>  </table> #

methods：简单处理  
computed：数据在模板  
watch：组件变化，做数据处理

# <table>   <tbody>    <tr>     <td align="left">vue自适应？</td>    </tr>   </tbody>  </table> #

引入lib-flexible

# <table>   <tbody>    <tr>     <td align="left">emit、broadcast区别？</td>    </tr>   </tbody>  </table> #

待完善

# <table>   <tbody>    <tr>     <td align="left">vue组件代码的健壮性？</td>    </tr>   </tbody>  </table> #

待完善

# <table>   <tbody>    <tr>     <td align="left">vue的整个实现流程？</td>    </tr>   </tbody>  </table> #

1、第一步：解析模板成render函数  
template  
2、第二步：响应式开始监听  
object.defineProperty  
data属性代理到vm上  
3、第三步：首次渲染，显示页面，且绑定依赖  
（1）为何要监听get,直接监听set不行吗？  
①data中有很多属性，有些被用到，有些可能不被用到（data中没有人访问，就不会用get，如没有\{ \{aaa\}\}指的就是aaa没有被访问）  
②被用到的会走到get，不被用到的不会走到get  
③未走到get中的属性，set的时候也无需关心  
④避免不必要的重复渲染  
4、第四步：data属性变化，触发rerender  
defineProperty, get, set  
（1）修改属性，被响应式的set监听到  
（2）set中执行updateComponent  
（3）updateComponent重新执行vm.\_render()  
（4）生成的vnode和prevVnode,通过Patch进行对比  
渲染到html

# <table>   <tbody>    <tr>     <td align="left">vue的优点是什么？</td>    </tr>   </tbody>  </table> #

1、低耦合。视图（view）可以独立于model变化和修改，一个viewModel可以绑定到不同的”view“上，当view变化的时候，model可以不变，当model变化的时候view也可以不变。  
2、可重用性。你可以把一些视图逻辑放在一个viewModel里面，让很多view重用这段视图逻辑。  
3、独立开发。开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计。  
4、可测试。界面素来是比较难测试的，而现在测试可以针对viewModel来写。

# <table>   <tbody>    <tr>     <td align="left">vue如何实现按需加载配合webpack配置？</td>    </tr>   </tbody>  </table> #

1、webpack提供了require.ensure()来实现按需加载。以前引入路由是以import方式引入，后来改为const定义的方式引入。  
2、不按需加载的引入方式：`import home from '../../common/home.vue'`  
按需加载的引入方式：`const home = r => require.ensure([], () => r(require('../../common/home.vue')))`

# <table>   <tbody>    <tr>     <td align="left">说出至少4中vue中的指令和用法？</td>    </tr>   </tbody>  </table> #

1、v-show指令是通过修改元素的display的css属性让其显示或者隐藏。  
2、v-if：判断是否隐藏。  
3、v-for：数据循环。  
4、v-bind:class，绑定一个属性。  
5、v-model：实现双向绑定。

# <table>   <tbody>    <tr>     <td align="left">v-show和v-if指令的共同点和不同点？</td>    </tr>   </tbody>  </table> #

1、v-show指令是通过修改元素的display的css属性让其显示或者隐藏。  
2、v-if指令是直接销毁和重建dom达到让元素显示和隐藏的效果。

# <table>   <tbody>    <tr>     <td align="left">如何让css只在当前组件中起作用？</td>    </tr>   </tbody>  </table> #

将当前组件的

# <table>   <tbody>    <tr>     <td align="left">keep-alive的作用是什么？</td>    </tr>   </tbody>  </table> #

`<keep-alive></keep-alive`包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

# <table>   <tbody>    <tr>     <td align="left">什么时候用到vue.nextTick()？</td>    </tr>   </tbody>  </table> #

1、created()钩子函数中，进行dom操作，要放在vue.nextTick()回调函数中。  
原因：created()钩子函数执行的时候,dom其实并未进行任何渲染。  
2、mounted钩子函数中，在数据变化中要执行某个操作，而这个操作需要随数据改变而改变数据结构。  
原因：设置数据改变，vm.someData = ‘new value’, dom并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时，才会进行必要的dom更新。此时如果想要根据更新的dom状态去做某些事情时，就会出现问题。  
为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) ，这样回调函数在 DOM 更新完成后就会调用。

# <table>   <tbody>    <tr>     <td align="left">vue-loader是什么？使用它的用途有哪些？</td>    </tr>   </tbody>  </table> #

1、定义：vue-loader 是 webpack 的一个 loader，用于处理 .vue 文件，是解析.vue文件的一个加载器。  
2、作用：js可以写成es6, style样式可以写scss、less， template中可以加jade。

# <table>   <tbody>    <tr>     <td align="left">scss是什么？在vue-cli中的安装使用步骤是什么？有哪几大特性？</td>    </tr>   </tbody>  </table> #

1、css的预编译。  
2、使用步骤：  
（1）先装css-loader、node-loader、sass-loader等加载器模块。  
（2)build目录找到webpack.base.config.js，extends属性中加一个扩展.scss  
（3）在同一个文件，配置一个module属性。  
（4）在组件的style标签上加上lang属性，如lang=“scss”  
3、特性：  
（1）可以使用变量，如（$变量名称=值）。  
（2）可以用混合器，混入@mixin可以传变量。  
（3）可以嵌套。  
（4）继承@extend不可以传变量，相同样式直接继承，不会造成代码冗余。基类未被继承时，也会被编译成css代码。

# <table>   <tbody>    <tr>     <td align="left">为什么使用key？</td>    </tr>   </tbody>  </table> #

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

# <table>   <tbody>    <tr>     <td align="left">为什么避免v-if和v-for一起使用？</td>    </tr>   </tbody>  </table> #

1、当vue处理指令时，当v-for,v-if处于同一节点时，v-for比v-if具有更高的优先级。这意味着v-if将分别重复运行于每个v-for循环中。  
2、解决：可以将v-if放在一个包装元素内。

# <table>   <tbody>    <tr>     <td align="left">请说出vue.cli项目中src目录每个文件夹和文件的用法？</td>    </tr>   </tbody>  </table> #

assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

# <table>   <tbody>    <tr>     <td align="left">自定义指令（v-check、v-focus)的方法有哪些？它有哪些钩子函数？它有哪些钩子函数参数？</td>    </tr>   </tbody>  </table> #

1、定义指令的方法：  
（1）全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。  
（2）组件内定义指令：directives  
2、钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）  
3、钩子函数参数：el、binding

# <table>   <tbody>    <tr>     <td align="left">写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？</td>    </tr>   </tbody>  </table> #

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。  
在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。  
vue部分源码如下：

// vue项目  src/core/vdom/patch.js  -488行
    // 以下是为了阅读性进行格式化后的代码
    
    // oldCh 是一个旧虚拟节点数组
    if (isUndef(oldKeyToIdx)) {
      oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
    }
    if(isDef(newStartVnode.key)) {
      // map 方式获取
      idxInOld = oldKeyToIdx[newStartVnode.key]
    } else {
      // 遍历方式获取
      idxInOld = findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
    }

创建map函数

function createKeyToOldIdx (children, beginIdx, endIdx) {
      let i, key
      const map = {}
      for (i = beginIdx; i <= endIdx; ++i) {
        key = children[i].key
        if (isDef(key)) map[key] = i
      }
      return map
    }

遍历寻找

// sameVnode 是对比新旧节点是否相同的函数
     function findIdxInOld (node, oldCh, start, end) {
        for (let i = start; i < end; i++) {
          const c = oldCh[i]
          
          if (isDef(c) && sameVnode(node, c)) return i
        }
      }