2021面试题栏 -- vue部分_vue前端面试题

1，vue的生命周期？

        答案：vue有8个生命周期钩子函数，表示一个vue实例从创建到摧毁的过程。分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

2，常用的指令有哪些？

        答案：

                v-model：实现双向数据绑定；

                v-once：页面进入时，只渲染一次；

                v-if：控制元素是否创建和摧毁，效果上表现为元素的显示和隐藏；

                v-show：控制元素的显示和隐藏；

                v-for：循环遍历；

                v-bind：可以缩写为“：”数据的动态绑定；

                v-on：可以缩写为“@” 给元素绑定函数；

3，computed和watch的区别？

        答案：

        computed：计算属性，支持缓存，计算结果会缓存在vue实例中，除第一次执行计算外以后会在缓存中直接读取，除非依赖数据发生变化，才会重新计算；不支持异步操作；

        watch：侦听属性，不支持缓存，每次使用计算后的数据都是重新计算的结果；watch内部支持异步操作；watch接受两个参数，第一个是最新的值，第二个是原来的值；函数有两个参数，分别是immediate表示组件加载立即触发回调函数执行；deep深度监听。

4，watch能监听computed的属性吗？

        答案：可以监听；

5，vue的响应式原理？

        答案：在一个vue实例被创建的时候，data中的变量会被vue遍历property，并使用Object.property把这些property全部转换为getter/setter;getter/setter使用者是不可见的，当data中的数据发生变更和使用的时候会被调用。vue实例有watcher实例，用于监听data对象并收集数据property记录为依赖，然后调用setter和getter实现实例的重新渲染。

6，mounted拿到数据后可以直接获取dom吗？

        答案：可以，只要mounted中获取dom的代码段执行时间在dom树渲染后。$nextTick这个vue的全局方法或者定时操作；

7，nextTick原理？

        答案：把回调函数放入callback等待执行，将执行函数放到微任务或者宏任务中，事件循环到微任务或者宏任务的时候，执行函数依次执行callback中的回调；

8，vue模板（template）里为什么不能使用多个头结点？

        答案：首先template标签的特性是：隐藏性，任意性，无效性。意思就是我们在实际的.vue文件中，template只是一个标志，他不被渲染，可以写在任何地方，我们也无法获取到它。对于一个.vue文件来说，template中的HTML元素会作为虚拟dom被渲染，而template中的最外层div就是vue处理和识别的直接dom，如果有两个div，vue就不知道该识别哪一个。

9，vue的优点？

        答案：

        轻量级的渐进式框架，只关注视图层，不仅易于上手，还方便与第三方库和既有项目整合；

        组件化，保留了react组件化的优点，实现了HTML和js的封装和重用，在构建单页面应用方面有独特的优点；

        MVVM，视图，数据，结构分离，只要操作数据就可以改变视图，很直观；

        虚拟dom，操作真是dom非常的影响性能，虚拟dom极大地解决了该问题；

        双向数据绑定，在数据操作方面很方便；

10，组件间传值？

        答案：

        父传子：props；

        子传父：$emit方法；

11，v-if和v-show的区别？

        答案：

        v-if是控制元素的摧毁和创建来实现视图上的显示和隐藏，摧毁后DOM结构中就没有该元素，比较消耗性能；适用于元素不频繁的显示和隐藏；

        v-show是控制元素的css属性的display来实现显示和隐藏，元素还会保留在DOM结构中，相比之下性能消耗比较小；适用于元素频繁的显示隐藏；

12，vue2和vue3在数据绑定这一块有什么区别？

        答案：vue2.x是用Object.defineProperty()实现双向数据绑定，vue3.x是用proxy实现；

13，vue挂载和卸载父子组件声明周期钩子函数执行顺序？

        答案：

        挂载：父beforeCreate -> 父created -> 父beforeMounte -> 子beforeCreate -> 子created ->                  子beforeMounte -> 子Mounted -> 父Mounted；

        卸载：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed;

14，vue的优化方案？

        答案：

                v-if和v-show分场景使用，频繁操作用v-show不要用v-if；

                computed和watch选择合适的使用，watch少用；

                v-for循环中不要忘记使用key方便 Vue.js 内部机制精准找到该条列表数据；

                不用的事件监听手动销毁；

                图片懒加载；

                路由懒加载，避免出现进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验；

                提取公共组件；

15，keep-alive的原理，使用有什么问题？如何解决？

        答案： 在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode实例进行渲染。

16，MVC和MVVM的区别？

        答案：

        MVC：是Model-View-Controller的首字母缩写，意思是模型-视图-控制器；其中模型是程序应用中的数据逻辑层；视图是程序应用的显示层；控制器是程序应用中负责用户交互的部分；

        MVVM：是Model-View-ViewModer的首字母缩写，其中Model是程序应用中的数据逻辑层；View是程序应用的显示层；ViewModel是程序应用中负责数据的双向绑定的部分；

        区别：实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再手动操作Dom元素来改变View的显示。 而是改变属性后该属性对应的View层显示会自动改变（对应Vue数据驱动的思想）

17，vue组件的通讯方式？

        答案：

        父组件传子组件：props；子组件传父组件：$emit触发事件；

        $parent 和 $children 获取单签组件的父组件和当前组件的子组件；

        $attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题；

        $refs 获取组件实例；

        vuex 状态管理。

18，data为什么是一个函数？

        答案：组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

19，如何理解vue的单项数据流？

        答案：数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。

20，vue如何检测数组变化？

        答案：watch；

