vue的面试题

一.vue-loader是什么使用它的用途是什么

• vue-loader 是 webpack 的一个 loader，用于处理 .vue 文件。
• vue-loader是一个webpack的loader；可以将vue文件转换为JS模块；
• vue-loader是解析.vue文件的一个加载器。
  。 用途：js可以写es6、style样式可以scss或less、template可以加jade等

二.关于样式,如何让css样式在组件中生效

穿透

• 语法:
  。 父元素 /deep / 子元素
  。父元素 >>> 子元素

   <style scoped lang="">
      scoped : 局部化 
      lang :语言==> less scss stylus
    </ style >

 < style scoped>
 1 .swiper-pagination  >>> .swiper-pagination-bullet-active{
    background:red;
  }
 2 .swiper-pagination  /deep/ .swiper-pagination-bullet-active{
    background:red;
 }
</style>

stylus:

• 下载

 npm i stylus stylus-loader --save

• 引入使用

 < style lang="stylus">
  $bgColos=red;  可以在.styl文件里面写上相应的样式，调用正常使用.
  .swiper-pagination /deep/ .swiper-pagination-bullet-active{
     background:$bgcolor;
  }
 </style>

新建文件： xxx.styl

• 可以@ ===~@ (可以区别引入的文件)
  

在vue中数据更新了,视图没有更新是为什么，解决方法下两点

获取最新的dom nextTick

this.$forceUpdate()

 语法:
    this.$nextTick(()=>{
      //获取到最新的dom
    })
  场景：盒子没有更新以后，比如 new Swiper
  watch:{
   swiperList(){ //数据名
         //如果swiperList数据发生变化,更新最后的dom结构.
         this.$nextTick(()=>{
         new Swiper(".swiper-contianer")
     })
   }
 }

key的作用

key是优化性能的,因为vue组件高度复用增加,Key是标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

• 如果没有key
  。改变的都会执行
• 有key
  。只改变，要改变的

vue双向绑定的原理

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

• 具体实现步骤

1. 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2. 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3. 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

watch和componted的区别

vuex的原理

是基于原型链prototype

vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的。

• 实现本质方法区别
  • vue-show本质就是标签display设置为none，控制隐藏
  • vue-if是动态的向DOM树内添加或者删除DOM元素
• 编译的区别
  • v-show其实就是在控制css
  • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
• 编译的条件
  • v-show都会编译，初始值为false，只是将display设为none，但它也编译了
  • v-if初始值为false，就不会编译了
• 性能
  • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建
  • 故v-show性能更好一点。

指令keep-alive

• 在vue-router写着keep-alive，keep-alive的含义：
• 把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令

<component :is='curremtView' keep-alive></component>

vue如何进行性能优化？怎么做vue的兼容？

1. 慎用deep watch
 
2. 尽可能的减少watcher的数量
 
　　在上面16000个素材的情况，vue至少会创建16000个watcher，实际情况下会多得多，这样的后果就是操作时js执行会特别耗时，这里我优化的办法是把素材数据单独保存到一个js变量中，只把需要展示给用户的那一屏数据拿出来给vue监听，这样大大减少了wather的数据，原理同2，现在16000个素材无论是操作还是滑动滚动条一点都没有卡顿的感觉了。
 
结语：之前在哪看过一句话，大意是不要老想着从技术的角度去解决问题，要试着从设计上从方式上去规避问题，挺有感触的

vue的优点是什么呢？

MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好
 
数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。
 

路由的底层原理？

 
通过改变浏览器地址URL，在不重新请求页面的情况下，更新页面视图
 
1.一种是# hash   ,    在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航
 
2.一种是h5的history  ,     使用URL的Hash来模拟一个完整的URL