vue.js面试题总结

Myth丶恋晨 2022-05-18 02:08 217阅读 0赞

### vue的优点是什么？ ###

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

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

### 为什么要选vue？与其它框架对比的优势和劣势？ ###

*  Vue 最大优势就是它比较新颖，没历史包袱，它吸取了 React 和 Angular 的教训
 *  Vue轻量级，易上手，易学习
 *  Vue更加灵活，（比起 Angular）更少专制
 *  组件（Component）是 Vue最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码

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

### 请详细说下你对vue生命周期的理解？ ###

Vue 实例从创建到销毁的过程，就是生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。  
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。  
**创建前/后：** 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。  
**挂载前/后：**在beforeMount阶段，vue实例的$el和data都初始化了，但是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。  
**更新前/后：**当data变化时，会触发beforeUpdate和updated方法。  
**销毁前/后：**在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在作用：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

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

### vue中prop，data，computed他们的数据在页面的加载顺序 ###

好像是props>data>computed 源码里init顺序是这样

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

### 组件封装 ###

目的：为了重用，提高开发效率和代码质量  
注意：低耦合，单一职责，可复用性，可维护性  
常用操作：  
1. 分析布局  
2. 初步开发  
3. 化繁为简  
4. 组件抽象

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

### vue开发computed，watch，method执行的先后顺序 ###

*  computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
 *  methods：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
 *  watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
 *  通俗来讲，computed是在HTML DOM加载后马上执行的，如赋值；而methods则必须要有一定的触发条件才能执行，如点击事件；watch呢？它用于观察Vue实例上的数据变动，对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

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

### vue中created和mounted区别 ###

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。  
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

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

### 请列举出3个Vue中常用的生命周期钩子函数 ###

*  created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见
 *  mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
 *  activated: keep-alive组件激活时调用

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

### 简单描述每个周期具体适合哪些场景？ ###

*  beforecreate : 可以在这加个loading事件，在加载实例时触发
 *  created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
 *  mounted : 挂载元素，获取到DOM节点
 *  updated : 如果对数据统一处理，在这里写上相应函数
 *  beforeDestroy : 可以做一个确认停止事件的确认框
 *  nextTick : 更新数据后立即操作dom

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

### Vue.js虚拟DOM原理 ###

DOM是文档对象模型(Document Object Model)的简写，在浏览器中我们可以通过js来操作DOM，但是这样的操作性能很差，于是Virtual Dom应运而生。我的理解：Virtual DOM 其实就是一棵以 JavaScript 对象（ VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。  
虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。  
虚拟DOM的缺点：  
1. 代码更多，体积更大  
2. 内存占用增大  
3. 小量的单一的dom修改使用虚拟dom成本反而更高，不如直接修改真实dom快

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

### 说说Vue和Angular、ReactJS的相同点和不同点 ###

**与React的相同：**  
●都使用了Virtual DOM  
●提供了响应式和组件化的视图组件  
●将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。  
**与React的区别：**  
●组件的响应式渲染  
React的组件的数据状态发生变化时，它会以该组件为根，重新渲染整个组件子树；而Vue只去渲染需要渲染的组件。  
●HTML+CSS的编写  
React使用的JSX语法，将HTML、CSS和JS混写；而Vue使用的是templates模板方式，完全融合与经典的Web技术。  
**与Angular的相同：**  
Vue早起的灵感是来源于Angular，所以很多语法是类似的，如v-if和ng-if。  
**与Angular的区别：**  
●与Angular 1对比，Vue的性能更加优越，Angular性能会随着watcher的增加而变慢，而且Angular中一些watcher会出触发另一个更新，使得“脏检查循环”可能会运行多次。  
●Angular事实上必须用TypeScript来开发，而且Angular对于TS的支持非常全面，而Vue暂时对于TS的支持还在改进阶段。  
●Vue的体积更小，一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~130kb) 还是要小的多。

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

### 非父子层级的组件如何实现通信？ ###

简单的应用场景下，可以使用一个空的Vue实例作为中央事件总线。在复杂的情况下，可以考虑使用Vue 官方提供的状态管理模式——Vuex来进行管理。

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

### 什么是动态组件？他的作用是什么？ ###

通过使用保留的 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并可以动态地切换。除此之外，Vue还提供了keep-alve指令。keep-alive指令允许把切换出去的组件保留在内存中，并保留它的状态或避免重新渲染。 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

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

### 为什么组件中的data属性的值必须是一个函数？ ###

