开发猫

目录深入响应式原理响应式对象Object.definePropertyinitStateproxyobserveObserverdefineReactive依赖收集DepWatcher过程分析派发更新过程分析nextTickJS 运行机制Vue 的实现检测变化的注意事项对象添加属性数组计算属性 VS 侦听属性c...

我们之前提到过 Vue.js 构建过程，在 web 应用下，我们来分析 Runtime + Compiler 构建出来的 Vue.js，它的入口是src/platforms/web/entry-runtime-with-compiler.js：/* @flow */import config from 'core/config'import { warn, cached ...

Vue.js 源码是基于Rollup构建的，它的构建相关配置都在 scripts 目录下。构建脚本通常一个基于 NPM 托管的项目都会有一个 package.json 文件，它是对项目的描述文件，它的内容实际上是一个标准的 JSON 对象。我们通常会配置script字段作为 NPM 的执行脚本，Vue.js 源码构建的脚本如下：{"script": {...

目录数据驱动new Vue 发生了什么Vue 实例挂载的实现数据驱动Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM ...

renderVue 的_render方法是实例的一个私有方法，它用来把实例渲染成一个虚拟 Node。它的定义在src/core/instance/render.js文件中：Vue.prototype._render = function (): VNode {const vm: Component = thisconst { render, _parentVnod...

updateVue 的_update是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；由于我们这一章节只分析首次渲染部分，数据更新部分会在之后分析响应式原理的时候涉及。_update方法的作用是把 VNode 渲染成真实的 DOM，它的定义在src/core/instance/lifecycle.js中：Vue.prototype._u...

目录组件化createComponent构造子类构造函数安装组件钩子函数实例化 VNode总结patchcreateComponent总结合并配置外部调用场景组件场景总结组件化Vue.js 另一个核心思想是组件化。所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放...