vue知识点

向右看齐 2023-06-06 10:37 16阅读 0赞

**在这里总结一些vue常见的面试题，希望能够帮助到你们的面试**

**你对vue中mvvm的模式设计有什么感想？**  
mvvm设计模式采用的双向绑定，当view发生变化，model会跟着变化，model发生变化，view也会同步，这样的话，我们就可以更多的关注逻辑，从而减少dom的操作，代码的耦合性也更好

**vue中利用索引修改数组的时候，页面会跟着同步吗？**  
利用索引修改数组的时候，页面不会进行同步，此时应该利用vue.set的方法进行设置数据

**vue首屏加载过慢如何解决？**  
路由懒加载，会将原来打包一个app.js的文件打包成多个文件

异步组件，按需加载

webpack开启gzip压缩

如果图片过多，开启图片懒加载

使用cdn资源

如果首页是登录页，做多入口

**vue中v-if和v-show有什么区别？**  
v-if和v-show都会让元素显示和隐藏，但是v-if是通过移除和添加dom元素，v-show是通过display:none来实现隐藏

**vue中的父子组件传值和兄弟组件传值都是如何实现的？**  
父向子传值，主要通过子组件的props，获取父组件绑定的数据

子向父传值，主要通过子组件利用$emit触发父组件上的事件

兄弟组件传值利用eventbus的方式，主要利用创建一个空的vm实例，作为中间者

**你之前有做过spa类型的项目吗？怎么实现的？**  
spa就是单页面应用程序，而单页面应用程序，主要依靠路由来实现，路由根据不同的hash值来展示不同的组件

**路由中如何去除url上的‘\#’\#**  
路由有两种模式，一种为hash模式，另一种为history模式，开启history模式后自动去除\#，开启history模式需要后台配合

new VueRouter({
      mode:'history',
      route:[]
    })

**vue中的单项数据流和双向数据绑定是什意思？**  
单项数据流是指数据是单向的，父组件的数据传递给子组件，只能单项绑定，不可以在子组件修改父组件的数据

双向数据绑定：是指数据和页面进行双向绑定，相互影响

**vue中双向数据绑定的原理是什么？**  
vue双向数据绑定的原理主要通过数据劫持Object.defineProperty和发布订阅模式实现的，通过Object.defineProperty监听数据发生变化然后通知订阅者（watcher），订阅者触发响应的回调

**为什么在使用v-for的时候需要添加key属性**  
因为vue在更新渲染dom的时候是根据新旧dom数进行对比的，使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

**为什么vue组件中的data必须是函数**  
因为如果默认为data是对象的话，对象为引用类型，这样的话，所有复用的组件都是引用的同一个数据，但是如果是函数的话，每次函数都会先创建一个新的数据，从而使每个组件的数据独立

**你对vue生命周期的理解怎么样？**  
vue的生命周期就是vue实例的创建运行销毁的一个过程，在不同的阶段会触发不同的函数，这些函数也就是生命周期函数，比如create，在实例创建数据已经完毕，能够做一些数据的初始化，但是dom还没有渲染，mounted页面数据全部渲染完毕，可以在此函数内部操作dom

**你知道webpack中babel、plugin、loader都有什么作用吗？**  
babel用来出来es6转es5，plugin配置webpack的一些插件，loader用来配置解析处理第三方文件的

**keep-alive的作用**  
包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

**你知道路由钩子吗？**  
路由钩子分为全局钩子、路由独享钩子、组件内钩子，全局钩子用来拦截所有的路由的，进行处理，路由独享钩子，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。组件内钩子，是将钩子函数定义在组件内部了

**项目中如果涉及多个组件数据共享你如何解决？**  
可以启用vuex

**vuex中的五个属性都是什么? 有什么作用？**  
State 存储数据  
Getter 可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。  
Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation  
Action 包含任意异步操作，通过提交 mutation 间接更变状态  
Module 将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块  
**vue中如何实现深度监视？**

new Vue({
      el: '#root',
      data: {
        obj: {
          a: 123
        }
      },
      watch: {
        obj: {
          handler(newVal, oldVal) {
             console.log('obj.a changed');
          },
          deep: true
        }
      } 
    })