关于Vue在面试中常常被提到的几点(持续更新……)
1、Vue项目中为什么要在列表组件中写key,作用是什么?
我们在业务组件中,会经常使用循环列表,当时用v-for命令时,会在后面写上:key,那么为什么建议写呢?
key的作用是更新组件时判断两个节点是否相同。相同则复用,不相同就删除旧的创建新的。正是因为带唯一key时每次更新都不能找到可复用的节点,不但要销毁和创建节点,在DOM中还要添加移除节点,对性能的影响更大。所以才说,当不带key时,性能可能会更好。
因为不带key时,节点会复用(复用是因为Vue使用了Diff算法),省去了销毁或创建节点的开销,同时只需要修改DOM文本内容而不是移除或添加节点。既然如此,为什么我们还要建议带key呢?因为这种不带key的模式只适合渲染简单的无状态的组件。对于大多数场景来说,列表都得必须有自己的状态。避免组件复用引起的错误。
带上key虽然会增加开销,但是对于用户来说基本感受不到差距,为了保证组件状态正确,避免组件复用,这就是为什么建议使用key。
2、Vue的双向绑定,Model如何改变View,View又是如何改变Model的?
我们先看一幅图,下面一幅图就是Vue双向绑定的原理图。
第一步,使数据对象变得“可观测”
我们要知道数据在什么时候被读或写了。
let person = {
‘name’: ‘maomin’,
‘age’: 23
}
let val = ‘maomin’;
Object.defineProperty(person, ‘name’, {
get() {
console.log(‘name属性被读取了’)
return val
},
set(newVal) {
console.log(‘name属性被修改了’)
val = newVal
}
})
// person.name
// name属性被读取了
// “maomin”
// person.name=‘xqm’
// name属性被修改了
// “xqm”
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119250932
关于Vue在面试中常常被提到的几点(持续更新……)的更多相关文章
- Vue搭建后台系统需要做的几点(持续更新中)
前言 持续更新 一.UI框架 推荐 Elemnet ui 二.图表 vue-schart npm install vue-schart -S <template> <div id=& ...
- C#、Java中的一些小功能点总结(持续更新......)
前言:在项目中,有时候一些小的功能点,总是容易让人忽略,但是这些功能加在项目中往往十分的有用,因此笔者在这里总结项目中遇到的一些实用的小功能点,以备用,并持续更新...... 1.禁用DataGrid ...
- iOS --- 总结Objective-C中经常使用的宏定义(持续更新中)
将iOS开发中经常使用的宏定义整理例如以下,仅包括Objective-C. 而对于Swift,不能使用宏,则能够定义全局函数或者extension.请參考博客iOS - 总结Swift中经常使用的全局 ...
- [ 记录 ] Vue 对象数组中一项数据改变,页面不更新
问题描述:将data中数据列表渲染到页面,循环生成 el-switch,点击页面中 el-switch 后数组中某项值改变,但是页面不更新 数据格式如下 export default{ data(){ ...
- HTML5中已经不支持元素汇总,持续更新
HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr) : 定义首字母缩写 2.applet(建议object): 定义 applet 3.bas ...
- Android开发中的问题及相应解决(持续更新)
最近博客写的少了,以后还得经常更新才行. ------------------------------------------------------------ 1.特定业务需求下try cath ...
- 【2018.05.09 Python学习及实践】个人项目中使用的Python库备忘-持续更新
科研中无论是使用C/C++.Python.Matlab,如果能找到合适的库可谓是事半功倍: 有时候忙活半天才发现本身就有成熟的库可用,自己实现的在功能.性能.安全性上都远远不及,虽然锻炼了能力,但存在 ...
- linux 日常中会用到的命令(持续更新)
1. grep 比如,我要查看www目录下所有包含 “聊天室” 的文件 grep -rn "聊天室" * 比如我要把 www 目录下所有文件中的 聊天室 替换为 ...
- Idea中快捷键与小技巧的总结-->持续更新
1.Scala类或单例对象中快速声明实例对象: eg. new SparkContext(conf).var 系统会自动提示,可以自动补全,如图: 2.ctrl+i与ctrl+o的区别: ctrl + ...
随机推荐
- 百兆以太网(100BASE-TX)的波形和眼图
沾了公司的光用了那台采样率吓死人的示波器看了下百兆以太网的三电平波形和眼图. 之前我也强调过百兆的三电平是不能从1状态越过0状态跳到-1状态的,从眼图上能明显看出来. 可以看出这个信号还是不错的.甚至 ...
- Python 每日提醒写博客小程序,使用pywin32、bs4库
死循环延迟调用方法,使用bs4库检索博客首页文章的日期是否与今天日期匹配,不匹配则说明今天没写文章,调用pywin32库进行弹窗提醒我写博客.
- 使用Harr特征的级联分类器实现目标检测
前言 最近在学习人脸的目标检测任务时,用了Haar人脸检测算法,这个算法实现起来太简洁了,读入个.xml,调用函数就能用.但是深入了解我发现这个算法原理很复杂,也很优秀.究其根源,于是我找了好些篇相 ...
- js如何判断一个对象是不是Array? 三种方法总有一种可以帮上忙
转载:http://www.nowamagic.net/librarys/veda/detail/1250 在开发中,我们经常需要判断某个对象是否为数组类型,在Js中检测对象类型的常见方法都有哪些呢? ...
- javaWeb代码整理03-druid数据库连接池
jar包: maven坐标: <dependency> <groupId>com.alibaba</groupId> <artifactId>druid ...
- 2021.07.26 P1011 车站(斐波那契数列)
2021.07.26 P1011 车站(斐波那契数列) [P1011 NOIP1998 提高组] 车站 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.改变形式的斐波那契 ...
- 倒计时第3天!Google Summer of Code报名即将截止!(Casbin社区还有空缺名额)
Google Summer of Code 介绍 Google Summer of Code ( GSoC ,即 Google 编程之夏)是 Google (谷歌)组织并提供经费,面对全球在读学生的在 ...
- Linux常用命令学习笔记——基于CentOS 7
前言:最近在linux培训时复习了一下linux系统中一些常用的命令和用法,整理成了笔记,虽然些许零散,但希望对大家有所帮助. 目录 0.帮助指令 1.关机.重启.注销命令 2.文件和目录操作命令 3 ...
- JSP标签、JSTL标签、EL表达
JSP页面转发,附带数据 <jsp:forward page="/jsptag2.jsp"> <jsp:param name="name" v ...
- ucore lab7 同步互斥机制 学习笔记
管程的设计实在是精妙,初看的时候觉得非常奇怪,这混乱的进程切换怎么能保证同一时刻只有一个进程访问管程?理清之后大为赞叹,函数中途把前一个进程唤醒后立刻把自己挂起,完美切换.后一个进程又在巧妙的时机将自 ...