2022秋招-前端学习记录7-Vue专题

Vue专题 面试题

v-if 和 v-show的区别：

b站视频：https://www.bilibili.com/video/BV1Wo4y1m7tt

v-if 的：（下面还有个btn方法，改变data中isShow的值，this.isShow = !this.isShow，true和false切换着用。）


如果是isShow是true ，那么渲染的dom是这样的：

如果是isShow是false ，那么渲染的dom是这样的： 节点删掉了。。。

v-show 的：（下面还有个btn方法，改变data中isShow的值，this.isShow = !this.isShow，true和false切换着用。）

如果是isShow是true ，那么渲染的dom是这样的： （和v-if的true情况一样）

如果是isShow是false ，那么渲染的dom是这样的： div被设置了 display属性为none。。。

二者的区别总结：

 
 

引：关于display属性（不给子元素继承）

display常用的几个属性：

常见的属性值（属性值太多，只要说常用的就好）
display: block； 块级元素 --------这个值会将该元素变成块级元素。有宽度，独占一行
display: inline； 行内元素 --------这个值会将该元素变成行内元素。 没有宽高，不占整一行
display: inline-block； 内联块级元素 有宽高，不占整一行
display: list-item; 列表项目 li的默认样式
display: none； 元素隐藏 从文档流消失，不占空间不交互，不影响布局

引：面试题： display: none可以隐藏元素之外，还有其他的几种隐藏元素的方法：

有哪些⽅式（CSS）可以隐藏页面元素？
display:none : 这个是彻底隐藏了元素，元素从⽂档流中消失，既不占据空间也不交互，也不影响布局
visibility:hidden : 占据空间，但是不可以交互了
opacity:0 ： 本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互
z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
transform: scale(0,0) : 平⾯变换，将元素缩放为0，但是依然占据空间，但不可交互

CSS display: none; visibility: hidden; opacity: 0;区别

技术蛋老师
视频链接：https://www.bilibili.com/video/BV1X5411W7nz

 

引：以上的重绘和重排/回流是什么意思？（附：如何避免重排）

参考文章：https://www.cnblogs.com/soyxiaobi/p/9963019.html
算是这篇文章的读后感与笔记。
首先，
我们从浏览器如何渲染一个dom页面开始讲起。。。
浏览器在下载完页面的资源以后，就开始要构建HTML这边的DOM树了，同时，CSS这边的style树也在构建，这俩合并一下：DOM树和Style树合并就成了 Render树，即渲染树。
DOM树： 表示页面的结构
Render渲染树： 表示页面的节点如何显示

Render渲染树 构建完成后，就要开始绘制（paint）页面元素了
当DOM的变化引发了元素的几何属性变化，比如添加删除dom元素，元素位置、尺寸、内容什么的改变了，页面渲染器初始化，浏览器窗口大小改变，都会导致浏览器不得不重新计算元素几何属性，重新构建渲染树，这个过程叫做 “重排”，完成重排之后，要将新构建的渲染树渲染到屏幕上，这个过程叫做 “重绘”。
简单的说，重排负责元素的几何属性更新，重绘负责元素的样式更新。而且，重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景，这个就不涉及元素的几何属性，所以只发生重绘。

常见的重排(回流)操作有：
1、页面初次渲染
2、浏览器窗口大小改变
3、元素尺寸/位置/内容发生改变
4、元素字体大小变化
5、添加或者删除可见的 DOM 元素
6、激活 CSS 伪类（:hover……）
7、more ……

常见的重绘操作有：
1、改变元素颜色
2、改变元素背景色
3、more ……

如何避免多次重排重绘导致的性能迟缓？（如何性能优化）
考虑下面这个例子，糟糕的代码，这里最高能触发3次重排：

var el = document.querySelector('.el');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';

解决方案1—— 减少重排的方法就是切换类名：

// css 
.active {
    padding: 5px;
    border-left: 1px;
    border-right: 2px;
}
// javascript
var el = document.querySelector('.el');
el.className = 'active';

解决方案2—— 合并所有的改变后，一次处理掉：

var el = document.querySelector('.el');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';

解决方案3：

 
 

v-for的key

不光是v-for中需要使用key，其他地方也有需要的地方。
v-for的普通用法 加key的：

首先从vue的虚拟dom说起，因为虚拟dom这个概念，可以不直接操作底层的DOM元素，只操作数据就可以重新渲染页面。这个功能里少不了 Diff算法的功劳。

因为vue组件高度复用，为了让算法认识这些组件，有唯一性，更好地区别各个组件，所以要对每个组件加上唯一的key值，以便准确、高效的更新虚拟DOM。

key 是为Vue中的vnode标记的唯⼀id,通过这个key,我们的diff操作可以更准确、更快速。
准确: 如果不加 key ,那么vue会选择复⽤节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产⽣⼀系列 的bug。
快速: key的唯⼀性可以被Map数据结构充分利⽤,相⽐于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1)。

 

引：vue为什么要用虚拟dom？

参考文章链接（写的很好）：https://blog.csdn.net/weixin_31499719/article/details/113013831
浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

JS或者JQ操作真实DOM的代价！
用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。
在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。
计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

