关于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 + ...
随机推荐
- Mysql集群搭建-实操
集群安装--准备工作 官网地址 https://dev.mysql.com/doc/refman/5.7/en/mysql-cluster-install-linux-binary.html 一.环境 ...
- 洛谷 P1162 填涂颜色 DFS
P1162 填涂颜色 https://www.luogu.com.cn/problem/P1162 qaq搜索好抽象啊,蒟蒻表示难以理解,搞半天才做出来一道题,很挫败www 思路 染色法.找墙壁外的连 ...
- python基础练习题(题目 文本颜色设置)
day23 --------------------------------------------------------------- 实例035:设置输出颜色 题目 文本颜色设置. 分析:不会, ...
- Django显示本地图片,注意事项
1.在url.py文件中的配置 导入相关的库,在Python2.0后,要用re_path from django.urls import path,re_path from django.views. ...
- 使用GO语言通过Stream Load实现Doris数据导入
Doris github地址欢迎加Star apache/incubator-doris: Apache Doris(Incubating) is an MPP-based interactive S ...
- 【SpringBoot实战】视图技术-Thymeleaf
前言 在一个Web应用中,通常会采用MVC设计模式实现对应的模型.视图和控制器,其中,视图是用户看到并与之交互的界面.对最初的Web应用来说,视图是由HTML元素组成的静态界面:而后期的Web应用更倾 ...
- TCP 连接的建立 & 断开
TCP 连接的建立过程 一开始,客户端和服务端都处于 close 状态. 先是服务端监听某个端口,此时服务端处于 listen 状态. 这个时候客户端就可以发送连接请求报文了. 第一次握手 客户端会主 ...
- .Net Core Razor动态菜单实现
准备 1.框架 .netcore 版本 yishaadmin开源框架 2.模板 本文模板使用adminlte3.0,文档地址https://adminlte.io/docs/3.0/ 3.菜单表 关 ...
- 干货长文:Linux 文件系统与持久性内存介绍
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 1.Linux 虚拟文件系统介绍 在 Linux 系统中一切皆文件,除了通常所说的狭义的文件以 ...
- slice-substring-substr-split-splice
一.字符串slice(startIndex, endBeforeIndex) endBeforeIndex < 0,则 endBeforeIndex 为 负数,第二个参数为字符串长度加上负值,之 ...