vue2源码浏览分析01

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.构造函数  Vue$3

function Vue$3 (options) {
  if ("development" !== 'production' &&
    !(this instanceof Vue$3)) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
　　//执行初始化方法
  this._init(options);
}

initMixin(Vue$3);
stateMixin(Vue$3);
eventsMixin(Vue$3);
lifecycleMixin(Vue$3);
renderMixin(Vue$3);
//设置原型

initGlobalAPI(Vue$3);
//绑定数据到构造函数上

Vue$3.version = '2.2.2';

Vue$3.config.mustUseProp = mustUseProp;        //必须使用的的props
Vue$3.config.isReservedTag = isReservedTag;        //是否是本地htmlht svg
Vue$3.config.getTagNamespace = getTagNamespace;      // 是否是svg  math
Vue$3.config.isUnknownElement = isUnknownElement;       //是否是未知标签   替换HTMLUnknownElement
//设置config配置

extend(Vue$3.options.directives, platformDirectives);     //绑定默认的两个指令到全局  v-model,v-show
extend(Vue$3.options.components, platformComponents);     //绑定默认的两个组件到全局  transition ,transitionGroup  
//设置directives 和 components

Vue$3.prototype.__patch__ = inBrowser ? patch : noop;
//其他函数

Vue$3.prototype.$mount = function (el, hydrating) {      //挂载的方法
  el = el && inBrowser ? query(el) : undefined;
  return mountComponent(this, el, hydrating)
};
//绑定$mount方法

Vue$3.compile = compileToFunctions;                //将template   转换为  rander对象中 可以执行函数
//设置编译函数

initGlobalAPI(Vue$3);

//在 Vue 的构造函数添加方法和属性，提供全局变量和函数
function initGlobalAPI (Vue) {
  var configDef = {};
  configDef.get = function () { return config; };
  {
    configDef.set = function () {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      );
    };
  }
　　//设置 Vue 的config属性
  Object.defineProperty(Vue, 'config', configDef);
  Vue.util = {
    warn: warn,      //错误提示函数，传入msg和vm
    extend: extend,      //简单的扩展方法
    mergeOptions: mergeOptions,     // 合并初始化的参数，并执行之心合并策略
    defineReactive: defineReactive$$1    //
  };
  Vue.set = set;      //定义set方法，在(target,key,val)  在target上定义属性，如果该属性被观察则更新数据
  Vue.delete = del;    //定义del方法  在(target，key)  删除key属性 ，如果该属性呗观察，则更新数据
  Vue.nextTick = nextTick;    //绑定延时程序，数据改变后观察数据变化
  Vue.options = Object.create(null);   //绑定 Vue 构造函数的  options
  config._assetTypes.forEach(function (type) {    
    Vue.options[type + 's'] = Object.create(null);         //绑定 compontnents  , dereactors  , filters对象 到构造函数options上
  });
  Vue.options._base = Vue;     // 将构造函数的options._base指向 Vue
  extend(Vue.options.components, builtInComponents);     //合并本地的 KeepAlive 到 构造函数的options.components中





defineReactive$$1 

function defineReactive$$1 (obj, key, val, customSetter) {
  //创建一个观察队列   用来存储当该数据改变时候要触发的对象，或者数据
  var dep = new Dep();
  var property = Object.getOwnPropertyDescriptor(obj, key);
  if (property && property.configurable === false) {
    return
  }
　　//获取 js 中的访问器 get/set 
  var getter = property && property.get;
  var setter = property && property.set;
　　
　　//创建或返回一个 __ob__
  var childOb = observe(val);
  Object.defineProperty(obj, key, {   //给当前对象重新定义  get/set  方法，当对象被重新设置set方法时候  触发 所有依赖该数据的  数据更新 __ob__
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val;
      if (Dep.target) {
        dep.depend();
        if (childOb) {
          childOb.dep.depend();
        }
        if (Array.isArray(value)) {
          dependArray(value);
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val;
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if ("development" !== 'production' && customSetter) {
        customSetter();
      }
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      childOb = observe(newVal);    //给新的数据添加监听__ob__
      dep.notify();         // 更新所有依赖该数据的数据
    }
  });
}

initUse(Vue);        //绑定  Vue.use(obj)  函数，安装插件  插件对象obj必须有  install 属性
initMixin$1(Vue); 　　　　//绑定 Vue.mixin(obj)   将绑定的 直接合并到 options 上面
initExtend(Vue); 　　　　　//创建一个集成 Vue 的子类，用于创建公共的自定义  组件构造函数类
initAssetRegisters(Vue); }     //绑定Vue.component , Vue,dereactor , Vue.filter 方法，用于注册 组件，指令，过滤器  并添加到 构造函数的options中

大部分是绑定到 Vue 的构造函数上面，为全局方法和属性。




http://www.cnblogs.com/jiebba/p/6544084.html 

个人博客 ：很多好用的 npm 包 ， 可以看看  https://gilea.cn/　

http://www.cnblogs.com/jiebba    我的博客，来看吧！

如果有错误，请留言修改下 哦！

 

以上是 vue2源码浏览分析01 的全部内容， 来源链接： utcz.com/z/378801.html

回到顶部