vue常见面试题

虽然现在已经9102年了，我还是想把之前面试vue常见的面试题总结一下，希望可以帮助到大家

1. mvvm 和 mvc 的区别？
   mvvm：Model-View-ViewModel 的缩写
   mvc：Model-View-controller 的缩写
   两者都是一种设计思想，前者中的 controller 演变成后者的 viewModel 。
   mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 model 频繁发生变化，开发者需要主动更新到 view。
   
   
2. 为什么使用 vue？（优点）
   vue两大特点：响应式编程、组件化
   vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快
   
   
3. 常见的 vue 指令？ 
   v-html    //输出html
   v-if        //条件显示  
   v-else
   v-else-if
   v-show   //条件显示(下面有与 v-if 的区别)
   v-for     //遍历渲染数据
   v-bind    //用来动态的绑定一个或者多个特性。
   v-model   //双向数据绑定
   
   
4. v-if 与 v-show 的区别
   

   v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

   v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

   相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

   一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
   
   

5. 组件之间的传值？
   
   父组件传值给子组件
   

   //父组件

    <template>
         <div>
           父组件:
           <input type="text" v-model="name">
           <br>
           <br>
           <!-- 引入子组件 -->
           <child :inputName="name"></child>
         </div>
       </template>
       <script>
         import child from './child'
         export default {
           components: {
             child
           },
           data () {
             return {
               name: ''
             }
           }
         }
       </script>
   

   　　//子组件

     <template>
         <div>
           子组件:
           <span>{{inputName}}</span>
         </div>
       </template>
       <script>
         export default {
           // 接受父组件的值
           props: {
             inputName: String,
             required: true
           }
         }
       </script>
       
   

   　子组件传值给父组件
   //子组件
   

          <template>
             <div>
               子组件:
               <span>{{childValue}}</span>
               <!-- 定义一个子组件传值的方法 -->
               <input type="button" value="点击触发" @click="childClick">
             </div>
           </template>
           <script>
             export default {
               data () {
                 return {
                   childValue: '我是子组件的数据'
                 }
               },
               methods: {
                 childClick () {
                   // childByValue是在父组件on监听的方法
                   // 第二个参数this.childValue是需要传的值
                   this.$emit('childByValue', this.childValue)
                 }
               }
             }
           </script>  

   //父组件
   

    <template>
     <div>
       父组件:
       <span>{{name}}</span>
       <br>
       <br>
       <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
       <child v-on:childByValue="childByValue"></child>
     </div>
   </template>
   <script>
     import child from './child'
     export default {
       components: {
         child
       },
       data () {
         return {
           name: ''
         }
       },
       methods: {
         childByValue: function (childValue) {
           // childValue就是子组件传过来的值
           this.name = childValue
         }
       }
     }
   </script>
   

   兄弟间传值
   （非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。）
   公共bus,js
   

   //bus.js
   import Vue from 'vue'
   export default new Vue()
   

   组件A

   <template>
     <div>
       A组件:
       <span>{{elementValue}}</span>
       <input type="button" value="点击触发" @click="elementByValue">
     </div>
   </template>
   <script>
     // 引入公共的bug，来做为中间传达的工具
     import Bus from './bus.js'
     export default {
       data () {
         return {
           elementValue: 4
         }
       },
       methods: {
         elementByValue: function () {
           Bus.$emit('val', this.elementValue)
         }
       }
     }
   </script>

   
   组件B　

       <template>
         <div>
           B组件:
           <input type="button" value="点击触发" @click="getData">
           <span>{{name}}</span>
         </div>
       </template>
       <script>
         import Bus from './bus.js'
         export default {
           data () {
             return {
               name: 0
             }
           },
           mounted: function () {
             var vm = this
             // 用$on事件来接收参数
             Bus.$on('val', (data) => {
               console.log(data)
               vm.name = data
             })
           },
           methods: {
             getData: function () {
               this.name++
             }
           }
         }
       </script>

6. 路由间跳转？

   Vue 路由 url 路由传参(一个参数)，另一个页面接受参数
   跳转页面 <router-link :to="{path:'/details?id='+item.id}" v-for="item in arr"></router-link>
   接受页面 this.$route.query.id 
   
   

   Vue 路由 url 路由传参(两个参数)，另一个页面接受参数
   跳转页面  <router-link :to="{path:'/app/logDetail?id='+item.id+'&logDate='+item.logDate}"></router-link>
   接受页面  this.$route.query.id   this.$route.query.logDate
   
   

   Vue 路由 url 路由传参数，在 js 中写
   一个参数 this.$router.push({path:'/details',query:{id:_id}});
   两个参数 this.$router.push({path:'/details',query:{id:_id,myda:_myda}});
   
   

   Vue 路由跳转导航后不会留下 history （浏览）记录
   <router-link :to="{ path: '/abc'}" replace></router-link>  replace属性 Vue 路由指定标签跳转，指定 li 跳转
   <router-link to="/foo" tag="li">foo</router-link>
   <li>foo</li>

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

8. vue 双向绑定原理？
   

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

   具体步骤：
   第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

   第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

   第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:

   • 在自身实例化时往属性订阅器(dep)里面添加自己

   • 自身必须有一个 update()方法

   • 待属性变动 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。

   第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果
   
   常考知识点就这么多了，不过大家还是要经常在官网上多看看，最后祝大家一切顺利，加油！
   最后附上 vue 官网地址：https://cn.vuejs.org/v2/guide/