前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于Vue在面试中常常被提到的几点(持续更新……)

关于Vue在面试中常常被提到的几点(持续更新……)

作者头像
马克社区
发布2022-05-19 19:57:09
2570
发布2022-05-19 19:57:09
举报
文章被收录于专栏:高端IT高端IT

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

本文系转载,前往查看

如有侵权,请联系?cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系?cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com