vue面试题大全（vue面试题汇总）

• 你知道v-model的原理吗？说说看

v-model是个语法糖:

v-bind:value="value"

v-on:input="e => value = e.target.value"

• 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？

不能同名 因为不管是计算属性还是data还是props 都会被挂载在vm实例上，因此 这三 个都不能同名

• 怎么给vue定义全局的方法？

第一种：挂载到Vue的prototype上。

第二种：利用全局混入mixin

• 怎么解决vue打包后静态资源图片失效的问题？

找到config/index.js 配置文件，找build打包对象里的assetsPublicPath属性

默认值为/，更改为./就好了

• 怎么解决vue打包后静态资源图片失效的问题？

因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。

• 跟keep-alive有关的生命周期是哪些？描述下这些生命周期

activated和deactivated两个生命周期函数

当keep-alive组件激活时，触发activated，keep-alive组件停用时调用deactivated

• 你有看过vue推荐的风格指南吗？列举出你知道的几条

1、组件名称见名知意，最好加特殊前缀，如：el-Button、el-row等

2、组件的prop尽可能描述得越详细越好

3、为组件样式设置scoped作用域

4、使用v-for时记得加key，可以快速定位到需要更新的DOM节点，提高效率。

5、永远不要把 v-if 和 v-for 同时用在同一个元素上。提高渲染效率

6、优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线

• 你知道vue中key的原理吗？说说你对它的理解

作用的话，便于diff算法的更新，key的唯一性，能让算法更快地找到需要更新的dom， 需要注意的是，key要唯一，不然会出现很隐蔽性的更新问题。

• vue中怎么重置data？

使用Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data可以获取到组件初始化状态下的data，

• vue渲染模板时怎么保留模板中的HTML注释呢？

设置comments属性，官网默认为舍弃注释

 <template comments>
 ...
 <template>

• Vue.observable你有了解过吗？说说看

vue2.6发布一个新的API，可以处理一些简单的跨组件共享数据状态的问题。

类似于轻量级的vuex，用状态管理

• 你知道style加scoped属性的用途和原理吗？

用途：防止全局同名CSS污染

原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式

• watch的属性用箭头函数定义结果会怎么样？

this为undefined

• 你有使用过babel-polyfill模块吗？主要是用来做什么的？

babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill去模拟这些新特性。

• 在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？

event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素。

• vue项目有使用过npm run build --report吗？

给 process.env 对象添加了一个属性 npm_config_report: "true"，表示开启编译完成后的报告。