21，vue3.x了解多少？

        答案：

        响应式原理的改变 Vue3.x 使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty；

        组件选项声明方式 Vue3.x 使用 Composition API setup是Vue3.x新增的一个选项，他是组件内使用Composition API 的入口；

        模板语法变化 slot 具名插槽语法，自定义指令v-model升级；

22，虚拟DOM是什么？有什么优缺点？

        答案：Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。

        优点：避免频繁操作dom造成的性能问题；不需要dom操作，减轻开发压力；跨平台；

        缺点：首次渲染大量的dom时，由于多了一层dom计算，所以会比innerHTML插入慢；

23，v-for为什么要家key？

        答案：如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为Vue中Vnode的唯一标识，通过这个key，我们的diff操作可以更准确、更快速。
        更准确：因为带key就不是就地复用了，在sameNode函数 a.key === b.key 对比中可以避免就地复用的情况。所以更加准确。
        更快速：利用key的唯一性生成map对象来获取对应节点，比遍历方式块。

24，vue-router路由钩子函数是什么？

        答案： 

        全局前置守卫：router.beforeEach((to,from,next) => { ... }) ;

        全局后置守卫：router.afterEach((to,from) => { ... })；

        路由独享守卫：直接定义在路由上

const router = new VueRouter({
    routes:[
        {
            path:'/foo',
            name:'Foo',
            component:Foo,
            beforeEnter:( to, from, next ) => {
                // ...
            }
        }
    ]
}) 

        组件内守卫：直接定义路由组件中；

    const Foo = {
      template: `...`,
      beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
      },
      beforeRouteUpdate(to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    }

25，完整的导航守卫的解析流程？

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

26， 对vuex的了解？

        答案：vuex是专门为vue提供的一个插件，是vue的全局状态管理系统。用于多个组件中数据共享，数据传递，数据保存；        

        主要包括以下几个模块：

        State：定义了应用状态的数据结构，可以在这里设置默认的初始状态；

        Getter：允许组件从store中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性；

        Mutation：是唯一可以改变store中状态的方法，并且必须是同步函数；

        Action：用于提交Mutation，而不是直接改变状态，可以包含异步函数；

        Module：模块化，允许将store分割成更多的store；

27，vuex页面刷新数据丢失怎么解决？

        答案：需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，可以自己设计存储方案，也可以使用第三方插件。
        推荐使用 vuex-persist (脯肉赛斯特)插件，它是为 Vuex 持久化储存而生的一个插件。不需要你手动存取 storage，而是直接将状态保存至 cookie 或者 localStorage中。

28，使用过vue SSR吗？

        答案：SSR 也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端完成，然后再把 html 直接返回给客户端。

        优点：SSR 有着更好的 SEO、并且首屏加载速度更快。

        缺点：开发条件会受限制，服务器端渲染只支持 beforeCreate 和 created 两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于 Node.js 的运行环境。
服务器会有更大的负载需求。

29，vue中使用了哪些设计模式？

        答案：

        工厂模式：传入数据即可创建实例；虚拟dom根据参数的不同返回基础标签的Vnode和组件Vnode。

        单例模式：整个程序有且仅有一个实例。

        发布-订阅模式：vue的事件机制。 

        观察者模式：响应式数据原理。

        装饰器模式：@修饰器的用法。

        策略模式：策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案 - 比如选项的合并策略。

30，Vue.mixin 的使用场景和原理

        答案：在日常开发中，我们经常会遇到在不同组件中经常用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过vue 的 mixin 功能抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有相同名选项时，这些选项将以恰当的方式进行“合并”。

31，过自定义指令吗？原理是什么？

        答案：指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素添加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。

自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind

1、bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

2、inserted：被绑定元素插入父节点时调用。

3、update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较前后的绑定值。

4、componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

5、unbind：只调用一次，指令与元素解绑时调用。

        原理：
1、在生成 ast 语法树时，遇到指令会给当前元素添加 directives 属性
2、通过 genDirectives 生成指令代码
3、在 patch 前将指令的钩子提取到 cbs 中，在 patch 过程中调用对应的钩子。
4、当执行指令对应钩子函数时，调用对应指令定义方法。

 32，vue的修饰符有哪些？

        答案：

事件修饰符：

        .stop：阻止事件传播；

        .prevent：阻止标签默认行为；

        .capture：使用事件捕获模式，即元素自身触发的事件先在此处处理，才有才交由内部元素处理；

        .self：只当在event.target是当前元素自身时触发处理函数；

        .once：事件只会触发一次；

        .passive：不阻止标签的默认行为；

v-model修饰符：

        .lazy：用于将触发当时由input方式改成change方式，失去焦点时才更新数据；

        .number：用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容；

        .trim：用于自动过滤用户输入内容首尾两端的空格；

 键盘事件修饰符：

        .left

        .right

        .up

        .down

        .enter

        .tab

系统修饰符

鼠标修饰符

33，说一下vue-router中常用的路由模式和实现原理？

        答案：

        hash模式：vue-router默认的是hash模式。是指url尾巴后的#号以及后面的字符.hash也被称为锚点,本身是用来做页面定位的.hash虽然出现在url中,但不会被包括在http请求中,对后端完全没有影响,因此改变hash值不会重新加载页面。

        hash是监听location对象hash值变化事件来实现。

        history模式：history模主要是通过history Api的pushState()和replaceState()两个方法来实现的.pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。history模式下有history.go()、history.forward()、history.back()；

        history是利用浏览历史记录栈的API实现

vue前端面试题持续更新哦！有需要的小伙伴可以收藏一下，如果小伙伴们在面试中碰到其他的vue的面试题，可以在评论区写下来，我会整理在文章中，谢谢大家！

        拜了个拜！迪迦。。。