因为在一个组件被多次引用的情况下，如果data的值是一个Object的话，那么由于Object是一个引用类型，所以即使是该组件被多次引用，而其实操作的是同一个对象，最终导致了引用该组件的所有位置都同步的显示了。

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

### 组件之间的传值？ ###

*  父组件与子组件传值：父组件通过标签上面定义传值，子组件通过props方法接受数据
 *  子组件向父组件传递数据：子组件通过$emit方法传递参数

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

### vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？ ###

*  第一步：在components目录新建你的组件文件（indexPage.vue），script一定要export default \{\}
 *  第二步：在需要用的页面（组件）中导入
 *  第三步：注入到vue的子组件的components属性上面
 *  第四步：在template视图view中使用  
    问题：indexPage命名，使用的时候则index-page。

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

### vue如何实现按需加载配合webpack设置 ###

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。  
不进行页面按需加载引入方式：

import home from '../../common/home.vue'

进行页面按需加载的引入方式：

const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

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

### v-show和v-if指令的共同点和不同点 ###

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

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

### Vue中引入组件的步骤? ###

1）采用ES6的import … from …语法或CommonJS的require()方法引入组件  
2）对组件进行注册

// 注册
    Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })

3）使用组件`<my-component></my-component>`

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

### 指令v-el的作用是什么? ###

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标，可以是 CSS 选择器，也可以是一个 HTMLElement 实例

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

### 在Vue中使用插件的步骤 ###

*  采用ES6的import … from …语法或CommonJSd的require()方法引入插件
 *  使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, \{ someOption: true \})

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

### active-class是哪个组件的属性？ ###

vue-router模块的router-link组件。

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

### 说出至少4种vue当中的指令和它的用法？ ###

v-if：判断是否隐藏；v-for：数据循环；v-bind:class：绑定一个属性；v-model：实现双向绑定

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

### vue-loader是什么？使用它的用途有哪些？ ###

解析.vue文件的一个加载器。  
用途：js可以写es6、style样式可以scss或less、template可以加jade等

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

### scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？ ###

css的预编译。  
使用步骤：  
第一步：先装css-loader、node-loader、sass-loader等加载器模块  
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss  
第三步：在同一个文件，配置一个module属性  
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”  
特性:  
\* 可以用变量，例如（$变量名称=值）；  
\* 可以用混合器，例如（）  
\* 可以嵌套

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

### 为什么使用key？ ###

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

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

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

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

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

### 自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？ ###

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

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

### 请说下封装 vue 组件的过程？ ###

答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。  
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

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

### 请说出vue.cli项目中src目录每个文件夹和文件的用法？ ###

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

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

### 你觉得怎样的自定义组件是完善的？ ###

可以通用、代码尽量简洁、容易修改、功能要多一点

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

### 请说下具体使用vue的理解？ ###

1、使用vue不必担心布局更改和类名重复导致的js重写，因为它是靠数据驱动双向绑定，底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现。  
2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。  
3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。  
4、js的代码无形的规范，团队合作开发代码可阅读性更高。

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

### 你觉得哪些项目适合vue框架？ ###

1、数据信息量比较多的，反之类似企业网站就无需此框架了。  
2、手机web和app应用多端共用一套界面的项目，因为使用vue.cli+webpack后的前端目录，非常有利于项目的跨平台部署。

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

### PC端项目你会在哪些场景使用Vue框架？ ###

场景：上万级数据需要瀑布流更新和搜索的时候，因为数据庞大的时候，用原生的dom操作js和html都会有列表的html布局，迭代很困难。再一个dom节点的大面积添加会影响性能。  
那么vue为什么解决这些问题呢？  
第一：只需用v-for在view层一个地方遍历数据即可，无需复制一段html代码在js和html两个地方。  
第二：vue通过Virtual Dom就是在js中模拟DOM对象树来优化DOM操作。

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

### Vue computed 实现 ###

建立与其他属性（如：data、 Store）的联系；属性改变后，通知计算属性重新计算  
**实现时，主要如下：**  
1. 初始化 data， 使用 Object.defineProperty 把这些属性全部转为 getter/setter。  
2. 初始化 computed, 遍历 computed 里的每个属性，每个 computed 属性都是一个 watch 实例。每个属性提供的函数作为属性的 getter，使用 Object.defineProperty 转化。  
3. Object.defineProperty getter 依赖收集。用于依赖发生变化时，触发属性重新计算。  
4. 若出现当前 computed 计算属性嵌套其他 computed 计算属性时，先进行其他的依赖收集。

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

### `$router`和`$route`的区别 ###

