vue 面试题

一、vue的原理：

      vue是m-v-vm模式，即model - view - viewmodel，通过viewmodel作为中间层也就是VM的实例进行数据的双向绑定与变化，

      1.创建虚拟Dom树，  也就是Document.createDocumentFragment()方法创建虚拟Dom树

      2.一旦发现数据发生变化，会通过Object.defineProperty定义的数据拦截，截取到数据的变化

      3.通过订阅者-发布者模式，触发watcher(观察者)，从而改变虚拟Dom 中的数据

      4.最后更新虚拟Dom的元素值从而改变最后渲染Dom树 的值，完成舒安乡绑定。

 

     数据的双向绑定原理：也就是数据劫持，通过Object.definePropertotype()方法实现，根据此方法中的get/set 对数据进行设置，在通过

      observer 、compile、watcher 以及订阅者、发布者之间的关系对数据进行绑定、监听、响应实现数据双向绑定。

 

二、什么是MVVM，与MVC的区别?

      mvvm是一种设计思想，是model 、view 、viewmodel的缩写，viewModel作为数据层model和视图层view的桥梁把他们连接起来，

       是同步数据层和视图层的一个对象，

     MVVM与MVC的区别：她俩都是一种设计思想，区别在于MVVM是主动的MVC，是在MVC的基础上把controller演变成了viewmodel，解决了

      大量的Dom操作，是渲染更加快速,提高性能

三、怎么理解单项数据流？

     这个概念出现在组件通信，父组件是通过props把数据传给子组件的，但这个props只能通过父组件更改，子组件是不能直接更改父组件数据的，

    子组件想更改时只能通过$emit发送一个事件,父组件接收到这个事件后有父组件更改。

四、组件中的data为什么是函数？

      因为组件是用来复用的，js 对象里是引用关系，这样作用域没有隔离，如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，

      类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，

      就会造成一个变了全都会变的结果。所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。

      js本身的面向对象编程也是基于原型链和构造函数，应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。

五、组件通讯

       父传子：父组件通过在标签上定义属性，子组件通过props接受这个数据

       子传父 ： 子组件通过this.$emit 发送一个事件，父组件通过一个回调函数来接收

        同级页面传参：通过 eventBus中转站

              A页面通过this.$emit发送事件， this.$bus.$emit("send",this.userName)

              B组件通过this.$on 来接受这个事件  this.$bus.$on("send",(val)=>{console.log(val)})   

六、路由跳转

      1.标签跳转 router-link to="/home", 相当于一个 a 标签

      2. js 跳转  this.$router.push("/home")

七、router 和 route 的区别？

      Router 是一个路由实例对象，包含了路由跳转和钩子函数

      Route  是一个路由信息对象  包括：query 、params path 、name。。

八、vue-router有哪几种导航钩子？

       全局守卫 ：beforEach(to ,from ,next)、 afterEach(to,from,next)

       组件守卫 ：beforRouterEnter(to ,from ,next)

       独享守卫 ：beforEnter (to ,from ,next)

        三个参数：

           to ：要去的路由，

           from ：当前路由 ，

           next ：一定要用这个函数才能去到下一个路由 

九、vue 指令？

       v-if ：条件渲染，是创建和销毁，一般用于切换比较少的地方

       v-show ：显示和隐藏，相当于display:none，一般用于切换比较频繁的时候

       v-model、 v-bind、 v-for 、v-html 、v-text

  9.1: v-if 和 v-for哪个优先级高？

        v-for的优先级高,

  9.2 事件修饰符：

       .stop 阻止冒泡，调用 event.stopPropagation()

       .prevent 阻止默认事件，调用 event.preventDefault()

       .capture 添加事件侦听器时使用事件捕获模式

       .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 

        .once 事件只触发一次

  9.3 vue中的key 的作用?

       key属性作为元素的唯一标识，加载过的数据标签,不会再去进行循环，不会再次渲染 ，提高性能。

十、说说 vuex ？

   状态管理 有五个属性

       state:存放数据  this.$store.state.name

       mutations :是操作state数据的，但它是同步的，调用this.$store.commit('edit',15)

       actions : 与mutations一样但他是异步操作 ，提交的是mutations通过dispatch分发方法。

       getters: 相当于计算属性,

   getters:{
       nameInfo(state){
          return "姓名:"+state.name
       },
       fullInfo(state,getters){
          return getters.nameInfo+'年龄:'+state.age
       }  
     }

                在组建通过this.$store.getters.fullInfo

      model ：

 

十一、this.nextTick()

           在数据变化后要执行的某个操作，而这个操作需要使用随数据的变化而变化的Dom结构的时候，这个操作就要放进vue.nextTick()的回电函数中

十二、插槽slot

          单个插槽

         命名插槽 

          作用域插槽  scoped slots

十三、生命周期有哪些？及作用？

         创建前后 : beforeCreate  .Created 

         挂载前后 ：beforeMount 、Mounted

         更新前后 ：beforeUpdate 、Updated

         销毁前后 ：beforeDestory 、Destory

         激活前后 ：beforeActive  、Actived

      作用是让组建的可控性更高，利于开发,

十四、keep-alive：

       是用来缓存组件实例的，主要用于缓存不活动的组件实例，避免重新渲染

            include ：  字符串或正则表达，只有匹配的组件会被缓存

            exclude： 字符串或正则表达式，任何匹配的组件都不会被缓存

十五、计算属性computed 和 methods 的区别？computed  和 watch的 区别？

      计算属性是自动监听属性的变化，从而动态返回内容，监听是一个过程，当监听的一个值发生变化时，会触发一个回调，并做一个事情，所以区别在于用法，

      只是需要动态值那就用computer，而如果是要在值发生变化后执行业务逻辑就用watch .

      computed 是一个对象时，他有get和 set两个选项 可以缓存的

       methods 是一个方法他可以接受参数，而computed不可以，但computed可以缓存的，而methods不可以

       watch 监听属性配置：

          handler 

          deep 是否深度

          immeditate  是否立即执行

十六、vue-loader是什么？使用它的用途有哪些？

        是vue文件的一个加载器，跟template、js、