zoukankan      html  css  js  c++  java
  • 几个关于Vue的面试题

    1、Vue的生命周期

    beforeCreate(创建前) 在数据观测和初始化事件还未开始

    created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来

    beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

    mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

    beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。

    updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

    beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

    destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

    什么是vue生命周期?

    Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

    vue生命周期的作用是什么?
    它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    vue生命周期总共有几个阶段?
    它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后

    第一次页面加载会触发哪几个钩子?
    第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

    DOM 渲染在 哪个周期中就已经完成?
    DOM 渲染在 mounted 中就已经完成了

    简单描述每个周期具体适合哪些场景?
    生命周期钩子的一些使用方法: beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

    2、 组件之间的传值

    父组件与子组件传值
    父组件通过标签上面定义传值
    子组件通过props方法接受数据

    子组件向父组件传递数据
    子组件通过$emit方法传递参数

    3、vue几种常用的指令

    v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定
     

    4、v-if 和 v-show 区别

    v-if按照条件是否渲染,v-show是display的block或none

     
     

    5、v-model是什么?怎么使用?vue中标签怎么绑定事件?

    v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:

    • v-bind绑定一个value属性
    • v-on指令给当前元素绑定input事件

    使用方法如下:

    v-model很好地体现了vue双向绑定的理念。
    单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。有单向绑定,就有双向绑定。
    如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。
    什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定。
    双向数据绑定=单向数据绑定+UI事件监听

    vue绑定事件
    1.通过指令 v-on:事件名=“函数名”绑定事件 eg:<button v-on:click="doThis"></button>
    2.通过语法 @事件名=“函数名”绑定事件 eg:<button @click.stop="doThis"></button>

    6、为什么要进行前后端分离?前后端分离的优势在哪里?劣势在哪里?

    优点:前端专门负责前端页面和特效的编写,后端专门负责后端业务逻辑的处理,前端追求的是页面美观、页面流畅、页面兼容等。后端追求的是三高(高并发、高可用、高性能)让他们各自负责各自的领域,让专业的人负责处理专业的事情,提高开发效率

    缺点:1 、当接口发生改变的时候,前后端都需要改变

               2、 当发生异常的时候,前后端需要联调--联调是非常浪费时间的




  • 相关阅读:
    我是服务的执政官-服务发现和注册工具consul简介
    跳闸了啊! 服务容灾:熔断器简介
    论获取缓存值的正确姿势
    容器化redis高可用方案
    ASP.NET SessionState 解惑
    Thymeleaf 模板的使用
    记录js的一个图片预览功能代码
    记录一个简单的可以拖动的弹出层
    oracle安装报错[INS-30131]执行安装程序验证所需的初始设置失败(无法访问临时位置)解决方法!
    nginx学习笔记2
  • 原文地址:https://www.cnblogs.com/awei313558147/p/12512680.html
Copyright © 2011-2022 走看看