vue.js 源代码学习笔记 ----- Dep

/* @flow */

import type Watcher from ‘./watcher‘
import { remove } from ‘../util/index‘

let uid = 0

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    // stabilize the subscriber list first , 避免改动影响到原来的数组
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null
const targetStack = []

export function pushTarget (_target: Watcher) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}

export function popTarget () {
  Dep.target = targetStack.pop()
}
时间: 2024-10-09 01:55:02

vue.js 源代码学习笔记 ----- Dep的相关文章

vue.js 源代码学习笔记 ----- helpers.js

/* @flow */ import { parseFilters } from './parser/filter-parser' export function baseWarn (msg: string) { console.error(`[Vue parser]: ${msg}`) } export function pluckModuleFunction ( modules: ?Array<Object>, key: string ): Array<Function> {

vue.js 源代码学习笔记 ----- core lifecycle

/* @flow */ import config from '../config' import Watcher from '../observer/watcher' import { mark, measure } from '../util/perf' import { createEmptyVNode } from '../vdom/vnode' import { observerState } from '../observer/index' import { updateCompon

vue.js 源代码学习笔记 ----- fillter-parse.js

/* @flow */ export function parseFilters (exp: string): string { let inSingle = false let inDouble = false let inTemplateString = false let inRegex = false let curly = 0 let square = 0 let paren = 0 let lastFilterIndex = 0 let c, prev, i, expression,

vue.js 源代码学习笔记 ----- codegenEvents.js

/* @flow */ const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/ const simplePathRE = /^\s*[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?']|\[".*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*\s*$/ // keyCode aliases const keyCodes = { esc: 27, tab:

vue.js 源代码学习笔记 ----- keep-alives

/* @flow */ import { callHook } from 'core/instance/lifecycle' import { getFirstComponentChild } from 'core/vdom/helpers/index' const patternTypes = [String, RegExp] function matches (pattern: string | RegExp, name: string): boolean { if (typeof patt

vue.js 源代码学习笔记 ----- decoder

/* @flow */ let decoder export function decode (html: string): string { decoder = decoder || document.createElement('div') decoder.innerHTML = html return decoder.textContent }

从零开始学习Vue.js,学习笔记

一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上

分享:json2.js源代码解读笔记

1. 怎样理解"json" 首先应该意识到,json是一种数据转换格式,既然是个"格式",就是个抽象的东西.它不是js对象,也不是字符串,它仅仅是一种格式,一种规定而已. 这个格式规定了如何将js对象转换成字符串.以及转换成如何的字符串--序列化 -- JSON.stringify 接口: 以及怎样将一个有效字符串转换成js对象--反序列化-- JSON.parse 接口: 2. 关于作者 json作者是 道格拉斯.克劳福德 ,是一位js大牛,写过一本<jav

Vue.js 基础学习

今天我开始了Vue.js 的学习. 那么什么是Vue.js 呢? Vue.js是一套开发Web页面的JavaScript脚本框架.听起来感觉很难,不过据说,Vue.js是Web-Javascript脚本框架中最容易上手的框架.所以我便选择了先来学习这个. 要学习Vue.js首先就要获取库文件了,在网上有很多地方可以找到,我是在bootcdn上找到的 接下来我们通过Vue输出一串Hello World ! 首先引入vue. <script src="https://cdn.bootcss.c