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增加了哪些新特性

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值