triggerV的博客

摘要：本文对比了四种JSON编辑方案，重点推荐svelte-jsoneditor方案。该方案支持可视化编辑、格式化、JSON Schema校验等功能，通过动态生成结构模板实现字段锁定。文中提供了Vue3实现代码，包含数据加载、Schema生成、编辑器初始化和保存校验等核心逻辑。其他方案如vue-json-pretty功能较弱，vue-json-editor和vue3-json-editor存在中文输入问题。

Vue中v-if指令遇到dataForm.unknowData.version报错的原因是当unknowData为undefined/null时访问其version属性会抛出TypeError。解决方案包括：1)初始化时确保数据存在；2)使用&&运算符检查dataForm.unknowData && dataForm.unknowData.version；3)在Vue3中使用可选链操作符dataForm.unknowData?.version。这些方法都能有效避免访问未定义对

Vue提供了toRaw()和markRaw()方法处理响应式数据转换。toRaw()用于获取响应式对象的原始版本，操作原始对象不会触发页面更新。markRaw()则标记对象不被响应式系统处理，适用于静态数据或性能优化场景。需注意：toRaw不解除响应式，markRaw对已响应式对象无效；嵌套对象可能存在身份不一致问题，原始版本与代理版本可能不同。合理使用这些方法可优化性能，但需谨慎处理对象引用关系。

1）核心是处理shapeFlag赋值，之后在中又通过shapeFlag和type根据按位或运算，重新对shapeFlag赋值 2）h函数本质上是对四个属性处理childrenpropsshapeFlagtype和的增强。

runtime运行时，主要在目录下，核心提供了hrender等函数。在理解它们之前，我们需要了解下HTML DOM 树和虚拟 DOM等概念。

1）watch函数实际执行的是doWatch方法，调度器scheduler在watch中很关键2）scheduler两者之间存在互相作用的关系，一旦effect触发了scheduler，那么会导致执行，job方法就被塞入微任务的队列中3）只要job()触发，那么就表示watch触发了一次。

computed计算属性实际是一个ComputedRefImpl构造函数的实例ComputedRefImpl构造函数中通过_dirty变量来控制effect中run方法的执行和triggerRefValue的触发 - 初始时_dirty为true，表示计算属性的值尚未计算，需要重新计算 - 当值被计算并缓存后，_dirty设置为false - 当计算属性的依赖发生变化时，例如响应式数据被修改，_dirty重新设置为true，表示需要重新计算值

ref函数本质上做了三件事返回RefImpl的实例对数据处理，如果当前数据为基本类型则直接返回；如果是为复杂类型则调用reactive返回reactive数据RefImpl提供get value和set value方法，这就是为什么设置ref值时，需要带上.value

reactive函数实际执行了createReactiveObject方法，该方法主要创建了一个Proxy实例对象，给代理对象添加了getter和setter行为getter和setter方法定义在mutableHandlers对象中，用于拦截对象属性的获取和设置操作

本教程详细介绍了基于Vue3.2.37版本进行本地环境配置与源码调试的全流程。首先需通过npm全局安装pnpm（需Node.js≥16.5.0），使用pnpm安装项目依赖，并在package.json的build命令中添加-s参数开启sourcemap生成。若遇到非Git仓库报错，需执行git init初始化仓库并提交代码。完成构建后需验证dist目录是否生成vue.global.js及其.map文件用于源码映射。随后在examples目录创建learning子目录并编写测试HTML文件

数据在 vue 中是单向流动的，有利于管理数据状态和变化。而在日常组件开发中，难以避免组件之间的数据通信。组件通信可以分为不同的场景，例如父子组件通信、兄弟组件通信、跨层级组件通信等。

webpack是一个现代 JavaScript 应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图 ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

Vue是一款基于MVVM架构的渐进式框架，它主要用于构建单页面应用SPA，它的特点有声明式渲染、响应式两大点。