首页 > 其他分享 >前端面试真题-vue(一)

前端面试真题-vue(一)

时间:2023-06-29 15:47:25浏览次数:27  
标签:生命周期 实例 dom 真题 show 面试 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生命周期当中

 

 

                            

 

标签:生命周期,实例,dom,真题,show,面试,vue,组件
From: https://www.cnblogs.com/liqinzhen/p/17514352.html

相关文章

  • 面试总结(一)
    为什么MySQL索引更适合B+树而不是二叉树、B树一数据库为什么使用B+树 与二叉树相比二叉树相比于顺序查找的确减少了查找次数,但是在最坏情况下,二叉树有可能退化为顺序查找。而且就二叉树本身来说,当数据库的数据量特别大时,其层数也将特别大。二叉树的高度一般是log_2^n,B树的高度......
  • vue高德地图实现播放暂停功能,支持快进快退,播放倍数设置
    高德地图实现具体功能如图具体实现思路如下:<divclass="playAnimation"><tablewidth="100%"style=""border="0"><trclass="info_play"><td>{{currentMi......
  • 每日一练 | 华为认证真题练习Day69
    1、STP协议在以下哪个状态下进行端口角色的选举?A.BlockingB.DisabledC.LearningD.Listening2、RSTPBPDU报文中的Flag字段的总长度为多少bit?A.6B.4C.8D.23、以下哪项不是RSTP可以提高收敛速度的原因?A.边缘端口的引入B.取消了ForwardDelayC.根端口的快速切换D.P/A机制4......
  • 光脚丫思考Vue3与实战:第05章 计算属性和侦听器 第03节 计算属性的其他玩法
    下面是本文的屏幕录像的在线视频:温馨提示:1、视频下载:线上视频被压缩处理,可以下载高清版本:链接:https://pan.baidu.com/s/1h600_BRR9O2Lr87zVQNgEw 提取码:dgpu 2、示例代码:https://pan.baidu.com/s/1rCqbY_j35FcRWRZbuOfHqg 提取码:79kh 下图是文章大纲:一、概述本篇文章介绍了V......
  • Vue.js项目在IE11白屏报错
    一、概述项目使用vue/cli4脚手架搭建的前端项目,vue版本为2.6.10。但开发环境的IE11打开显示白屏,F12打开显示:查明报错原因是:I.E.不支持ES6语法。二、解决方案(一)解决方案11、安装如下的依赖包:npminstall--save-devbabel-polyfill或npminstall--save@babel-polyfill2、mai......
  • 蔚来真题和答案,主打一个简单?
    问题来源如下:问题链接:https://www.nowcoder.com/discuss/493178141461041152答案解析1.解释脏读/不可重复读/幻读脏读:指一个事务读取到了另一个事务为提交保存的数据,之后此事务进行了回滚操作,从而导致第一个事务读取了一个不存在的脏数据。不可重复读:在同一个事务中,同一......
  • 教你如何用Vue3搭配Spring Framework
    摘要:在本文中,我们将介绍如何使用Vue3和SpringFramework进行开发,并创建一个简单的TodoList应用程序。本文分享自华为云社区《Vue3搭配SpringFramework开发【Vue3应用程序实战】》,作者:黎燃。一、介绍Vue3和SpringFramework都是现代Web应用程序开发中最流行的框架之一。Vue3是一个......
  • 使用vue cli 5.0 在vscode中运行vue命令报错
       1、运行 vue--version  报错  2、在cmd命令行执行 vue--version 正常  3、在终端中输入  get-ExecutionPolicy,查看当前权限  4、执行 set-executionpolicyremotesigned  命令设置为可用模式,但是报错  5、使用管理员打开powe......
  • 图书商城项目练习①管理后台Vue2/ElementUI
    本系列文章是为学习Vue的项目练习笔记,尽量详细记录一下一个完整项目的开发过程。面向初学者,本人也是初学者,搬砖技术还不成熟。项目在技术上前端为主,包含一些后端代码,从基础的数据库(Sqlite)、到后端服务Node.js(Express),再到Web端的Vue,包含服务端、管理后台、商城网站、小程序/App,分......
  • vue列表页返回数组错误Invalid prop: type check failed for prop "data". Expected A
    一个vue列表页接收后端数组时是这样写的:this.list=response.data返回如下错误:Invalidprop:typecheckfailedforprop"data".ExpectedArray,gotObject意思是希望返回一个数组但实际得到一个对象Object,网上大多是初始化userList=[]或userList=null解决的,但......