码迷,mamicode.com
首页 > 其他好文 > 详细

几个关于Vue的面试题

时间:2020-03-17 19:26:52      阅读:44      评论:0      收藏:0      [点我收藏+]

标签:导致   加载   完全   异步   before   传递数据   size   观测   数据绑定   

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、 当发生异常的时候,前后端需要联调--联调是非常浪费时间的




几个关于Vue的面试题

标签:导致   加载   完全   异步   before   传递数据   size   观测   数据绑定   

原文地址:https://www.cnblogs.com/awei313558147/p/12512680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!