Vue
xj-L
哈哈哈哈哈哈
展开
-
Vue生命周期
先放一张官方文档图:钩子函数从图中可以看到Vue生命周期中的几个钩子函数Vue2.0生命周期钩子函数 描述 beforeCreate 组件实例刚被创建,$data、$el等都为undefined created 组件实例创建完成,$data数据已经绑定,但$el尚未声明,为undefined beforeMount 组件挂载之前,$el属性已经生...原创 2018-07-25 11:50:27 · 177 阅读 · 0 评论 -
Vue.js 内部运行机制 (一) ---- 响应式系统基本原理
最近准备好好看看《Vue的内部运行机制》,学到什么就写什么,先介绍Vue的响应式主要核心APIObject.defineProperty(obj, key, descriptor)descriptor其中有几个属性:configurable --》属性可配置性,属性是否可修改或删除,默认falseenumerable --》属性可枚举性,默认falsevalue --》属性值...原创 2018-08-03 17:02:10 · 845 阅读 · 0 评论 -
Vue.js 内部运行机制 (二) ---- 响应式系统的依赖收集追踪原理
为什么需要依赖收集? 1、在 Vue 中,我们可能更新了不用更新视图的数据,如果没有依赖收集,则也会调用更新视图的 cb 函数,显然这是不合理的2、Vue 页面中可能多处引用同一个 Vue 组件对象,更新响应式数据时,则应当更新多处视图,这些都涉及依赖收集 首先的订阅者 Dep 类/** * 依赖收集类 */class Dep { constructor() {...原创 2018-08-05 14:48:51 · 1171 阅读 · 1 评论 -
Vue.js 内部运行机制 (三) ---- Virtual DOM 的实现
在这一节我们主要学习简单的Virtual Dom的实现VNode类VNode 归根结底就是一个 JavaScript 对象,只是通过类的属性可以正确直观地知道当前节点的信息即可。这是最简单的实现。/** * virtual node生成类 * 去除复杂的情况 */class VNode { constructor(tag, data, children, text,...原创 2018-08-05 18:42:13 · 348 阅读 · 0 评论 -
Vue.js 内部运行机制 (五) ---- 数据状态更新时的差异 diff 及 patch 机制
之前我们说到响应式、依赖收集、Virtual Dom,下一步应该就是比较我们的新旧节点树(Diff),update 更新视图,最终是将新产生的 VNode 节点与老 VNode 进行一个 patch 的过程,比对得出「差异」,最终将这些「差异」更新到视图上注:本文中图片都来自掘金小册《数据状态更新时的差异 diff 及 patch 机制》附上自己梳理的一份 Diff 思维导图跨平台的A...原创 2018-08-07 16:09:01 · 1432 阅读 · 0 评论 -
Vue.js 内部运行机制(六)---- 批量异步更新策略及 nextTick 原理
之前我们学到了 Vue 更新数据是如何更新视图的。简单回顾数据更新(setter)-> 通知依赖收集集合(Dep) -> 调用所有观察者(Watcher) -> 比对节点树(patch) -> 视图在更新视图这一步,使用异步更新策略为什么呢?引用小册中的例子,下面有一个这样的 Vue 组件<template> <div> ...原创 2018-08-08 11:22:08 · 2518 阅读 · 0 评论