百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

vue面试2

bigegpt 2024-08-08 12:19 2 浏览

1.vue的生命周期

vue的生命周期主要分为几个简单部分:数据初始化,dom挂载,数据更新,组件写卸载。在一个,就是开启组件缓存的时候,会有组件启用和组件停用阶段。

数据初始化阶段

beforeCreate:再实例初始化之后,数据观测(data observer)和event/watcher事件配置之前调用

created:实力已经创建完成之后调用,在这一步,实例已完成以下配置:数据观测,属性和方法的运算,event/watcher时间回调。然而,挂载还没开始,$el属性目前不可见。

dom挂载阶段

beforeMount:在挂载开始之前调用:相关的render函数首次被调用

mounted:el被新创建的vm.el替换并挂载到实例上去之后调用该钩子函数。如果root挂在了以文档内元素,当mounted被调用时vm.el替换并挂载到实例上去之后调用该钩子函数。如果root挂在了以文档内元素,当mounted被调用时vm.el也在文档内。

mounted不会承诺所有子组件也都一起被挂载。如果希望等到整个视图都渲染完毕,可以用vm.$nextTick替换掉mounted

数据更新阶段

beforeUpdate:数据更新时调用,发生虚拟dom重渲染和打补丁之前。

updated:由于数据更新导致虚拟dom重渲染和打补丁,在这之后调用该钩子。

当这个钩子被调用时,组件dom已经更新,所以现在可以执行依赖于dom的操作,然而在大多数情况下,应该在此期间更新状态。如果要相应状态改变,通常最好使用计算属性或watcher取而代之。

updated不会承诺所有子组件也都一起被重绘,如果希望等到整个视图重回完毕,可以用vm.$nextTick替换update;

缓存启用时会用两个钩子函数:

activated:keep-alive组件激活时调用

deactivated:keep-alive组件停用时调用

组件卸载阶段

beforeDestroy:实例销毁之前调用。在这一步,实例完全可用。

destroyed:vue实例销毁时调用。调用后,vue实例指示的所有东西都会解除绑定,所有事件监听器会被移出,所有的子实例也会被销毁。

2.vue实现数据双向绑定的原理

vue实现数据双向绑定主要是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。

具体就是通过Object.defineProperty(),中的setter,getter来监听属性变动实现Observer进行数据的监听然后就是通知订阅者,订阅者其实就是一个简单的数组,这个数组中的内容就是我们使用的一个数据集合,使用了的数据可以通过getter得到,其实就是在调用的时候给数组添加一个订阅者,这样就实现了一个watcher(需要监听数据的集合),然后实现一个compile,其作用就是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应节点绑定更新数据,添加监听数据的订阅者,一旦数据有变动,收到通知,更新数据,其实vue的数据双向绑定就是MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令,最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

3.vue路由实现原理

路由的实现有两种:hash和history interface来实现前端路由,

hash在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;特点:

(1)hash虽然在URL中,但不被包括在HTTP请求中

(2)用来指导浏览器动作,对服务端安全无用,hash不会重加载页面

history采用h5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更,不过history有个问题是:如果用户直接在地址栏中输入并回车,浏览器重启或重新加载时,history模式会将url修改的和正常请求后端一样,此情况下,重新向后端发送请求,后端如果没有配置对应路由处理,则返回404,解决方法是后端配置一下。

4.vue路由传参

<router-link :to="{path:'/index',params:{id:num}}">
<router-link :to="{ path:'/index' , query:{id:num}}"

然后通过$route.params来读取数据,但路由传递参数值是对象的话就不行了会报错,传递前用base64转译一下就可以。

5.如何让css只在当前组件起作用

在style标签中写入scoped即可

如:<style scoped></style>

6.watch,computed,methods的区别

watch是做单一的数据监听,方法名要与监听数据名相同,不需要返回值,可以得到修改前与修改后的值

computed与methods基本相同,都是方法,都是在数据改变的时候,如果方法内部有该数据依赖,都是自动执行。

computed 是计算属性,methods是放操作方法

computed调用不需要加(),methods要加()

computed会将计算值进行缓存,如果内部依赖值没有发生变化,不管调用多少次,都只执行一次,methods则是调用多少次,则执行多少次。

7.组件划分

按照页面的框架来划分,将页面中的每一块都可以划分为一个组件,然后从中提取公共组件,一般情况下,都是分为页面组件和公共组件。

8.vue路由的钩子函数

官方称为导航首位可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to,from,next:

to:route即将进入的目标路由对象,

from:route当前导航正要离开的路由

next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

9.route和route和router的区别

$route是“路由信息对象”,包含了path,params,query,hash,fullPath,matched,name这些路由信息参数