route为当前router跳转对象里面可以获取name、path、query、params等  r o u t e 为 当 前 r o u t e r 跳 转 对 象 里 面 可 以 获 取 n a m e 、 p a t h 、 q u e r y 、 p a r a m s 等 router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

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

### 怎么定义vue-router的动态路由以及如何获取传过来的动态参数？ ###

在router目录下的index.js文件中，对path属性加上/:id，使用router对象的params.id来获取参数。

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

### 3种vue路由传参的基本模式： ###

1、
    getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
        this.$router.push({
         path: `/describe/${id}`,
        })
    // 方案一，需要对应路由配置如下：
      {
       path: '/describe/:id',
       name: 'Describe',
       component: Describe
      }
    // 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。
    // 在子组件中可以使用来获取传递的参数值。
    $route.params.id
    
    2、
    // 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
        this.$router.push({
         name: 'Describe',
         params: {
          id: id
         }
        })
    // 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
      {
       path: '/describe',
       name: 'Describe',
       component: Describe
      }
    //子组件中: 这样来获取参数
    $route.params.id
    
    3、
    // 父组件：使用path来匹配路由，然后通过query来传递参数
    这种情况下 query传递的参数会显示在url后面?id=？
      this.$router.push({
         path: '/describe',
         query: {
          id: id
         }
        })
    // 对应路由配置：
      {
       path: '/describe',
       name: 'Describe',
       component: Describe
      }
    // 对应子组件: 这样来获取参数
    $route.query.id

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

### 路由之间跳转？ ###

声明式（标签跳转）：  
编程式（ js跳转）：router.push(‘index’)

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

### vue-router有哪几种导航钩子？它们有哪些参数？ ###

1 、全局导航钩子  
beforeEach  
beforeResolve  
afterEach  
2 、某个路由独享的导航钩子  
beforeEnter  
3 、路由组件上的导航钩子  
beforeRouteEnter  
beforeRouteUpdate (2.2 新增)  
beforeRouteLeave  
参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

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

### 路由懒加载 ###

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

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

### 你是怎么认识vuex的？ ###

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

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

### vuex是什么？怎么使用？哪种功能场景使用它？ ###

vue.js的中心化状态管理方案。在main.js引入store，注入。新建一个目录store，….. export 。  
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

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

### vuex有哪几种属性？ ###

有五种，分别是 State、 Getter、Mutation 、Action、 Module  
\* vuex的State特性  
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data  
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新  
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中  
\* vuex的Getter特性  
A、getters 可以对State进行计算操作，它就是Store的计算属性  
B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用  
C、 如果一个状态只在一个组件内使用，是可以不用getters  
\* vuex的Mutation特性  
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

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

### 不用Vuex会带来什么问题？ ###

*  可维护性会下降，想修改数据要维护三个地方；
 *  可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
 *  增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

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

### Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？ ###

一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。  
二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。

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

### axios的特点有哪些？ ###

一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API  
二、它可以拦截请求和响应  
三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据  
四、安全性更高，客户端支持防御 XSRF

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

### axios有哪些常用方法？ ###

一、axios.get(url\[, config\]) //get请求用于列表和信息查询  
二、axios.delete(url\[, config\]) //删除  
三、axios.post(url\[, data\[, config\]\]) //post请求用于信息的添加  
四、axios.put(url\[, data\[, config\]\]) //更新操作

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

### 说下你了解的axios相关配置属性？ ###

`url`是用于请求的服务器URL  
`method`是创建请求时使用的方法,默认是get  
`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。它可以通过设置一个`baseURL`便于为axios实例的方法传递相对URL  
`transformRequest`允许在向服务器发送前，修改请求数据，只能用在’PUT’,’POST’和’PATCH’这几个请求方法  
`headers`是即将被发送的自定义请求头：headers:\{‘X-Requested-With’:’XMLHttpRequest’\},  
`params`是即将与请求一起发送的URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象

params:{ ID:12345 },

`auth`表示应该使用HTTP基础验证，并提供凭据。这将设置一个`Authorization`头，覆写掉现有的任意使用`headers`设置的自定义`Authorization`头

auth:{ username:'janedoe', password:'s00pers3cret' },

‘proxy’定义代理服务器的主机名称和端口  
`auth`表示应该使用HTTP基础验证，并提供凭据。这将设置一个`Authorization`头，覆写掉现有的任意使用`headers`设置的自定义`Authorization`头

proxy:{ host:'127.0.0.1', port:9000, auth:{ username:'mikeymike', password:'rapunz3l' }
    },