Vue2.6 源码剖析
Vue.js 源码剖析 学习记录
皮蛋很白
没有什么难点是一觉醒来解决不了的
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue 2.6 源码剖析-组件化
组件化回顾Vue 的核心组成只有 数据绑定 和 组件化。一个 Vue 组件就是一个拥有预定义选项的一个 Vue 实例。一个组件可以组成页面上一个功能完毕的区域,组件可以包含脚本、样式、模板。组件化可以方便的把页面拆分成多个可重用的组件。使用组件可以重用页面中的某个区域。组件是可以嵌套的,搭建页面就像搭积木。组件注册方式全局组件 Vue.component在全局可以使用局部组件在当前注册的范围中使用全局组件的注册过程Vue.component 注册全局组件原创 2020-08-12 21:46:22 · 413 阅读 · 0 评论 -
Vue 2.6 源码剖析-模板编译
模板编译介绍模板编译的主要目的是将模板(template)转换为渲染函数(render)。模板编译的作用Vue 2.x 使用 VNode 描述视图以及各种交互,用户自己编写 VNode (直接写render,调用h函数)比较复杂用户只需要编写类似 HTML 的代码 - Vue.js 模板,通过编译器将模板转换为范围 VNode 的render函数.vue文件(SFC)会被webpack在构建的过程中转换成render函数内部通过 vue-loader 实现体验模板编译的结果原创 2020-08-12 21:45:55 · 838 阅读 · 0 评论 -
Vue 2.6 源码剖析-虚拟DOM
学习目标分析Vue中虚拟DOM的实现虚拟DOM创建的过程与虚拟DOM相关的一些函数,如h 函数patch 函数patchVnode 函数v-for 中使用 key 的好处虚拟DOM相关回顾什么是虚拟DOM虚拟DOM(Virtual DOM) 是使用 JavaScript 对象描述真实 DOM虚拟DOM的本质就是JavaScript对象程序的各种变化首先作用于虚拟DOM,最终映射到真实DOMVue.js 中的虚拟DOM借鉴了 Snabbdom,并添加了 Vue.js原创 2020-08-12 21:45:20 · 402 阅读 · 0 评论 -
Vue 2.6 源码剖析-响应式原理学习 - 4.其他方法
vm.$setvm.$set 是全局 Vue.set 的别名,它们是同一个方法。用法:向响应式对象中添加一个属性,并且确保这个新属性同样是响应式的。当数据发生变化的时候,它会触发视图的更新。注意:它必须用于向响应式对象上添加新属性因为 Vue 无法探测到普通对象上新增的属性。如果这个属性已存在并且不是响应式的,set方法会更新它的值,但不会把它转化成响应式的。对象不能是 Vue实例,或者 Vue 实例的根数据对象($data)。<div id="app"> {{ o原创 2020-08-12 19:38:51 · 331 阅读 · 0 评论 -
Vue 2.6 源码剖析-响应式原理学习 - 3.数据响应式原理
数据响应式原理数据响应式 和 双向绑定机制 是使用数据驱动开发的基石。数据响应式:当数据发生变化,自动更新视图,不需要手动操作DOM。响应式处理入口整个响应式处理的过程是比较复杂的。在构造函数中,调用了 src/core/instance/init.js 中的 _init 方法在 _init 方法中调用了 src/core/instance/state.js中定义的 initState(vm):初始化 Vue 实例的状态初始化了 data、props、methods等initStat原创 2020-08-12 19:37:21 · 420 阅读 · 0 评论 -
Vue 2.6 源码剖析-响应式原理学习 - 2.初始化
Vue 初始化初始化的过程platforms 目录下是和平台相关的代码。先查看 src/platforms/web 下打包 Vue 的入口文件(entry-*.js):entry-runtime.js 打包运行时版本的入口文件entry-runtime-with-compiler.js 打包完整版的入口文件// entry-runtime.js 源码只有两行// 导入Vue的构造函数import Vue from './runtime/index'// 导出export defau原创 2020-08-12 19:33:09 · 691 阅读 · 0 评论 -
Vue 2.6 源码剖析-响应式原理学习 - 1.起手
学习目标Vue.js 的静态成员和实例成员初始化过程静态成员如:Vue.use、Vue.set、Vue.nextTick实例成员如:vm.el、vm.el、vm.el、vm.set、vm.$mount首次渲染的过程数据响应式原理准备工作获取源码项目地址:https://github.com/vuejs/vueFork 一份到自己的仓库,克隆到本地,可以自己写注释提交到 github注意提交的时候要按照规范写提交日志,否则提交失败例如:docs: 乱写一通版本选原创 2020-08-12 19:26:50 · 717 阅读 · 0 评论
分享