而$router是“路由实例”对象包含了路由的一些跳转方法,钩子函数等

10.key的使用

一般情况下,vue在渲染完成后,如果数据发生变化,只会重新渲染数据,不会重新渲染整个元素,但是有时候我们需要元素被重新渲染,此时就需要使用key关键字,使用v-bind绑定key关键字,可以实现在数据发生变化时候重新渲染整个元素。注:同一父级元素下所有子元素如果都要在数据变化后重新渲染元素,则需要被绑定的key

相关推荐

【Docker 新手入门指南】第十章:Dockerfile

Dockerfile是Docker镜像构建的核心配置文件,通过预定义的指令集实现镜像的自动化构建。以下从核心概念、指令详解、最佳实践三方面展开说明,帮助你系统掌握Dockerfile的使用逻...

Windows下最简单的ESP8266_ROTS_ESP-IDF环境搭建与腾讯云SDK编译

前言其实也没啥可说的,只是我感觉ESP-IDF对新手来说很不友好,很容易踩坑,尤其是对业余DIY爱好者搭建环境非常困难,即使有官方文档,或者网上的其他文档,但是还是很容易踩坑,多研究,记住两点就行了,...

python虚拟环境迁移(python虚拟环境conda)

主机A的虚拟环境向主机B迁移。前提条件:主机A和主机B已经安装了virtualenv1.主机A操作如下虚拟环境目录:venv进入虚拟环境:sourcevenv/bin/active(1)记录虚拟环...

Python爬虫进阶教程(二):线程、协程

简介线程线程也叫轻量级进程,它是一个基本的CPU执行单元,也是程序执行过程中的最小单元,由线程ID、程序计数器、寄存器集合和堆栈共同组成。线程的引入减小了程序并发执行时的开销,提高了操作系统的并发性能...

基于网络安全的Docker逃逸(docker)

如何判断当前机器是否为Docker容器环境Metasploit中的checkcontainer模块、(判断是否为虚拟机,checkvm模块)搭配学习教程1.检查根目录下是否存在.dockerenv文...

Python编程语言被纳入浙江高考,小学生都开始学了

今年9月份开始的新学期,浙江省三到九年级信息技术课将同步替换新教材。其中,新初二将新增Python编程课程内容。新高一信息技术编程语言由VB替换为Python,大数据、人工智能、程序设计与算法按照教材...

CentOS 7下安装Python 3.10的完整过程

1.安装相应的编译工具yum-ygroupinstall"Developmenttools"yum-yinstallzlib-develbzip2-develope...

如何在Ubuntu 20.04上部署Odoo 14

Odoo是世界上最受欢迎的多合一商务软件。它提供了一系列业务应用程序,包括CRM,网站,电子商务,计费,会计,制造,仓库,项目管理,库存等等,所有这些都无缝集成在一起。Odoo可以通过几种不同的方式进...

Ubuntu 系统安装 PyTorch 全流程指南

当前环境:Ubuntu22.04,显卡为GeForceRTX3080Ti1、下载显卡驱动驱动网站:https://www.nvidia.com/en-us/drivers/根据自己的显卡型号和...

spark+python环境搭建(python 环境搭建)

最近项目需要用到spark大数据相关技术,周末有空spark环境搭起来...目标spark,python运行环境部署在linux服务器个人通过vscode开发通过远程python解释器执行代码准备...

centos7.9安装最新python-3.11.1(centos安装python环境)

centos7.9安装最新python-3.11.1centos7.9默认安装的是python-2.7.5版本,安全扫描时会有很多漏洞,比如:Python命令注入漏洞(CVE-2015-2010...

Linux系统下,五大步骤安装Python

一、下载Python包网上教程大多是通过官方地址进行下载Python的,但由于国内网络环境问题,会导致下载很慢,所以这里建议通过国内镜像进行下载例如:淘宝镜像http://npm.taobao.or...

centos7上安装python3(centos7安装python3.7.2一键脚本)

centos7上默认安装的是python2,要使用python3则需要自行下载源码编译安装。1.安装依赖yum-ygroupinstall"Developmenttools"...

利用本地数据通过微调方式训练 本地DeepSeek-R1 蒸馏模型

网络上相应的教程基本都基于LLaMA-Factory进行,本文章主要顺着相应的教程一步步实现大模型的微调和训练。训练环境:可自行定义,mac、linux或者window之类的均可以,本文以ma...

【法器篇】天啦噜,库崩了没备份(天啦噜是什么意思?)

背景数据库没有做备份,一天突然由于断电或其他原因导致无法启动了,且设置了innodb_force_recovery=6都无法启动,里面的数据怎么才能恢复出来?本例采用解析建表语句+表空间传输的方式进行...