美文网首页
vue 数据更新驱动试图

vue 数据更新驱动试图

作者: 晗笑书生 | 来源:发表于2020-04-22 22:24 被阅读0次

官方原理图

image.png

参考如下所示:


IMG_0447 2.PNG

调试分析

image.png

数据改变 驱动试图改变的调用栈如右图所示

changeMsg this.msg === '111'的变化 触发了proxySetter(val) 代理到了this._data.msg = '111' 触发了reactiveSetter -触发setter的dep.notify 派发更新 触发了queueWatch ->nextTick -> flushCallbacks flushSchedulerQueue 触发了watcher.run 触发了渲染watcher的get求值 this.getter.call 就是 渲染watcher的 getter updateComponent 当成getter传入到渲染watcher中去的

// vm._render() 返回对应的VNode  经过patch patchNode diff 等 patch就是把vnode 映射成 dom  通过insert 插入到父节点中去
 updateComponent = function () {
      vm._update(vm._render(), hydrating);
    };
// 2次代理 代理到vm上去的
function proxy (target, sourceKey, key) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  };
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val;
  };
  Object.defineProperty(target, key, sharedPropertyDefinition);
}
Watcher.prototype.run = function run () {
  if (this.active) {
    var value = this.get();
    if (
      value !== this.value ||
      // Deep watchers and watchers on Object/Arrays should fire even
      // when the value is the same, because the value may
      // have mutated.
      isObject(value) ||
      this.deep
    ) {
      // set new value
      var oldValue = this.value;
      this.value = value;
      if (this.user) {
        try {
          this.cb.call(this.vm, value, oldValue);
        } catch (e) {
          handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
        }
      } else {
        this.cb.call(this.vm, value, oldValue);
      }
    }
  }
};
/**
 * Evaluate the getter, and re-collect dependencies.
 */
Watcher.prototype.get = function get () {
  pushTarget(this);
  var value;
// 当前vue的实例 vueComponent this.getter new渲染Watcher的定义了 updateComponent
  var vm = this.vm;
  try {
    value = this.getter.call(vm, vm);
  } catch (e) {
    if (this.user) {
      handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
    } else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    if (this.deep) {
      traverse(value);
    }
    popTarget();
    this.cleanupDeps();
  }
  return value
};
image.png
// mountComponent
function mountComponent (
  vm,
  el,
  hydrating
) {
  vm.$el = el;
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode;
}
     
  callHook(vm, 'beforeMount');

  var updateComponent;

    updateComponent = function () {
      vm._update(vm._render(), hydrating);
    };


  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */);
  hydrating = false;

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true;
    callHook(vm, 'mounted');
  }
  return vm
}

相关文章

  • vue 数据更新驱动试图

    官方原理图 参考如下所示: 调试分析 数据改变 驱动试图改变的调用栈如右图所示 changeMsg this.ms...

  • Vue.$nextTick用法

    vue是数据驱动视图更新,但vue数据变化后,视图不会立即更新,而是异步的过程.具体的更新时机参考主队列,异步队列...

  • Vue的响应式原理和双向数据绑定

    Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新 Vue2.x是借助Object.definePr...

  • 记录简单实现Vue2中的响应式原理

    Vue是数据驱动视图模式,数据变更后,会自动更新视图。 原生js中要更新视图通常是通过触发事件,然后修改数据,最后...

  • vue原理

    Vue原理 未经允许 禁止转载 MVVM 数据驱动视图 传统组件只是静态渲染,更新还要依赖于操作DOM vue M...

  • 深入理解之Vue nextTick

    一.定义【nextTick, 事件循环】 nextTick的由来由于vue是数据驱动视图更新,是异步的,即修改数据...

  • 2. vue 原理

    1. 组件化基础 1.1 如何理解 VUE 的 MVVM 模型?知识点: 数据驱动试图 传统组件,只是静态渲染,更...

  • Vue异步更新队列及nextTick

    vue通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM。Vue的dom更新是异步的,当数据发生变化...

  • vue中组件通信方式

    学习 2019-6-19 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之...

  • VUE组件间通信

    vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要。组件是vue的强大功能之一,而组件间的...

网友评论

      本文标题:vue 数据更新驱动试图

      本文链接:https://www.haomeiwen.com/subject/olnwihtx.html