常看：vue面试相关知识

部分概念

DOM 操作本身应该是同步的（当然，我说的是单纯的 DOM 操作，不考虑 ajax 请求后渲染等）。

DOM 操作之后导致的渲染等是异步的（在 DOM 操作简单的情况下，是难以察觉的）。

CSS阻塞渲染：由于CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM是完备的，这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完，只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染。CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。

JS阻塞页面：JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，这就导致了浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析，也阻塞了其后的CSS解析，整个解析进程必须等待JS的执行完成才能够继续。从性能角度上讲，将script放在页面底部，也就合情合理了

重排（Reflow）：DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow

触发重排（reflow）：

1、当增加、删除、修改DOM节点时，会导致reflow或repaint

2、当移动DOM的位置，或是插入动画的时候

3、当修改CSS样式的时候

4、当Resize窗口的时候，或是滚动的时候

5、当修改网页的默认字体时

重绘（Repaint）：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

触发重绘（Repaint）：

1、DOM改动

2、CSS改动

最小化重绘和重排 1.一次性修改样式：减少内联样式使用样式合并写法 2.批量修改DOM：使用文档片段创建一个子树，然后再拷贝到文档中（document.fragment） 3.缓存布局信息
//每次需要查询div.offsetLeft 浪费性能
div.style.left = 1 + div.offsetLeft + 'px';
div.style.top = 1 + div.offsetTop + 'px';//将这个值保存下来，避免重复取值 性能优化
current = div.offsetLeft;
div.style.left = 1 + ++current + 'px';
div.style.top = 1 + ++current + 'px';

浮动：可能是最全面最易懂的解析前端浮动的文章 - 掘金
为啥有浮动这个东西，业务驱动吧，需要文字环绕图片的功能。position: absolute|fixed
向左或向右边缘碰到父容器边缘或浮动元素
脱离文档流，影响后面的文档流（内部和后面的外部）不懂看前面的链接
处理方案：
（1）伪元素 ::befor ::afer 加载父元素上
（2）BFC
（3）clear:both
(4) <br clear="all" />

BFC-块级格式化上下文
独立的渲染区和一个隔离独立容器

（1）浮动元素，float 除 none 以外的值；脱离文档流

（2）定位元素，position（absolute，fixed）；绝对定位和固定定位
（3）display 为以下其中之一的值 inline-block， flex, table-cell，table-caption；后两个这个去细看，不常用
（4）overflow 除了 visible 以外的值（hidden，auto，scroll），他能单独滚动

特点：

（1）独立容器不会影响外面
（2）.垂直方向上的距离由margin 决定；（解决外边距重叠问题）

（3）bfc 的区域不会与 float 的元素区域重叠；（防止浮动文字环绕）
（4）计算 bfc 的高度时，浮动元素也参与计算；（清除浮动）

（5）BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
    <div class="container"><div class="box"><span>1</span><span>2</span></div><div class="box1"></div><div class="box2"></div></div>.container {background: red;/* display: inline-block; */
}
.box {display: inline-block;float: left;width: 200px;height: 200px;text-align: left;border: 10px solid black;padding: 15px;box-sizing: content-box;
}
.box1 {display: inline-block;width: 200px;height: 200px;text-align: left;border: 10px solid black;padding: 15px;box-sizing: border-box;
}
.box2 {float: right;display: inline-block;width: 100px;height: 100px;text-align: left;border: 10px solid black;padding: 15px;box-sizing: border-box;
}
background: red;

/* display: inline-block; */
（1）塌陷

（2）Margin边距重叠
A: margin:10
B: margin：10
A距离B 还是margin10
(3)

box-sizing: content-box（标准模式） | border-box(怪异模式)

vue 2.4
$attrs 参数传递
A ->B->C

A :name='anme' :age="age"

B v-bind="$attrs" inheritAttrs: true // 继承所有父组件的内容

C :name='anme' :age="age" inheritAttrs: false

vue 2.4

$listeners 事件传递
A ->B->C

A @click="handleClick"
B v-on="$listeners"

C @click="handleClick"

$listeners 和 $attrs 都是避免组件多层调用的参数和方法多层传递的问题

事件总线

// busVue.js

import Vue from 'vue'

export default new Vue()

Vue的实列

a组件

import Bus from "@/store/modules/busVue.js";
methods: {
        handleSelect (item) {
                Bus.$emit('changeSelect', item)
        }
}
b组件

import Bus from "@/store/modules/busVue.js";
mounted(){

Bus.$on('changeSelect', (val)=>{
        console.log(val, '7777777777') })
},

}

