VUE 各种遇到的问题以及面试题

1.你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解.

mustache，主要是使用{{}}进行数据渲染。

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

v-model是一个语法糖，真正实现双向绑定还是依靠v-bind：绑定响应式数据。以及触发input事件并传递数据（核心和重点）

3.怎么给VUE定义全局方法？

第一种：将方法挂载到Vue的proptotype上，第二种使用全局混入mixin。

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

找到config/index.js配置文件，找到build打包对象里的assetsPublicPath属性，将默认值：'/'，修改为：'./'。

5.怎么解决vue动态设置img的src不生效的问题？

因为动态添加的src被当做静态资源处理了，没有进行编译，所以要加上require。
<img :src="require('@/assets/images/xxx.png')" />

6.使用vue后怎么针对搜索引擎做SEO优化？

使用服务端渲染，vue官方推荐nuxt.js

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

1.activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

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

1.标签命名风格。例如<el-button>
2.组件样式添加 scoped属性。
3.使用v-for记得加上key。可以快速定位到更新的dom节点，提高效率。
4.优先使用vuex管理全局状态。

9.Vue1.x和Vue2.x有什么区别

1，2.0生命周期更加语义化，增加了 beforeUpdate，updated，activated，deactivated，删除了attached，detached。
2，2.0删除了1.0自带的过滤器。

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

便于diff算法的更新，key的唯一性，能让diff算法更快的找到需要更新的dom节点。

11.Vue中怎么重置data

1.Object.assign()方法：用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。
2.this.$data：获取当前状态下的data。
3.this.$option.data：获取该组件初始化状态下的data。
4.Object.assign(this.$data,this.$option.data);

12.Vue渲染模板时怎么保留模板中的HTML注释呢?

//模板标签添加 comments 属性
<template comments>
     ...
</template>

 13.Vue.Observable你有了解过吗？

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

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

1.用途：防止全局同名css污染。
2.原理：在标签上添加v-data-something属性，再在选择器加上对应[v-data-something],即css带属性选择器，以此完成类似作用域的选择方式。

15.vue边界情况有哪些？

1.访问元素&组件
   访问根实例
   访问父组件实例
   访问子组件实例或子元素
   依赖注入
2.程序化的事件侦听器
   $on(event,,,) ：侦听一个事件
   $once(event,,,)：一次性侦听一个事件
   $off(event,,,)：停止侦听一个事件
3.循环引用
   3.1：递归组件
   3.2：组件之间的循环引用

16.如何通过子组件访问父组件的实例

this.$parent :拿到父组件的实例
this.$children拿到子组件实例（数组）

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

this为undefined，因为箭头函数绑定了父级作用域的山下文，所以this将不会按照期望指向vue实例。

18.在vue项目中如果methods的方法用箭头函数定义结果会怎么样？

因为箭头函数默认绑定了父级作用域的上下文，所以this将不会绑定vue实例，所以this是undefined。

 19.在vue项目中如何配置favicon？

1.在html中添加mate标签
2.在vue-cil中开发环境webpack.dev.config.js中配置，和生产环境webpack.prod.config.js中配置。

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

babel默认只进行转换语法，而不转换新的api。所以想要转换新的api还需要对应的转换插件。或者使用polyfill模拟新api。

21.说说你对vue的错误处理的了解？

vue错误处理有两种，
1.errorCaptured：是组件内部钩子，可以捕获到本组件以及子孙组件抛出的错误，接收参数有error，vm，info三个参数，return false后可以阻止错误继续向上抛出、
2.errorHandler：为全局钩子，使用vue.config.errorHandler配置，接收参数和errorCaptured一致，2.6后可捕获v-on与promise链的错误，可用于统一错误处理与错误兜底。

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

e.target：属于事件发生者（鼠标触发的元素）
e.currentTarget：属于事件绑定的元素。

23.vue怎么实现强制刷新组件？

//强制刷新某组件

<SomeComponent :key='theKey'>
//选项里绑定data
data(){
  return{
      theKey:0
  }
}
//刷新key达到刷新组件的目的
theKey++;

 24.vue自定义事件中父组件如何接收子组件的多个参数？

//子组件提交多个参数
var data = {
    'name':'1',
    'name2':'2'
}
this.$emit('func',data)

25.vue给组件绑定自定义事件无效怎么解决？

1、组件外部加修饰符：.native

//父组件
<div>
     <my-children @click.native='onClick'></my-children>
</div>

2、组件内部添加$emit()方法提交事件

 

转载于:https://www.cnblogs.com/MJ-MY/p/11612112.html