会把源码文件在内部转为 node 模块，vue 文件中的 script 内容也被转换了，其中的 __filename 在编译时被运行，直接得到当前文件自身路径使用这个变量还需要在 webpack 配置中启用 node__filename*。

1 在Vue中，每个组件都有一个对应的虚拟DOM树，它是一个以组件根节点为起点的JavaScript对象2 当数据发生改变时，Vue会重新计算虚拟DOM树的结构，并和旧的虚拟DOM树进行比较3 在比较过程中，Vue使用Diff算法来找出。

click1这是简单到不能在简单的一个点击事件我们来看看建立这么一个简单的点击事件，vue中发生了什么1new Vue中调用了initStatevue看代码function initState vm vm_watchers = var opts = vm$options if。

一先来实现前端部分第一步搭建Vue框架Vue我也是第一次接触，看了半天多的文档才有了大概的了解先不过多考虑前端的实现，首先考虑一下前后台沟通的问题用vuecli搭建一个新框架，在Helloworldvue 或者新建一个模板。

以往我们在开发vue项目的时候，总是通过将路径和路由写在routeindexjs文件中，然后直接进行访问即可，一般实现权限匹配都是通过菜单下面的权限参数和路由守卫进行一个验证拦截和权限匹配，然而这样安全性仍然不足因为我们在routeindexjs中。

1首先，从git上拉取element的源码 2安装依赖 npm install 3修改 packages 中的源码，然后进行打包 npm run dist 4找到你的项目中的 node_modules 包下的 elementui 文件夹下的 lib 包，用你修改好后打包生成的。

这个功能比较简单，在处理prop中做个判断， 属性是否满足 ^onAZi这个格式，如果是这个格式，则进行事件注册，但是vue3会做事件缓存，这个是怎么做到缓存也好实现，在传入当前的el中增加一个属性 el_vei el。

很多介绍vue源码的文章对computed怎么计算值讲的很清楚，但是对computed 怎么搜集到依赖它的视图渲染watcher，以及怎么去通知对应的渲染watcher去更新讲解的很模糊或者干脆一笔带过这篇文章主要讲解computed watcher是怎么搜集。

这三个月用reactnative做了个项目， 也无心总结了， 因为好像太简单了本文叙事方式为树藤摸瓜， 顺着看源码的逻辑走一遍， 查看的vue的版本为252 我fork了一份源码用来记录注释目的明确调查方向才能直至目标， 先说一下目标。

Vue项目创建完成后，使用WebStorm打开项目，项目目录如下build文件夹，用来存放项目构建脚本 config中存放项目的一些基本配置信息，最常用的就是端口转发 node_modules这个目录存放的是项目的所有依赖，即npminstall命令下载下来的。

在vue中，可以使用onEvent来写事件，那么这个功能是怎么实现的呢，咋们一起来看看 在本功能的测试用例中，可以分析以下内容解决问题这个功能比较简单，在处理prop中做个判断， 属性是否满足 ^onAZi这个格式，如果。

srclazyjs 定义变量接收实例化参数lazyjs 默认导出一个函数，该函数返回一个 Lazy 类，形成闭包，保持对 Vue 的引用判断是否支持Webp图片 srclistenerjs 定义变量接收实例化参数filter 方法将配置的 filter。

使用过 Vue 的小伙伴们肯定都知道，Vue 的内部组件 keepalive 是用来缓存我们不活动的组件的但是在某些情况下，我们需要缓存，某些情况下希望及时释放掉缓存，那我们应该怎么做呢有个场景是，希望模仿App的方式，每次。

前段时间做项目，技术栈是vue+webpack，主要就是官网首页加后台管理系统 根据当时情况，分析出三种方案一个项目代码里面嵌两个spa应用官网和后台系统分开两套项目源码一套项目源码里面就一个spa应用思考直接否定了一套项目。

在项目开发中，我们的项目一般分为开发版测试版Pre版Prod版Vuecli的默认环境一只有dev和prod两个，之前每次要发布测试版或Pre版都是修改了源码中API地址后打包，这样很麻烦如果能根据不同环境打包就完美了网上。

Vue 中 key 很多人都弄不清楚有什么作用，甚至还有些人认为不绑定 key 就会报错其实没绑定 key 的话，Vue 还是可以正常运行的，报警告是因为没通过 Eslint 的检查接下来将通过源码一步步分析这个 key 的作用Virtual。