vue面试总结-2022
1.vue生命周期及各周期得特点
beforCreate
特点:
初始化实例,不能使用data和methods、ref
示例
beforeCreate: function () {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "data中的msg : " + this.msg); //undefined
console.log("%c%s", "color:red", "methods中的handleOpen方法 : " + this.handleOpen); //undefined
},
结果
created
特点:
data和methods都已经被初始化好了,可以调用,但ref还是不行
示例
created: function () {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 [object Object]
console.dir(this.$data)
console.log("%c%s", "color:red", "data中的msg : " + this.msg); //测试
console.log("%c%s", "color:red", "methods中的handleOpen方法 : " + this.handleOpen); //function () { [native code] }
},
结果
beforeMount
特点:
开始挂载之前调用,相关的render函数首次被调用 此时的DOM是数据挂载前的DOM,数据还未挂载(将虚拟Dom转变成真实Dom的过程,所以在这之前,我们的el
当然还是拿不到的)虽然 $ref已被初始化,但还是拿不到值
示例
beforeMount: function () {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "refs : " + this.$refs); //已被初始化
console.dir(this.$refs)
var _ref = JSON.parse(JSON.stringify(this.$refs))
console.log("%c%s", "color:red", "_ref : " + _ref); //已被初始化
console.dir(_ref)
console.log("%c%s", "color:red", "refs.myRef : " + this.$refs.myRef); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "data中的msg : " + this.msg); //已被初始化
console.log("%c%s", "color:red", "methods中的handleOpen方法 : " + this.handleOpen);//已被初始化
},
结果
跑题·······················
大家看小颖在打印 $ref 时 又重新定义了一个_ref ,并且这个变量是深拷贝了 $ref 的,这是为 了方便大家能够看到在该钩子函数中 $ref 的值,如果大家不明白为什么,可以看下下面的代码
var a = 1;
var b = a;
a = 3
console.log(a)
console.log(b)
var a2 = {}
var b2 = a2
a2.c = '22'
console.log(a2)
console.log(b2)
看这个结果大家有没有发现变量 b
不会随着变量 a
的改变而改变,但是变量 b2
会随着变量 a2
的改变而改变,这是为什么呢?
因为 a
、 b
都是基本类型,而 a2
、b2
都是引用类型,基本类型存储的是值,引用类型存储的是一个指向对象真实内存地址的指针。在 js 中,对象包括Array Object Function RegExp Math等。
大家可以参考下:js对象赋值只保留存在的属性_夯实JS主要知识点
来来来,我们接着看vue的生命周期,不要被小颖带偏了哈哈哈
mounted
特点:
实例挂载完成,vue实例已经初始化完成,初始化的el被vm.$el替换(虚拟Dom已经挂载在了真实的元素上,所以从此开始我们就可以拿到el
)
示例
mounted: function () {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.dir(this.$el)
console.log("%c%s", "color:red", "refs : " + this.$refs); //已被初始化
console.log("%c%s", "color:red", "refs.myRef : " + this.$refs.myRef);//已被初始化
console.dir(this.$refs)
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "data中的msg : " + this.msg); //已被初始化
console.log("%c%s", "color:red", "methods中的handleOpen方法 : " + this.handleOpen);//已被初始化
},
结果
beforeUpdate
特点:
数据更新时调用,发生在虚拟DOM打补丁之前,这里适合更新之前访问现有的DOM,比如手动移除已添加的时间监听器,该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行 。
示例
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
// 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
console.log(document.getElementById("myUl").children[2].innerHTML);
console.log(document.getElementById("myUl").children[3].innerHTML);
},
结果
updated
特点:
在数据驱动下导致的虚拟DOM重新渲染和打补丁之后调用,此时,组件DOM已经更新。只会在数据变更之后触发这个钩子函数。
示例
updated: function () {
console.group('updated 更新完成状态===============》');
console.log(document.getElementById("myUl").children[2].innerHTML);
console.log(document.getElementById("myUl").children[3].innerHTML);
},
结果
beforeDestroy
特点:
实例销毁之前调用,此时实例还可用
示例:
(清除定时器 / 解绑js定义的事件)
destroyed
特点:
实例销毁后调用,实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁,
示例:
(清除定时器 / 解绑js定义的事件)
大家也可以看看:
Vue都使用那么久了,还不了解它的生命周期吗、了解Vue的生命周期、vue组件的生命周期讲解
后面的等晚上再写·················
vue面试总结-2022的更多相关文章
- 太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?
前言 一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪. 最近两年,太原作为一个准二线城市,各大互联网公司的技术栈也在升级换代,假如你在太 ...
- vue 面试时需要准备的知识点
前端火热的框架层出不穷,作为码农的我们,依旧需要去学习,去探索新的问题,学习新技术,其实就是为了写一手好的,自认为是高质量的代码.今天主要分享一下前端最火的框架vue,也是我比较喜欢的框架. vue上 ...
- vue面试常遇到的面试题
最近面试了好几家公司,总结一下经常被问到的面试题. 首先呢,一开始先来一个自我介绍,没啥好说的. 接下来就是考验你vue技术的问题了 一些常见的面试题 vue的生命周期 一共有八个阶段,分别为创建前后 ...
- Vue面试中,经常会被问到的面试题/Vue知识点整理
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- Vue面试中经常会被问到的面试题
一.对于MVVM的理解 MVVM是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. View代表UI组件,它负责将数据模 ...
- vue面试
1.一个比较全的vue面试题 http://www.bslxx.com/p/3187.html
- vue面试常被问到的问题整理
1.Vue的双向数据绑定原理是什么? 答 : vue是采用数据劫持,并且使用发布-订阅者的开发模式.原理是观察者observer通过Object.defineProperty()来劫持到各个属性的ge ...
- vue面试相关
(1)什么是mvvm? MVVM是Model-View-ViewModel的缩写.mvvm是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View ...
- vue面试的一些总结
vue中组件的data为什么是一个函数? 组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念 ...
随机推荐
- java中final变量的用法
4.4 final变量 final变量的数值不能在初始化之后进行改变(你希望a=3,有很多用到a的场合, 你当然不能在程序中就用3来代替a). 比如: final int h = 0; 想像有一 ...
- 手动封装一个node命令集工具
了解NPM安装模块时与项目配置文件中的bin配置发生了什么 了解nodejs在控制台中的运行环境及上下文 基于自定义命令集工具集成Yeoman 一.NPM模块安装内幕与nodejs控制台运行环境 1. ...
- BootstrapBlazor实战 Chart 图表使用(1)
BootstrapBlazor组件 Chart 图表介绍 通过给定数据,绘画各种图表的组件 本文主要介绍三种图表使用:折线图,柱状图,饼图 1.新建工程 新建工程b06chart,使用 nuget.o ...
- 微服务架构学习与思考(09):分布式链路追踪系统-dapper论文学习
一.技术产生的背景 1.1 背景 先来了解一下分布式链路追踪技术产生的背景. 在现在这个发达的互联网世界,互联网的规模越来越大,比如 google 的搜索,Netflix 的视频流直播,淘宝的购物等. ...
- python---从尾到头打印链表
class ListNode: def __init__(self, x): self.val = x self.next = None class Solution: # 返回从尾部到头部的列表值序 ...
- MongoDB 提供的工具
MongoDB 提供的工具 官网 https://www.mongodb.com/ 工具 MongoDB 提供了一些工具,: MongoDB Compass: MongoDB数据库可视化工具(类似PL ...
- 帝国CMS 给简介字段添加一键排版按钮
帝国CMS后台->管理数据表->选择数据表>打开smalltext字段输入表单替换html代码 添加如下代码: <script> function format() { ...
- nginx配置后端映射(反向代理proxy_pass)
说明:配置反向代理proxy_pass和location无关,location后面加不加 / 都可以 1.配置 proxy_pass 时,当在后面的 url 加上了 /,相当于是绝对路径,则 Ngin ...
- openoffice将word转pdf中文乱码或消失的坑
将windows系统下的中文字体文件(C:\Windows\Fonts),放到/usr/share/fonts下,必须重启openoffice.
- 注册中心Eureka的简单使用
不讲原理,只讲简单使用 微服务,一般是父子工程,可以直接在父工程下新建个模块来用来启动Eureka 1.创建Eureka模块 2.引入依赖 <dependency> <groupId ...