Vue关于组件方面的一些总结

本文深入解析Vue的Diff算法,解释如何通过高效更新实现虚拟DOM的局部更新,避免不必要的重绘。同时,探讨了组件间的通信机制,包括如何正确使用v-model和v-once,以及通过props和$emit进行父子组件间的数据同步。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.Vue的diff算法 – 理解

新旧虚拟DOM经过diff比对,形成一个补丁(patch(s))局部更新真实DOM
在这里插入图片描述

  1. 按DOM树的层级分解比较(严格的数据结构划分)
    在这里插入图片描述
  2. 同key值对比(v-for写key,其他的元素会默认分配key)

注意:
在v-for对一个数组循环渲染的时候千万别用索引值当做key值。
因为在是涉及数组的增删时候,索引值每一次都是从数组第一位开始开始累加,也就是在增删的索引值不是唯一的。
在这里插入图片描述在这里插入图片描述
第一是性能的问题:每次key改变,就不只是局部的更新,而是重新渲染整个列表。第二是bug:比如列表的每一项item是select,那么当删除后,select的值会发生改变。
因此我们一般用item的里面id作为唯一可以值。

  1. 同组件对比(如组件props不同)

总结:虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

2.组件扩展知识

*子组件可以直接修改属性?

props传过来的属性,在子组件内部可以修改(但父组件的值没有修改),但是控制台会报错,会发生不可预期的问题。因此自定义事件专门用于修改,从源头(父组件)修改。

严格来说,Vue子组件不能随便更改父组件传递过来的属性但是可以通过
props配合 $emit 改变父组件传入的值(两步实现在子组件直接改)

  1. 父组件中props加sync
在父组件传入值时,需要有xxx.sync修饰符;表示同步接收。
<my-input :warning.sync= "warning" />
  1. 子组件加update

this.emit(′update:warning′;val)子组件可以在emit('update:warning';val) 子组件可以在emit(update:warning;val)emit("update:xxxx’,val),派发事件修改传入的值;再在父组件事件接收

*v-once用在组件上有什么用?

根元素上添加v-once这个attribute以确保这些内容只计算一次,然后缓存起来。组件不会更新

*v-model可以用在组件通信?
子组件: <child v-model="mytext"></child>

在子组件中获取是:props=['value']; this.$emit('input',data);接收是props中的value,触发时input,而且子组件的使用中只需要写v-model。这个value和input是一定要这么写
他是一个语法糖,等价于<child :value=“mytext” @input=“父的监听事件”>其实就是子传父,父传子的简写方式。


了解原理才能更好的学习,一起加油进步!逆战!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值