• 前端面试题(四)


    1.简单描述每个周期具体适合哪些场景

    beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
    create:data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作
    beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
    mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
    beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
    updated:页面显示的数据和data中的数据已经保持同步了,都是最新的
    beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
    destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

    2.谈谈你对MVVM开发模式的理解

    MVVM它就是一种前端开发的架构模式,作用就是为了让前端业务逻辑和HTML代码更加分离。它的核心思想就是把每个页面分成了M(Model数据模型)、V(View视图)、VM(ViewModel视图模型)。其中VM是核心,是M和V之间的调度者。M和V不直接关联,通过中间的VM。VM还提供了数据双向绑定功能,也就说V发生改变M也跟这边,M发生改变V也会跟这变。

    3.0.01+0.02为什么不等于0.03

    1、在JS内部所有的计算都是以二进制方式计算的。 所以运算 0.1+ 0.2 时要先把 0.1和 0.2 从十进制转成二进制。

    2、这里要注意 0.1 和 0.2 转成的二进制是无穷的。另外在现代浏览器中是用浮点数形式的二进制来存储二进制,所以还要把上面所转化的二进制转成浮点数形式的二进制。

    3、0.1+0.2 不等于 0.3 ,因为在 0.1+0.2 的计算过程中发生了两次精度丢失。第一次是在 0.1 和 0.2 转成双精度二进制浮点数时,由于二进制浮点数的小数位只能存储52位,导致小数点后第53位的数要进行为1则进1为0则舍去的操作,从而造成一次精度丢失。第二次在 0.1 和 0.2 转成二进制浮点数后,二进制浮点数相加的过程中,小数位相加导致小数位多出了一位,又要让第53位的数进行为1则进1为0则舍去的操作,又造成一次精度丢失。最终导致 0.1+0.2 不等于0.3 

    4.href和src的区别

    1. 当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS,而不是使用 @import 方式)
    2. 当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)

    5.v-if和v-for同时使用在同一个标签上的表现?

    当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用

    6.http和https的区别

    http是超文本传输协议,信息是明文传输, https则具安全性的ssl/tls加密传输协议。

    1.Http和https使用完全不同的连接方法和不同的端口。前者是80,后者是443。Http连接是非常简单和无状态的;HttpS协议是由SSL/TLS+HTTP协议构建的网络协议,可用于加密传输和身份认证。它比HTTP协议更安全。

    2.超文本传输协议,缩写为HTTP,是分布式、协作式和超媒体信息系统的应用层协议,是万维网数据通信的基础,也是互联网上使用最广泛的网络传输协议。HTTP最初被设计为提供一种发布和接收HTML页面的方式。

    3.HTTPS协议之所以安全,是因为HTTPS协议对传输的数据进行加密,而加密过程是由非对称加密实现的。然而,HTTPS在内容传输的加密过程中使用对称加密,而非对称加密只在证书验证阶段发挥作用。

    7.谈谈指令v-el的用法

    可以使用v-el指令,去给这个元素注册一个缩影,方便通过所属实例的$el访问这个元素

    注:HTML不区分大小写,所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。

    8.vue事务的委派

    事件委托:把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件

    9.undefined和null的区别

    1、意义不同:undefined表示变量已经声明,但是没有值;null表示空

    2、数据类型不同:typeof undefined = undefined,但是typeof null=object

    3、转换结果不同:undefined转数值为NaN,null转数值为0

    4、产生的场景:变量被声明了但没有赋值,就等于undefined;函数没有返回值默认返回undefined;对象没有赋值的属性,该属性的值为undefined;null作为函数的参数,表示该函数的参数不是对象;null作为对象原型链的终点

    10.vue项目使用组件的过程

    1.定义组件(创建组件)

    使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;
    区别如下:

    el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
    data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。
    2.注册组件

    a.局部注册:靠new Vue的时候传入components选项
    b.全局注册:靠Vue.component(‘组件名’,组件)

    3.使用组件(写组件标签)

    11.vue项目使用插件的过程

    1)npm install 相关插件

    2)在main,js用import 引入

    12.的作用是什么

    缓存组件的状态,并在再次激活组件时使用缓存。如某个组件因触发事件改变某些数据,当组件切换时,会默认回到未操作的状态。使用包裹组件就可以保持组件操作后的状态。

    13.Vue2和Vue3有什么区别

    区别:1、vue2的双向数据绑定利用了ES5的API Object.definePropert(),而vue3中使用了es6的API Proxy;2、Vue3支持碎片,而vue2不支持;3、 Vue2使用选项类型API,而Vue3使用合成型API;4、建立数据,vue2把数据放入data属性中,而Vue3使用setup()方法;5、vue3有Teleport组件,vue2没有。

    14.vue中css样式只在当前页面生效

    在设置style时,会影响到其他组件样式,为避免样式共享,可在样式style标签里添加 scoped 即可

    15.Vue的父组件和子组件生命周期钩子执行顺序是什么

    1). 首先是数据加载渲染到页面,包括初始化阶段和挂载阶段
    Vue实例化(new Vue())-> 父组件beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 真实DOM挂载完毕 -> 子组件 mounted -> 父组件 mounted

    2). 其次当data里的数据发生了变化,进入更新阶段
    父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated -> 获取更新后的真实DOM

    3). 最后当$destroy()被调用进入销毁阶段
    父组件 beforeDestroy -> 子组件 beforeDestroy -> 实例销毁后 -> 子组件 destroyed -> 父组件 destroyed
    16.什么是跨域请求,怎么解决

    跨域指的是从一个域名去请求另外一个域名的资源。即跨域名请求!跨域时,浏览器不能执行其他域名网站的脚本,是由浏览器的同源策略造成的,是浏览器施加的安全限制。

    办法:

    (1)在Vue中最推荐的是CORS,全称为 Cross Origin Resource Sharing(跨域资源共享)。

    这种方案对于前端来说没有什么工作量,和平时发请求写法上没有任何区别,工作量基本都在后端这里,使用CORS前端不需要配置proxytable。

    每一次请求,浏览器必须先以 OPTIONS 请求方式发送一个预请求,从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。

    (2)vue cli30修改配置信息需要新建vue.config.js文件,在module.exports方法的devServer对象中proxy 选项来添加代理配置,当前端没有匹配到当前路由时就会被代理到服务器接口地址。

    注意:以上面试题皆是面试时遇到的,答案是网上查到,可能不完整,可自行搜索

  • 相关阅读:
    动态数组【python】
    C++的智能指针 && RAII
    面试算法43:在完全二叉树中添加节点
    python tk展示图片
    Archlinux Gnome上解决N卡驱动安装和IBUS输入法两个小问题记录
    【mac端mysql】用户权限问题
    y93.第六章 微服务、服务网格及Envoy实战 -- Envoy配置(四)
    Android修行手册 - TabLayout全解析(下)-监听和示例
    Android解决Toast的重复点击问题也可以叫消息队列
    Python UI自动化 —— pytest常用运行参数解析、pytest执行顺序解析
  • 原文地址:https://blog.csdn.net/xu_xu_0924/article/details/128111908