1.Vue的diff算法 – 理解
新旧虚拟DOM经过diff比对,形成一个补丁(patch(s))局部更新真实DOM

- 按DOM树的层级分解比较(严格的数据结构划分)

- 同key值对比(v-for写key,其他的元素会默认分配key)
注意:
在v-for对一个数组循环渲染的时候千万别用索引值当做key值。
因为在是涉及数组的增删时候,索引值每一次都是从数组第一位开始开始累加,也就是在增删的索引值不是唯一的。
第一是性能的问题:每次key改变,就不只是局部的更新,而是重新渲染整个列表。第二是bug:比如列表的每一项item是select,那么当删除后,select的值会发生改变。
因此我们一般用item的里面id作为唯一可以值。
- 同组件对比(如组件props不同)
总结:虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。
2.组件扩展知识
*子组件可以直接修改属性?
props传过来的属性,在子组件内部可以修改(但父组件的值没有修改),但是控制台会报错,会发生不可预期的问题。因此自定义事件专门用于修改,从源头(父组件)修改。
严格来说,Vue子组件不能随便更改父组件传递过来的属性但是可以通过
props配合 $emit 改变父组件传入的值(两步实现在子组件直接改)
- 父组件中props加sync
在父组件传入值时,需要有xxx.sync修饰符;表示同步接收。
<my-input :warning.sync= "warning" />
- 子组件加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=“父的监听事件”>其实就是子传父,父传子的简写方式。
了解原理才能更好的学习,一起加油进步!逆战!
本文深入解析Vue的Diff算法,解释如何通过高效更新实现虚拟DOM的局部更新,避免不必要的重绘。同时,探讨了组件间的通信机制,包括如何正确使用v-model和v-once,以及通过props和$emit进行父子组件间的数据同步。



被折叠的 条评论
为什么被折叠?



