![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue源码
Happy_Boy_z
不可能打工的,这辈子都不可能打工的,树林里程序猿个个都是人才,说话又好听~~~~
展开
-
vue源码系列08_computed属性
vue源码系列07_computed属性state.jswatcherstate.js给state添加 initComputed 方法工作流程:计算属性是有缓存的,我们要创建两个变量存数据遍历computed的值,创建带{dirty:true}的watcher,并保存到watchers对象中当用户取值的时候,获取当前watcher运行evalValue()进行运算编写watcher用dirty保存值是否改变,判断其是否需要重新计算取出watcher中的dep,触发depend()添加渲染的原创 2020-05-17 11:39:32 · 170 阅读 · 0 评论 -
vue源码系列07_watch属性
watch方法state.js$watch修改watcherinitWatch()state.js在该方法中,保存了vue实例初始的5种属性,我们找到watch属性的位置,编写其方法即可import { observe } from './observer/index.js'import Watcher from './watcher.js';import Dep from './observer/dep.js';export function initState(vm) { const原创 2020-05-17 11:10:14 · 154 阅读 · 0 评论 -
vue源码系列06_实现数组的依赖收集
vue源码系列06_实现数组的依赖收集observer.js总结observer.js在初始化数据的时候,创建一个数组专用的dep给每个对象添加一个 ob 属性,主要是用于保存当前实例对象(this)在 array.js 中在数据改变时,触发数组专用dep的notify()派发更新修改 defineReactive 方法export function defineReactive(data, key, value) { let childOb = observe(value) //原创 2020-05-17 10:55:29 · 460 阅读 · 0 评论 -
vue源码系列05_发布订阅模式
vue源码系列05_依赖收集dep.jswatcher.jsdefineReactive()所谓依赖收集,就是在每个数据渲染更新的时候,给每个数据添加一个watcher监听类,当该数据发生变化时,用一个dep队列来实现收集这些watcher,最后统一渲染,以下为依赖收集的流程dep.js主要的操作:给不同的dep赋一个id创建sub数组(实际上是队列)创建stack栈,创建保存watcher与取出watcher的方法,并且让 Dep.target 得到当前 watcher (后面有用到)主原创 2020-05-16 22:19:45 · 238 阅读 · 0 评论 -
vue源码系列04_数据渲染(原始版)
@toc原创 2020-05-16 15:07:15 · 150 阅读 · 0 评论 -
vue源码系列03_数组劫持
vue源码系列03_数组劫持重写方法array.js重写方法由于是数组的话并不会对索引进行观测,因为会导致性能问题,因为前段开发中很少去操作索引 咱用的更多是 push shift unshitf我们在Observer类开头使用 observerArray() 来对数组中的每一个数据进行监控所以我们可以采用给数组方法上添加一个代理(也就是我们在执行原本数组的方法之前,我们预先进行一些操作)if (Array.isArray(value)){ value.__proto__ = arra原创 2020-05-16 10:35:27 · 265 阅读 · 1 评论 -
vue源码系列02_数据监控与劫持
Vue实例在src目录下创建一个index.js该模块主要放的就是vue实例(核心代码放置的位置)// vue 核心代码 只是Vue的一个声明function Vue(options){ }export default Vue当我们需要进行初始化,渲染,监控等流程的时候,再向其中导入对应的方法。由此可见,该模块是用于整合其他方法初始化操作因为我们在页面刚加载的时候,需要对页面等操作进行渲染,如 data,computed,watch等进行初始化,所以我们需要vue实例创建的时候,运行原创 2020-05-16 10:00:19 · 288 阅读 · 0 评论 -
vue源码系列01_环境搭建
导包依次使用 npm install 下载如下包rollup 打包工具@babel/core 用babel核心模块@babel/preset-env (babel将高级语法转成低级语法)rollup-plugin-babel (桥梁)rollup-plugin-serve (实现静态服务)cross-env (设置环境变量)相关配置在根目录下创建rollup.config.jsimport babel from 'rollup-plugin-babel';import serve原创 2020-05-15 16:50:35 · 203 阅读 · 0 评论