为什么需要虚拟DOM，它有什么好处?
Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化；
若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。
用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM) 上，操作内存中的JS对象的速度显然要更快，等更新完成后，再 将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

虚拟DOM对象映射成真实DOM（diff算法）



这里又绕回来了，为什么要加key

 
 

MVC与MVVM， 对MVVM的理解？

MVC
MVC主要是指前后端分层开发的概念，，这个概念比MVVM大一些，应该涵盖数据库、后端、前端这些，M就是底层数据，比如数据库的数据等等，V就是前端页面，C就是指数据分发的控制器之类的。

MVVM
MVVM主要是 专指前端视图层的概念，相当于把MVC里面的V再次细分，就是前端的视图层开发模式。全称是 Model-View-ViewModel ，把前端的视图层分成了 三个部分：Model、View、ViewModel。


在 MVVM 框架中，View(视图) 和 Model(数据) 是不可以直接通讯的
它们之间存在着 ViewModel 这个中间介充当着观察者的角色。

M变化，VM感知到了，让V作出对应的页面更新；
V变化，VM感知到了，让M作出对应的数据变化。
上面这个一来一回的过程，就叫 双向绑定。
 

引：Vue的单向绑定和双向绑定

Vue是有单向绑定的 ，这个并不奇怪。有些数据在前端页面里是写死了的，并不是所有的视图层的组件都可以像表单组件那样，用户输入完后，再把某数据通过VM传回Model层让它改；拥有改变底层数据的权利只有设置某些条件才有。
一般展示数据的工作就是单向绑定， 由数据/Model层单向向视图/View层传递。
表单的工作就是双向绑定，一般就是从前端获取数据传回model层，然后再从model层传到view视图层。

Vue.js主要有三种数据绑定形式：
① 插值形式 就是{{data}}的形式，它使用的是单向绑定。
我们首先定义好一个JavaScript对象作为Model，并且把这个Model的两个属性绑定到DOM节点上。

②v-bind形式
单向数据绑定： 前面的双括号，是把数据写在dom元素的内容区的，不能扔在dom元素的属性里，而用v-bind可以做到这一点：

插入关于v-bind的浅用法
这是vue常用的指令之一。主要是用来动态绑定元素的属性的：
没有v-bind的如下： 这里的imgURL被当做字符串来解析了。

加了v-bind之后： 这里的imgURL才是被当做一个变量来解析，就能拿到data里面的数据了。

③ v-model形式
v-model主要是用在表单元素中，作用是双向绑定 数据

当用户填写表单时，View的状态就被更新了。此时Model的数据也会随着输入的数据动态的更新，那就相当于我们把Model和View做了双向绑定。

 

如何实现一个双向绑定？/ 双向绑定的原理是什么？

参考链接，这篇写的很好：https://www.cnblogs.com/zhuzhenwei918/p/7309604.html

Vue完成数据双向绑定， Object.defineProperty()函数 的set和get函数 至关重要 ，下面，我们看看这个函数的基本使用方式。

var obj = {
	foo: 'foo'
}

// 这里的参数是，第一个是需要被数据劫持的对象，第二个是对象的属性名，第三个是配置，里面放set、get函数等。
Object.defineProperty(obj, 'foo', {
	get () {
		console.log('get启动 将要读取obj.foo属性');
	}, 
	set (newVal) {
		console.log('set启动 当前值为', newVal);
	}
});

  obj.foo; // get启动 将要读取obj.foo属性 (这里读取属性值的时候，触发了get函数，所以可以输出这句。)
  obj.foo = 'name'; // set启动 当前值为 name

双向绑定的原理：（数据劫持）
因为Object.defineProperty这个函数对这个对象的某 单个属性 做了数据劫持，
所以读取obj的foo属性的 属性值的时候，触发了get函数，所以可以输出这句：get启动 将要读取obj.foo属性
设置对象的这个属性的时候，触发了set函数，所以输出这句：set启动 当前值为 name

Object.defineProperty( 参数一，参数二，参数三 )
第一个是需要被数据劫持的对象，
第二个是对象的属性名，
第三个是配置，里面放set、get函数等。

批量对某对象的某些属性 进行劫持：

Object.defineProperty的缺点：当obj对象新增或者删除了某个属性，这个API是无法感知到的。
以及其他缺陷，不细讲了。
 

Proxy对比Object.defineProperty

Vue 2.0 使用 Object.defineProperty() （ES5的）实现数据响应
Vue 3.0 的时候已经放弃了Object.defineProperty 而是使用 Proxy （ES6的）
这也是vue3.0增加的新特点。

Proxy的作用是 创建一个对象的代理，从而实现对这个代理对象的基本操作的拦截和自定义

let obj = {
  name: 'dssd',
  zzz: 'err'
}
let _handler = {
  get(target, _p ){
    console.log('get启动')
  },
  set(obj1, _pro, _val){
    console.log('set启动 ')
  }
}
let _proxyObj = new Proxy(obj, _handler)
_proxyObj.name // get启动
_proxyObj.zzz = 'abc' // set启动

vue3.0增加了哪些新特性