A PATH THROUGH THE GARDEN
Vue.
这里收录了 12 篇与「Vue」有关的文字。
vue源码新调试方式
下载vue源码（https://github.com/vuejs/core）将命令改写：只是加一个-s"build-browser-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && no
Vue3源码：ref响应式原理
在createApp中，传入的rootComponent是一个和选项式API不同的参数，也就是setupref原理RefImpl实例化响应式变量组合式和选项式的差异就是，组合式在代码编译过程成进行响应化构建，选项式直接传入data“选项”进行构建，可以看到本质上ref的响应初始化还是通过rea...
Vue3源码：track依赖追踪原理
track(debugInfo?: DebuggerEventExtraInfo): Link undefined if (!activeSub !shouldTrack activeSub === this.computed) return ...
[AI]Vue编译阶段和运行时
在Vue.js中，编译阶段和运行时的概念与其他编程语言中的编译和运行时有些类似，但也有Vue的特定特性。Vue的编译过程涉及模板的解析与转化，而运行时则是指应用的执行阶段。Vue 编译阶段（Compile Time）Vue的编译阶段主要是指将模板（template）、脚本（script）和样式...
[AI] Vue3为什么要用proxy
Vue 3 采用了 Proxy 来实现响应式系统，主要是为了克服 Vue 2 使用的 Object.defineProperty 的局限性，并提高响应式数据的灵活性和性能。原因包括以下几点：监听数组与对象的动态属性：在 Vue 2 中，Object.defineProperty 只能监听对象已...
Vue3源码：响应式变量值变化执行流程
响应式变量赋值响应式变量commits首次赋值接口所返回的数据进入触发Proxy的set拦截【在createApp的实例化的过程中，就已经将data选项响应化，可以参考之前的文章】最终进入trigger函数
Vue3源码：选项式API中的data如何响应化？
mount挂载过程中，render函数中patch是核心部分【Vue3源码debugger：createApp以及mount挂载】【patch内部】app._instance的值为vnode的component选项的data响应化在该部分内部完成进入内部processComponent中处理“...
Vue3源码：reactivity响应式原理
前言：本文讲述vue源码中的reactivity模块，也就是响应式核心模块。建议先看如下文章：Vue3源码debugger：createApp以及mount挂载applyOptions在组件的一系列初始化之后，来到参数初始化（applyOptions）applyOptions方法中，将传入的各...
Vue3源码：createApp以及mount挂载
前言：本文探讨Vue3框架中createApp函数与mount方法的大致工作机制。首先介绍深入源码的工具和方式，而后介绍vue源码项目架构，最后详述vue创建实例应用的大致流程。一、前序调试准备工作通过浏览器debugger调试的第一视角，了解代码的执行机制：vue3源码地址：https://...
Vue系统学习（一）特性和选项式API
官方文档：Vue.js一、Virtual DOM, Render, diff利用JavaScript脚本操作DOM的行为是性能损耗的大头，故产生虚拟DOM的概念。初始化在内存中得到相应的虚拟DOM树，然后将该结果一次性作用于真实DOM，逻辑层的变动导致部分视图层的改变这渲染逻辑也是经过虚拟DO...
Vue系统学习（二）组合式API
前言：vue3所使用的风格同时亦使用组合式API编程风格Vue.js - 渐进式 JavaScript 框架 Vue.jsVue3.2 setup语法糖总结基础变动：setup语法糖 Vue3.2之后才能放到script里面data methods 都不再需要，也不再需要return路由相...
Vue组件通信
之前写了一篇关于 vue 面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的作者简介：koala，专注完整的 Node.js 技术栈分享，从 JavaScript 到 Node.js, 再到后端数据库，祝您成为优秀的高级 Node.js 工程师。【程...