一、Vue的生命周期

分为四个阶段:

1. 实例创建
2. DOM渲染
3. 数据更新
4. 销毁实例

共有八个生命周期函数:

1.beforeCreate —创建前
触发行为:vue挂载的$el和data都为undefined,还未初始化
在此阶段可以做的事情:加loading事件
2.created —创建后
触发行为:vue的数据对象data已经有数据了,$el还没有初始化
在此阶段可以做的事情:解决loading,请求ajax数据为mounted做准备
3.beforeMount --渲染前
触发的行为:vue实例和$el都初始化了,但还是虚拟的DOM节点
此阶段可以做的事情:也可以发请求拿数据
4.mounted —渲染后
触发的行为:vue实例挂载完成,页面以已经成功渲染
在此阶段可以做的事情:配合路由钩子函数使用
5.beforeUpdate —更新前
触发的行为:data更新前触发
6.updated —更新后
触发的行为:data更新前触发
在此阶段可以做的事情:数据更新时,做一些处理(此处也可以用watch进行观测)
7.beforeDestroy —销毁前
触发的行为:组件销毁前触发
在此阶段可以做的事情:可向用户询问是否销毁
8.destroyed —销毁后
触发的行为:组件销毁时触发,vue实例解除了事件监听和dom的绑定,但是dom阶段还存在
在此阶段可以做的事情:组件销毁进行提示

二、v-if和v-show的区别

1.都能动态控制元素的显示与隐藏
2.v-if是动态添加或删除整个DOM元素,v-if是为该元素添加display:none和block,DOM元素依旧还在
3.v-if切换有一个局部编译/卸载的过程,切换过程中合适的销毁和重建内部事件监听和子组件,v-show只是简单的进行css的切换
4.v-if是惰性的,如果条件为假,则什么都不做,只有条件第一次为真的时候才开始局部编译,v-show是任何条件下都被编译,然后被缓存,而且DOM元素保留
5.v-if有更高的切换消耗,v-show有更高的初始渲染消耗

三、vue2.0和vue3.0的区别

1.数据双向绑定原理发生了改变。
vue2.0使用的是Object.defineProperty数据劫持结合订阅者发布者实现的,vue3.0使用的是ES6的proxy实现的
2.vue2.0仅支持一个根节点,vue3.0支持多个根节点
3.声明周期函数不同,且vue3.0使用钩子函数需要先引入
vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
4.data和method和声明位置不一样。
vue2.0data和method是单独模块
vue3.0是都声明在setup函数中

四、输入一个url发生了什么

1.DNS域名解析(通过域名解析出IP)
2.建立TCP连接(根据域名和默认端口80和服务器建立连接)
3.浏览器读取文件(URL中域名后面部分对应文件)的HTTP请求,该请求消息作为TCP三次握手的第三个报文数据发给服务器(SYN敲门 SYN+ACK回应 ACK同意进门)
4.浏览器做出响应,并把对应的html文本发送给浏览器
5.释放TCP连接
6.浏览器解析html
7.浏览器解析html生成htmlDOM树
8.解析css生成cssDOM树
9.合并htmlDOM树和cssDOM树生成渲染树
10 布局和绘制,重绘和回流

五、隐藏一个元素的几种方法

  1. display:none
  2. opacty:0
  3. z-index进行覆盖
  4. visible:hidden

六、数组循环的几种方法

1.forEach
2.for in
3.for of
4.for循环
5.map

Logo

前往低代码交流专区

更多推荐