关于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在面试中常常被提到的几点（持续更新……）

最新文章

热门文章