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在面试中常常被提到的几点(持续更新……)的更多相关文章

  1. Vue搭建后台系统需要做的几点(持续更新中)

    前言 持续更新 一.UI框架 推荐 Elemnet ui 二.图表 vue-schart npm install vue-schart -S <template> <div id=& ...

  2. C#、Java中的一些小功能点总结(持续更新......)

    前言:在项目中,有时候一些小的功能点,总是容易让人忽略,但是这些功能加在项目中往往十分的有用,因此笔者在这里总结项目中遇到的一些实用的小功能点,以备用,并持续更新...... 1.禁用DataGrid ...

  3. iOS --- 总结Objective-C中经常使用的宏定义(持续更新中)

    将iOS开发中经常使用的宏定义整理例如以下,仅包括Objective-C. 而对于Swift,不能使用宏,则能够定义全局函数或者extension.请參考博客iOS - 总结Swift中经常使用的全局 ...

  4. [ 记录 ] Vue 对象数组中一项数据改变,页面不更新

    问题描述:将data中数据列表渲染到页面,循环生成 el-switch,点击页面中 el-switch 后数组中某项值改变,但是页面不更新 数据格式如下 export default{ data(){ ...

  5. HTML5中已经不支持元素汇总,持续更新

    HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr) : 定义首字母缩写 2.applet(建议object):  定义 applet 3.bas ...

  6. Android开发中的问题及相应解决(持续更新)

    最近博客写的少了,以后还得经常更新才行. ------------------------------------------------------------ 1.特定业务需求下try cath ...

  7. 【2018.05.09 Python学习及实践】个人项目中使用的Python库备忘-持续更新

    科研中无论是使用C/C++.Python.Matlab,如果能找到合适的库可谓是事半功倍: 有时候忙活半天才发现本身就有成熟的库可用,自己实现的在功能.性能.安全性上都远远不及,虽然锻炼了能力,但存在 ...

  8. linux 日常中会用到的命令(持续更新)

    1. grep 比如,我要查看www目录下所有包含   “聊天室”  的文件 grep -rn "聊天室" * 比如我要把  www  目录下所有文件中的    聊天室   替换为 ...

  9. Idea中快捷键与小技巧的总结-->持续更新

    1.Scala类或单例对象中快速声明实例对象: eg. new SparkContext(conf).var 系统会自动提示,可以自动补全,如图: 2.ctrl+i与ctrl+o的区别: ctrl + ...

随机推荐

  1. docker将jar打包镜像文件

    1.首先需要编写dockerfile文件,通过dockerfile文件将jar包打成镜像 编写dockerfile文件 # 定义父镜像 FROM java:8 # 维护者信息 MAINTAINER c ...

  2. sqlplus文件查看自带oracle命令的执行过程

    问题描述:看到一篇文章 在$ORACLE_HOME/bin/sqlplus中可以查看到数据库命令的查询语句.可以直接编辑sqlplus文件,查到到我们平时标准系统命令的原脚本,但是自己进行编辑查看却是 ...

  3. 设置网站标题时找不到index.html问题解决

    都知道,修改网站标题在根目录index.html里修改.但是在vue3更新后,index.html就没有放这里了,放到了public中.去public中一眼就能看到.我也是去那里就找到了.

  4. Web安全中的常见Session攻击(预测+劫持+固定)

    攻击者至少可以通过以下三种方式来获取一个有效的session标识符: 1.预测 2.捕获(劫持) 3.固定 一.会话预测 预测这种方式,也就是攻击者需要猜测出系统中使用的有效的session标识符(P ...

  5. 公私钥 SSH 数字证书

    公私钥 SSH 数字证书 小菜鸟今天买了华为云一台服务器,在使用公私钥远程登录服务器的时候,忘记了相关公钥私钥的原理和一些应用了,今天复习一波做个记录. 相关概念 公钥:公钥用来给数据加密,用公钥加密 ...

  6. python基础练习题(题目 求s=a+aa+aaa+aaaa+aa…a的值,其中a是一个数字。例如2+22+222+2222+22222(此时共有5个数相加),几个数相加由键盘控制)

    day11 --------------------------------------------------------------- 实例018:复读机相加 题目 求s=a+aa+aaa+aaa ...

  7. v74.01 鸿蒙内核源码分析(编码方式篇) | 机器指令是如何编码的 | 百篇博客分析OpenHarmony源码

    本篇关键词:指令格式.条件域.类型域.操作域.数据指令.访存指令.跳转指令.SVC(软件中断) 内核汇编相关篇为: v74.01 鸿蒙内核源码分析(编码方式) | 机器指令是如何编码的 v75.03 ...

  8. ElasticSearch7.3学习(二十一)----Filter与Query对比、使用explain关键字分析语法

    1.数据准备 首先创建book索引 PUT /book/ { "settings": { "number_of_shards": 1, "number ...

  9. 爬虫--Scrapy框架的初步使用

    1.scrapy在windows环境下安装 - 环境的安装: a. pip3 install wheel b. 下载twisted: http://www.lfd.uci.edu/~gohlke/py ...

  10. 使用python获取交换机syslog日志并使用jQuery在html上展示

    需求 现网有部分pop点独立于海外,无法发送日志给内网日志服务器,同时最近网内有比较重要割接,所以临时写一个脚本来展示网内日志 思路 使用socket接收syslog数据,udp 514,数据部分格式 ...