destroyed() {

EventBus.$off('changeEvent')

main.js

Vue.prototype.$EventBus = new Vue();
A组件
this.$EventBus.$emit("videoPause");
B组件

this.$EventBus.$on("videoPause", () => {

this.pause();

});

$on $emit $off
$emit
子组件抛出事件 this.$emit("changeName","法外狂徒张三")
父组件@changeName='changeName'
$on

生命周期 create mounted

this.$on("transmit",res=>{ console.log(res)//打印接收到的参数 })
可以自己监听自己
$off 防止$on多次触发，需要$off进行销毁。
destroyed() {

this.$off('changeEvent');

}

provide
inject

provide(){

return{

closeCurrent:this.closeCurrent,

reload: this.routeReload

}

},
inject: ["closeCurrent","reload"],

内置指令

v-cloak
使用{{}}展示或更新页面数据时：当网速比较慢时，会出现一个不好的过度现象，会让用户先看到我们的表达式（上面页面中的{{msg}}），然后才看到data中的值（欢迎Vue!）------->即所谓的闪烁问题！
[v-cloak]{
display: none !important;
}

<div id="app" v-cloak>{{msg}}</div>

v-pre
加v-pre指令跳过这个元素和它的子元素的编译过程

vue源码中 dep

当你data中数据没被使用是不在__ob__中的dep.subs添加监控

添加一个watcher

<div key="1">{{obj.name}}</div>

<div key="2">{{obj.a}}</div>

<div key="3">{{obj.ji}}</div>
watch 再添加一个
computed 中调用一个次，且再页面上调用，就会添加一个watcher,如果有3个只有两个被使用使用就算2个

写个demo看看

大概顺序是这么个回事，编译html模板时，发现需要特殊处理的变量，比如v-model=“name”，这个name被发现以后，就准备为其创建watcher，在创建watcher的时候，先把这个watcher挂载到Dep.target这个全局静态变量上，然后触发一次get事件，这样就触发了get函数中的Dep.target && dep.addSub(Dep.target);，等get到了变量以后，也已经添加到subs队列里了，这时候在令Dep.target = null。

而且，在变量改变，触发set函数时，要调用watcher.update()函数，这里也要触发一次get函数。因此可能会重复往subs队列添加watcher，因此还要设置一个可以自增的depid来进行唯一性控制。这也太抽象了，我人晕了。

obj已被使用

arr数组没被使用

vue中渲染过程

数据劫持-->模板解析-->模板渲染-->数据变化视图自动更新

vue中为什么无法监测数组

__ob__
Object.defineProperty 设置不可枚举
所有对象会有这个方法对象数组
数据初始化的时候添加
其实也可以对数组下标监听，但是数组量大，会影响性能，所以vue监听的时候判断了是否为数组，如果是对象将会进行递归，如果是数组重写__proto__原型链上的方法，如果是多层数组也会使用递归，为对数组下标的拦截太浪费性能，Observer 构造函数传入的数据参数增加了数组的判断
// src/obserber/index.js
class Observer {// 观测值constructor(value) {Object.defineProperty(value, "__ob__", {//  值指代的就是Observer的实例value: this,//  不可枚举enumerable: false,writable: true,configurable: true,});}
}

单项数据流

父组件可以向值组件传递数据,并且改变值组件的值,而子组件不能改变父组件传递给它的 prop 属性，官方推荐的做法是它抛出事件，通知父组件自行改变绑定的值。

数据向下，事件向上。

v-model

v-bind绑定value属性的值；

v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

<input :value = "name" @input = "name=$event.target.value"/>

v-model lazy修饰符是什么作用呢？

默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步；

如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发

原型

命名方式：_private 开发不建议修改属性 __private__ 类似格式系统属性不建议更改
显示原型 prototype function的属性
隐式原型 __proto__ 实例的原型
new 的时候在构造函数内部 Son(){
this.__proto__ = Son.prototype
}

constructor一般指类的prototype.constructor。prototype.constructor是prototype上的一个保留属性，这个属性就指向类函数本身，用于指示当前类的构造函数。
圣杯模式var inherit = function(){var F = function(){};return function(target,origin){F.prototype = origin.prototype;target.prototype = new F();target.prototype.constructor = target;target.prototype.uber = origin.prototype;
}

new运算符原理

1、创建一个空对象

2、让空对象的__proto__（IE没有该属性）成员指向了构造函数的prototype成员对象3、使用apply调用构造器函数，属性和方法被添加到 this 引用的对象中

4、如果构造函数中没有返回其它对象，那么返回 this，即创建的这个的新对象，否则，返回构造函数中返回的对象
function _new(func) {// 第一步 创建新对象let obj= {}; // 第二步 空对象的_proto_指向了构造函数的prototype成员对象obj.__proto__ = func.prototype;//// 一二步合并就相当于 let obj=Object.create(func.prototype)// 第三步 使用apply调用构造器函数，属性和方法被添加到 this 引用的对象中let result = func.apply(obj);if (result && (typeof (result) == "object" || typeof (result) == "function")) {// 如果构造函数执行的结果返回的是一个对象，那么返回这个对象return result;}// 如果构造函数返回的不是一个对象，返回创建的新对象return obj;
}

$ router是用来操作路由的，$ route是用来获取路由信息的。

$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）
常用的跳转连接的方法：
//常规方法
this.$router.push("/login"); //使用对象的形式不带参数

this.$router.push({ path:"/login" }); //使用对象的形式，参数为地址栏上的参数 this.$router.push({ path:"/login",query:{username:"jack"} }); 使用对象的形式，参数为params 不会显示在地址栏

this.$router.push({ name:'user' , params: {id:123} });

Vue路由守卫有哪些
一、全局路由守卫一个是全局前置守卫，一个是全局后置守卫

router.beforeEach((to, from, next) => {console.log('												

											
常看：vue面试相关知识相关推荐	

								结合Vue的相关知识进行温度转换
		温度转换 一.知识基础 二.代码 三.效果 一.知识基础 结合Vue的相关知识进行温度转换. 不仅可以进行温度转换,还可以进行其他单位的转换. 二.代码 <html><head> ...
		
						Vue.js 相关知识（动画）
		1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
		
						面试经验｜计算机网络面试相关知识
		1.OSI七层模型 1.物理层:定义接口特性.传输模式(单工.半双工.双工).传输速率.比特同步.比特编码(曼彻斯特编码). 802.3.Rj45 2.数据链路层:成帧.流量控制.差错控制.访问控制( ...
		
						搜索引擎技术的概要以及相关知识
		1)影响百度排名的几个因素 第一个因素,URL路径存在的时间长短. url的长短对搜索引擎还是有影响的,所以在做优化的时候要注意把url尽量做的短一点,对优化很有好处. 第二个因素,关键词出现的次数. ...
		
						2020社招前端VUE面试题目
		2020前端VUE面试题目集锦 年初由于疫情影响导致上家公司不景气,也由于自己一系列的考虑决定裸辞找工作,面试了十多家公司,最终进入了比较心仪的公司,我将这段时间面试所遇见的和VUE先关题目大概做个整 ...
		
						http相关知识 - （2）状态管理 - session
		http相关知识 - (2)状态管理 - session 1. Session原理 (1)Session用于存储特定的用户会话所需的信息.Session对象的引入是为了弥补无状态HTTP协议的不足.  ...
		
						Linux面试相关知识点看着一文就够了
		今天和大家分享一下linux操作系统下主要用到的几个知识点,分别是:linux目录结构.linux常用命令.文件权限操作.服务操作.yum安装命令.docker服务.vim编译器.pymysql测试连 ...
		
						vue面试核心，双向数据绑定，数据代理，数据劫持，发布订阅，数据编译，看这个demo就够了
		vue面试核心,双向数据绑定,数据代理,数据劫持,发布订阅,数据编译,看这个demo就够了. 不在怕面试官,你给我怼过去.复制到html文档,浏览器运行即可. mvvm原理剖析 {{singer}}
		
						虚拟机相关知识--面试专用
		class文件 能够被JVM识别,加载并执行的文件格式,记录了一个类文件的所有信息. 生成一个class文件,可以通过两种方式: 通过IDE自动帮我们build 手动通过javac去生成class文件 ...
		
		

					
最新文章	

						vue.js 源代码学习笔记  ----- 工具方法 lang
		
						干货丨史上最好记的神经网络结构速记表（经典资源，值得收藏）
		
						vue输入框联想词功能
		
						正则表达式格式化字符串
		
						(3) Hibernate的查询 标准(Criteria)查询
		
						片源系统服务器,OUO NAS10主控界面评测
		
						node中操作MySQL
		
						浏览器插件之ActiveX开发（三）
		
						golang zip 解压、压缩文件
		
						spark 算子实例
		
						2016年物联网技术将从概念走向落地
		
						推荐一本老外给初学者学习ABAP的书籍，2012年12月上市。
		
						“无文件”攻击方式渗透实验
		
						【工作规划】未来自我学习计划及发展注意事项
		
						“李记餐厅”微信点餐小程序+后台管理系统
		
						拉格朗日乘子法和KTT条件
		
						中国经济形势开年如何看？
		
						专访盖国强李轶楠丨通过数据库服务能力评估背后的故事
		
						中国的孩子早已变了，老师和家长却还痴迷不悟
		
						【来灌灌水】~~感谢csdn平台给予新手学习的地方
		
		
	

热门文章	

									自定义View实现圆形水波进度条
			
						认识计算机微课 百度云,微课认识计算机.ppt
			
						全球高分辨率（3小时，10公里）地表太阳辐射数据集（1983-2018）数据单像元数值获取
			
						【操作系统】IO管理
			
						curl基本用法，curl和wget区别
			
						XPS测试数据考盘后的处理数据步骤
			
						什么是Barr-C?
			
						几何向量：二维平面非平行直线相交（修正）
			
						解密赚钱的十大理财方式 买保险被广泛误解
			
						ps磨皮插件Portraiture分享

常看：vue面试相关知识

部分概念

vue 2.4
$attrs 参数传递
A ->B->C

A :name='anme' :age="age"

B v-bind="$attrs" inheritAttrs: true // 继承所有父组件的内容

C :name='anme' :age="age" inheritAttrs: false

vue 2.4

$listeners 事件传递
A ->B->C

A @click="handleClick"
B v-on="$listeners"

C @click="handleClick"

事件总线

// busVue.js

import Vue from 'vue'

export default new Vue()

a组件

import Bus from "@/store/modules/busVue.js";
methods: {
        handleSelect (item) {
                Bus.$emit('changeSelect', item)
        }
}
b组件

}

destroyed() {

EventBus.$off('changeEvent')

main.js

$on $emit $off
$emit
子组件抛出事件 this.$emit("changeName","法外狂徒张三")
父组件@changeName='changeName'
$on

生命周期 create mounted

this.$on("transmit",res=>{ console.log(res)//打印接收到的参数 })
可以自己监听自己
$off 防止$on多次触发，需要$off进行销毁。
destroyed() {

this.$off('changeEvent');

}

provide
inject

provide(){

return{

closeCurrent:this.closeCurrent,

reload: this.routeReload

}

},
inject: ["closeCurrent","reload"],

内置指令

v-pre
加v-pre指令跳过这个元素和它的子元素的编译过程

vue源码中 dep

常看：vue面试相关知识相关推荐

最新文章

热门文章

常看：vue面试相关知识

部分概念

vue 2.4 $attrs 参数传递 A ->B->C

A :name='anme' :age="age"

B v-bind="$attrs" inheritAttrs: true // 继承所有父组件的内容

C :name='anme' :age="age" inheritAttrs: false

vue 2.4

$listeners 事件传递 A ->B->C

A @click="handleClick" B v-on="$listeners"

C @click="handleClick"

事件总线

// busVue.js

import Vue from 'vue'

export default new Vue()

a组件

import Bus from "@/store/modules/busVue.js"; methods: { handleSelect (item) { Bus.$emit('changeSelect', item) } } b组件

}

destroyed() {

EventBus.$off('changeEvent')

main.js

$on $emit $off $emit 子组件 抛出事件 this.$emit("changeName","法外狂徒张三") 父组件@changeName='changeName' $on

生命周期 create mounted

this.$on("transmit",res=>{ console.log(res)//打印接收到的参数 }) 可以自己监听自己 $off 防止$on多次触发，需要$off进行销毁。 destroyed() {

this.$off('changeEvent');

}

provide inject

provide(){

return{

closeCurrent:this.closeCurrent,

reload: this.routeReload

}

}, inject: ["closeCurrent","reload"],

内置指令

v-pre 加v-pre指令跳过这个元素和它的子元素的编译过程

vue源码 中 dep

常看：vue面试相关知识相关推荐

最新文章

热门文章

vue 2.4
$attrs 参数传递
A ->B->C

$listeners 事件传递
A ->B->C

A @click="handleClick"
B v-on="$listeners"

import Bus from "@/store/modules/busVue.js";
methods: {
handleSelect (item) {
Bus.$emit('changeSelect', item)
}
}
b组件

$on $emit $off
$emit
子组件抛出事件 this.$emit("changeName","法外狂徒张三")
父组件@changeName='changeName'
$on

this.$on("transmit",res=>{ console.log(res)//打印接收到的参数 })
可以自己监听自己
$off 防止$on多次触发，需要$off进行销毁。
destroyed() {

provide
inject

},
inject: ["closeCurrent","reload"],

v-pre
加v-pre指令跳过这个元素和它的子元素的编译过程

vue源码中 dep