• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
时光里的赶路人
博客园    首页    新随笔    联系   管理    订阅  订阅
前端面试真题-vue(一)

1.说说对vue的理解

 (1) vue.js是一种用于创建用户界面的渐进式的javascript框架

 (2)也是用于创建单页面应用的web应用框架。

 (3)vue的核心库只关心视图层,使得数据和视图的双向绑定变得快捷

 (4)由于vue的核心库只关心视图层,所以不仅可以与其他库和现有项目整合,也可以添加更多的vue插件,实现更复杂的功能  

2.vue的特点是:

  (1)声明式渲染:vue允许我们使用模板语法来声明式地将数据绑定到DOM,而不是直接操作DOM

  (2)组件化:vue鼓励适用组件化的方式构建应用,使得代码易于复用和拓展

  (3)双向数据绑定:vue使用v-model实现双向数据绑定,当数据变化时,视图也会更新,相反,当视图更新时,数据也会同步变化

  (4)虚拟dom:vue使用虚拟dom技术,可以避免不必要的dom操作,提高性能

  (5)易于集成:Vue易于与其他框架和库整合,可以在现有项目中逐步引入,同时它提供了丰富的插件和生态系统,让开发者可以根据需要使用

  (6)易于学习:Vue的学习曲线较为平缓,文档清晰易懂,对于初学者和有经验的开发者来说都非常友好

3.v-if和v-show的区别

(1)v-if和v-show的共同点:都能控制元素是否在页面上显示

(2)v-if和v-show的不同点:

         控制手段不同:v-show隐藏是为该元素添加css--display:none,dom元素依然存在;

                                  v-if显示隐藏是将dom整个添加或删除;

         编译过程不同:v-show只是简单的基于css切换;

                                   v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

         编译条件不同:v-show由false变为true的时候并不会触发组件的生命周期;

                                  v-if是真正的条件渲染,它会确保切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,只有渲染条件为假时,并不做操作,直到为真时才渲染

(3)v-show和v-if的使用场景:

         需要频繁切换,使用v-show更好;

         在运行时条件很少改变,使用v-if更好;

4.vue的生命周期

   vue的生命周期指的是vue实例从创建到销毁的全过程,vue所有的功能都是围绕其生命周期进行的,在生命周期的不同阶段调用不同的钩子函数,可以实现组件数据管理和dom渲染两大重要功能。

   vue的生命周期总共可以分为8个阶段:创建前后,载入前后,更新前后,销毁前后,以及一些特殊场景的生命周期

   vue的八个生命周期钩子函数:

(1)beforeCreate:组件实例被创建之初,实例刚在创建过程中,(data)属性(methods)方法都未初始化,不能获取或操作dom       

(2)created:实例已经创建完成,属性已经绑定到实例上,但DOM还未生成,$el属性还不存在,可调用methods中的方法,访问和修改data数据触发响应式dom渲染,可以通过computed和watch完成数据计算

(3)beforeMounte:组件挂载之前,未执行渲染、更新,dom未创建,在挂载(即将插入到DOM中)开始之前被调用

(4)mounted:初始化结束,dom已创建,可用于获取访问数据和dom元素,实例被挂载后调用,这时候el被新创建的vm.$el替换,并挂载到实体的DOM上,但不一定包含所有的子组件

(5)beforeUpdate:组件数据发生变化,更新前,可用于获取更新前各种状态

(6)updated:数据数据更新之后,更新后,所有状态已是最新

(7)beforedestroy:组件实例销毁之前,销毁前,可用于一些定时器或订阅的取消

(8)destroyed:组件实例销毁之后,组件已销毁,作用同上

 三个特殊场景的生命周期钩子:

(1)activated
          keep-alive 缓存的组件激活时
(2)deactivated
         keep-alive 缓存的组件停用时调用
(3)errorCaptured
         捕获一个来自子孙组件的错误时被调用

数据请求在created和mouted的区别:

区别:

(1)created是在组件实例一旦创建完成的时候立刻调用,这时候页面dom节点并未生成

(2)mounted是在页面dom节点渲染完毕之后就立刻执行的

(3)触发时机上created是比mounted要更早的

共同点:

(1)都能拿到实例对象的属性和方法,讨论这个问题本质就是触发的时机,放在mounted请求有可能导致页面闪动(页面dom结构已经生成),但如果在页面加载前完成则不会出现此情况,建议:放在create生命周期当中

 

 

                            

 

posted on 2023-06-29 15:32  吹风哪页就哪页  阅读(43)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3