vue.js面试题总结

最新推荐文章于 2024-07-12 17:50:49 发布

mangxi8200

最新推荐文章于 2024-07-12 17:50:49 发布

阅读量1k

点赞数

分类专栏： vue.js

vue.js 专栏收录该内容

3 篇文章 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等$ 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'
    }
},