vue多层级属性的渲染—Vue源码的学习

最新推荐文章于 2025-06-28 09:11:07 发布

Aglaia_H5

最新推荐文章于 2025-06-28 09:11:07 发布

阅读量852

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue源码学习文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/Aglaia_web/article/details/103911343

本文探讨了Vue在处理多层级属性渲染时遇到的问题，包括虚拟DOM的使用和单属性限制。提出了解决方案，如使用深拷贝或栈结构实现DOM转换，并封装函数处理对象路径。虽然案例尚未结合虚拟DOM，但为后续实现奠定了基础。

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

在vue基本的执行流程存在如下问题：
1） Vue使用的是虚拟DOM
2 ）只考虑了单属性（ { {name}} ）,没有考虑层级（ { {a.b.c.d}} ），而vue中大量的使用层级（ { { child.name.firstName }} ）
3 ）代码没有整合

为了解决上述问题，可以采用如下方法：
1）将真正的DOM和虚拟的DOM相互转换，提供如下方案：

采用深拷贝，（递归函数）
采用栈结构，使用栈存储父元素来实现递归生成（Vue的源码采用的方式，因为Vue里面是把元素转换为字符串处理）

2）考虑多属性，封装一个通过路径获取对象值的函数。（可采用函数柯里化技巧）
3）可以采用面向对象的方法整合代码。

案例

	<div id="root">
        <p>
            {
   
   {
   
   name.firstName}}
        </p>
        <p>
            {
   
   {
   
   a.b.c.d.e}}
        </p>
    </div>

	  // 利用了函数柯里化 的技巧，实现获取对象内部属性的值
	   function createGetValueByPath(path){
   
   
           let paths = path.split('.'); 
           return function getValueByPath(obj){
   
   
               let res = obj;
               let prop;
               while(prop = paths.shift())