023.整理几个面试题——关于Vue?

Posted Ruovan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了023.整理几个面试题——关于Vue?相关的知识,希望对你有一定的参考价值。

关于Vue?

网上收集整理

01. 【vue-loader】的作用是什么?

  • 作用:一个基于Webpack的loader,可以解析和转换.vue文件

    • 能提取templatescriptstyle标签中代码,并分别把他们交给对应的loader处理,然后转换为JS模块

02. 【Vue.use】是什么?

  • vue.use 是用来使用插件的,我们可以在插件中扩展全局组件、指令、原型方法等

  • Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象,用于传入插件的配置

    在使用Vue.use()的时候,就会调用插件内部的install方法

    • 插件传入的如果是一个对象,则执行其install方法
    • 如果是一个函数,则执行它自身,并bind thisnull,然后传入额外的参数
    MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
            // 逻辑...
        }
        // 2. 添加全局资源
        Vue.directive('my-directive', {
            bind (el, binding, vnode, oldVnode) {
                // 逻辑...
            }
            ...
        })
        // 3. 注入组件选项
        Vue.mixin({
            created: function () {
                // 逻辑...
            }
            ...
        })
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function (methodOptions) {
            // 逻辑...
        }
        // 5. 注册全局组件
        Vue.component('myButton',{
            // ...组件选项
        })
    }
    
    // --------------
    Vue.use(MyPlugin, {
        // 参数
    })
    
    

03. Vue的两个核心点

  • 数据驱动、组件系统
    • 数据驱动:ViewModel,保证数据和视图的一致性
    • 组件系统:应用类UI可以看作全部是由组件树构成的

04. vue 的生命周期

  • 概念:每个 Vue 实例在被创建时都要经过一系列的初始化过程

  • 作用:

    生命周期描述
    beforeCreate组件实例被创建之初,组件的属性生效之前
    created组件实例已经完全创建,属性也绑定,但真实 dom 还没有生成,$el 还不可用
    beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用
    mountedel 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
    beforeUpdate组件数据更新之前调用,发生在虚拟 DOM 打补丁之前
    update组件数据更新之后
    activitedkeep-alive 专属,组件被激活时调用
    deactivatedkeep-alive 专属,组件被销毁时调用
    beforeDestory组件销毁前调用
    destoryed组件销毁后调用

05. 第一次页面加载会触发:

  • beforeCreatecreatedbeforeMountmounted

06. created和mounted的区别

  • created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
  • mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对页面HTML节点进行DOM操作

07. 获取数据在哪个周期函数?

  • 可以在钩子函数 createdbeforeMountmounted 中进行调用
    • 因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值
  • 但一般都在 created 钩子函数中调用异步请求

08. 在什么阶段可以访问操作DOM?

  • 在钩子函数 mounted 被调用前,Vue 已经将编译好的模板挂载到页面上,所以在 mounted 中可以访问操作 DOM
  • 但是也可以通过$nextTick()的回调函数来操作访问DOM

09. 父子组件生命周期执行顺序?

  • 加载渲染过程:父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
  • 子组件更新过程:父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
  • 父组件更新过程:父 beforeUpdate -> 父 updated
  • 销毁过程:父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

10. 父组件监听子组件的生命周期?

  • 可以在子组件的对应生命周期内,通过$emit向父组件派发事件,然后父组件监听这个事件

    // Parent.vue
    <Child @mounted="doSomething"/>
        
    // Child.vue
    mounted() {
      this.$emit("mounted");
    }
    
  • 可以直接在父组件引用子组件时通过 @hook 来监听

    • 子组件不需要做任何处理
    // Parent.vue
    <Child @hook:mounted="doSomething"/>
    

以上是关于023.整理几个面试题——关于Vue?的主要内容,如果未能解决你的问题,请参考以下文章

023.整理几个面试题——关于Vue?

021.整理几个面试题——关于Vue框架

021.整理几个面试题——关于Vue框架

021.整理几个面试题——关于Vue框架

022.整理几个面试题——关于Vue原理(简)

022.整理几个面试题——关于Vue原理(简)