【js】vue 2.5.1 源码学习 （九） 响应数组对象的变

大体思路（八）

本节内容：

1.Observe 如何响应数组的变化

代理原型 数组变异方法

shell cacheArrProto methods

新添加的数组需要加到显示系统里面，拦截 push等的方法

swith(method){

　　case:"push"/"unshift" : 存储东西}

　　observer.prototype.observeArray = function(items){

　　observe(item[i])

}

observe

　　==> var augment = hasProto ? protoAugment : copyAugment ;

　　==> augment(value, shell)

protoAugment(target,shell) ==> 非ie

target._proto = shell

copyAugment(target,src,arrayKeys) ==> ie

　　==> def(target,key,src[key])

vue.js代码如下

 //  大体思路（八）
 //  本节内容：
 //  1.Observe 如何响应数组的变化
 //      代理原型  数组变异方法
 //      shell cacheArrProto methods
 //      新添加的数组需要加到显示系统里面，拦截 push等的方法
 //      swith(method){
 //         case:"push"/"unshift"  : 存储东西}
 //      observer.prototype.observeArray = function(items){
 //            observe(item[i])
 //     }
 // observe
 //  ==>  var augment =   hasProto  ? protoAugment : copyAugment ;
 //  ==>  augment(value, shell)

 //  protoAugment(target,shell) ==> 非ie
 //  target._proto = shell
 //  copyAugment(target,src,arrayKeys)  ==> ie
 //     ==>  def(target,key,src[key])

 (function (global, factory) {
     // 兼容 cmd
     typeof exports === 'object' && module !== 'undefined' ? module.exports = factory() :
     // Amd
     typeof define === 'function' && define.amd ? define(factory) : global.Vue = factory();
 })(this, function () {
     var uip = 0;

     function warn(string) {
         console.error('Vue Wran:' + string)
     }

     function warnNonpresent(target, key) {
         warn('属性方法' + key + '未在实例对象上定义，渲染功能正在尝试访问这个不存在的属性！')
     }

     function resolveConstructorOptions(Con) {
         var options = Con.options;
         // 判断是否为vm的实例 或者是子类
         return options
     }
     var hasOwnPropeerty = Object.prototype.hasOwnProperty

     function hasOwn(obj, key) {
         return hasOwnPropeerty.call(obj, key)
     }

     function makeMap(str, expectsLoweraseC) {
         if (expectsLoweraseC) {
             str = str.toLowerCase()
         }
         var map = Object.create(null)
         var list = str.split(',')
         for (var i = 0; i < list.length; i++) {
             map[list[i]] = true
         }
         return function (key) {
             return map[key]

         }
     }
     var isbuiltInTag = makeMap('slot,component', true)
     var isHTMLTag = makeMap(
         'html,body,base,head,link,meta,style,title,' +
         'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
         'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' +
         'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
         's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
         'embed,object,param,source,canvas,script,noscript,del,ins,' +
         'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
         'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
         'output,progress,select,textarea,' +
         'details,dialog,menu,menuitem,summary,' +
         'content,element,shadow,template,blockquote,iframe,tfoot'
     );
     var isSVG = makeMap(
         'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' +
         'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
         'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
         true
     );

     var ASSET_TYPES = [
         'component',
         'directive',
         'filter'
     ];

     var LIFECYCLE_HOOKS = [
         'beforeCreate',
         'created',
         'beforeMount',
         'mounted',
         'beforeUpdate',
         'updated',
         'beforeDestroy',
         'destroyed',
         'activated',
         'deactivated',
         'errorCaptured'
     ];
     var methods = [
         'push',
         'pop',
         'shift',
         'unshift',
         'splice',
         'sort',
         'reverse'
     ];
     var cacheArrProto = Array.prototype
     var shell = Object.create(Array.prototype)
     methods.forEach(function(method){
         var cacheMethod = cacheArrProto[method]
         def(shell,method,function(){
             var args = []
             var len = arguments.length
             while(len--) args[len] = arguments[len]
             var result = cacheMethod.apply(this,args)  // 调用原来的方法
             var ob = this.__ob__;
             var inserted ;
             switch(method){
                 case 'push' :
                 case 'unshift':
                 inserted = args
                 case 'splice':
                 inserted = args.slice(2);
             }
             if(inserted){
                 ob.observeArray(inserted)  // 奖新加入的数组加入到显示系统里面。
             }
             ob.dep.notify();
             return result;  //返回数组原来的答案，
         })
     })
     var arrayKeys = Object.getOwnPropertyNames(shell)
     var hasProto = '__proto__' in {}
     var noop = function () {}
     var isReservedTag = function (key) {
         return isHTMLTag(key) || isSVG(key)
     }
     // 检测data的属性名称是否为 _ 或者$ 开始的，这些的话是vue的其他属性的值。
     function isReserved(key) {
         var c = key.charCodeAt(0)
         return c === 0x24 || c === 0x5F
     }
     // 检查是否为对象
     function isObject(val) {
         return val !== null && typeof val === 'object'
     }

     function validataComponentName(key) {
         //检测component 的自定义名称是否合格
         // 只能是字母开头或下划线，必须是字母开头
         if (!(/^[a-zA-Z][\w-]*$/g.test(key))) {
             warn('组件的名称必须是字母或中横线，必须由字母开头')
         }
         // 1. 不能为内置对象，2.不能是html ,和avg的内部标签
         if (isbuiltInTag(key) || isReservedTag(key)) {
             warn('不能为html标签或者avg的内部标签')
         }
     }

     function checkComonpents(child) {
         for (var key in child.components) {
             validataComponentName(key)
         }
     }
     // 配置对象
     var config = {
         // 自定义的策略
         optionMergeStrategies: {}
     }
     var strats = config.optionMergeStrategies
     strats.el = function (parent, child, key, vm) {

         if (!vm) {
             warn('选项' + key + '只能在vue实例用使用')
         }
         return defaultStrat(parent, child, key, vm)
     }

     function mergeData(to, form) {
         // 终极合并
         if (!form) {
             return to
         }
         // 具体合并。
     }

     function mergeDataorFn(parentVal, childVal, vm) {
         // 合并 parentVal childVal  都是函数
         if (!vm) {
             if (!childVal) {
                 return parentVal
             }
             if (!parentVal) {
                 return childVal
             }
             return function mergeDataFn(parentVal, childVal, vm) { //只是一个函数   什么样的情况下调用 加入响应式系统
                 // 合并子组件对应的data 和   父组件对应的data
                 return mergeData(
                     typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal, // -----忘记写
                     typeof childVal === 'function' ? childVal.call(this, this) : childVal) // -----忘记写
             }
         } else { // vue实例
             return function mergeInstanceDataFn() { //只是一个函数   什么样的情况下调用 加入响应式系统
                 var InstanceData = typeof childVal === 'function' ? childVal.call(vm, vm) : childVal; // -----忘记写
                 var defaultData = typeof parentVal === 'function' ? parentVal.call(vm, vm) : parentVal; // -----忘记写
                 if (InstanceData) {
                     return mergeData(InstanceData, defaultData)
                 } else { // -----忘记写
                     return defaultData
                 }

             }
         }
     }
     strats.data = function (parent, child, key, vm) {
         if (!vm) {
             // console.log(typeof child === 'function')
             if (child && !(typeof child === 'function')) {
                 warn('data必须返回是一个function')
             }
             return mergeDataorFn(parent, child)
         }
         return mergeDataorFn(parent, child, vm)
     }
     // 生命周期策略的合并，值等于一个function 如果是有两个，放到一个数组里面。
     function mergeHook(parentVal, childVal, key, vm) {
         // console.log(key)
         // console.log(parentVal.concat(childVal) )
         return childVal ? parentVal ? parentVal.concat(childVal) :
             Array.isArray(childVal) ? childVal : [childVal] : parentVal
     }
     LIFECYCLE_HOOKS.forEach(function (key) {
         strats[key] = mergeHook
     });
     // 检测是否为object
     function isPlainObject(obj) {
         return Object.prototype.toString.call(obj) === '[object Object]'
     }

     function assetObjectType(obj) {
         if (!isPlainObject(obj)) {
             warn('选项的值' + obj + '无效：必须是一个对象的')
         }
     }
     // 对parent实现链式调用。
     function extend(to, form) {
         for (key in form) {

             to[key] = form[key]
         }
         return to
     }
     // 实现Assets 的策略合并  conmponents  filter  diretive
     function mergeAssets(parentVal, childVal, key, vm) {
         var parent = Object.create(parentVal || null) // 保证子类的每个值的指向都是一个新的object。否则回出现相互引用的现象。
         if (childVal) {
             assetObjectType(childVal)
             return extend(parent, childVal)
         }
         return parent
     }
     ASSET_TYPES.forEach(function (key) {
         strats[key + 's'] = mergeAssets
     })
     // 实现watch的策略和并，将相同的属性放到一个数组里面。
     strats.watch = function (parentVal, childVal, key, vm) {
         if (!childVal) {
             return Object.create(parentVal)
         }
         var res = {}
         res = extend(res, parentVal)
         for (var key in childVal) {
             var parent = res[key]
             var child = childVal[key]
             res[key] = parent ? Array.isArray(parent) ? parent.concat(child) : [parent].concat(child) :
                 Array.isArray(child) ? child : [child];
         }
         return res
     }
     // 实现props指令的合并策略
     strats.props = function (parentVal, childVal, key, vm) {
         if (!childVal) {
             return parentVal
         }
         var res = Object.create(null)
         extend(res, parentVal)
         if (childVal) {
             extend(res, childVal)
         }
         return res
     }

     function defaultStrat(parent, child, key, vm) {
         return child === undefined ? parent : child;
     }
     var cmalizeRE = /-(\w)/g

     function camelize(val) {
         return val.replace(cmalizeRE, function (c, m) {
             return m ? m.toUpperCase() : ""
         })
     }

     function normalizeProps(options) {
         var props = options.props
         if (!props) {
             return
         }
         var i, val, name
         var res = {}
         if (Array.isArray(props)) {
             i = props.length
             while (i--) {
                 val = props[i]
                 if (toString.call(val) === '[object String]') {
                     name = camelize(val)
                     res[name] = {
                         type: null
                     }
                 } else {
                     warn('使用数组愈发时props成员' + val + '必须时一个数组')
                 }

             }
         } else if (isPlainObject(props)) {
             for (var key in props) {
                 val = props[key]
                 name = camelize(key)
                 res[name] = isPlainObject(val) ? val : {
                     type: val
                 }
             }
         } else {
             warn('选项props的值必须是一个对象或者是数组')
         }
         options.props = res
     }

     function mormalizeDirectives(options) {
         var dir = options.directives
         var res = {}
         if (!dir) {
             return
         }
         if (dir) {
             for (var key in dir) {
                 var val = dir[key]
                 var name = camelize(key)
                 if (isPlainObject(val)) {
                     res[name] = val
                 }
                 if (toString.call(val) === '[object Function]') {
                     res[name] = {
                         bind: val,
                         upata: val
                     }
                 }
             }
         }
         options.directives = res

     }

     function mergeOptions(parent, child, vm) {
         var options = {}
         // 检测是component 是否是合法的
         checkComonpents(child)
         // 规范props
         normalizeProps(child)
         // 规范 dirctives
         mormalizeDirectives(child)

         // console.log(parent, child)
         for (key in parent) {
             magerField(key)
         }
         for (key in child) {
             if (!hasOwn(parent, key)) { // parent 中循环过地方不进行循环
                 magerField(key) // ----忘记写
             }

         }
         // 默认合并策略
         function magerField(key) {
             // 自定义策略  默认策略
             // console.log(key)
             var result = strats[key] || defaultStrat // ---忘记写
             options[key] = result(parent[key], child[key], key, vm)
         }
         // console.log(options)
         return options
     }

     var allowedGlobals = makeMap(
         'Infinity,undefined,NaN,isFinite,isNaN,' +
         'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
         'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
         'require' // for Webpack/Browserify
     );

     function isNative(Ctor) {
         return typeof Ctor !== undefined && /native code/.test(toString.call(Ctor))
     }
     var hasproxy = typeof Proxy !== undefined && isNative(Proxy)
     var hasHeadler = {
         has: function (target, key) {
             var val = key in target
             // key 是否是全局对象 或者内置方法 _
             var isAllowed = allowedGlobals(key) || (typeof key === 'string' && key.charAt(0) === '_')
             if (!val && !isAllowed) {
                 warnNonpresent(target, key)
             }
             return val || !isAllowed
         }
     }
     var getHeadler = {
         get: function (target, key) {
             if (typeof key === 'string' && !(key in target)) {
                 warnNonpresent(target, key)
             }
             return target[key]
         }
     }

     // 数据代理
     function initProxy(vm) {
         var options = vm.$options
         // 判断是否是es6 是否存在Proxy
         if (hasproxy) {
             // 渲染函数拦截那些操作。 1. has 查询 2. get 或者
             var headler = options.render && options.render._withStripeed ?
                 getHeadler :
                 hasHeadler;
             vm._renderPorxy = new proxy(vm, headler)
         } else {
             // 如果不支es6  Proxy
             vm._renderPorxy = vm
         }
     }

     // 初始化当前实例的$children 和$parent 的指向
     function initLifeCycle(vm) {
         var options = vm.$options
         // 当前组件 父实例
         var parent = options.parent // 组件的实例对象
         // 是否抽象组件
         if (parent && !parent.abstrat) {
             while (parent.$options.abstrat && parent.$parent) {
                 parent = parent.$options.parent
             }
             parent.$children.push(vm)
         }
         vm.$parent = parent
         vm.$root = parent ? parent.$root : vm;

         vm.$children = [];
         vm.$refs = {};

         vm._watcher = null;
         vm._inactive = null;
         vm._directInactive = false;
         vm._isMounted = false; // 是否挂载
         vm._isDestroyed = false; // 是否销毁
         vm._isBeingDestroyed = false; // 是否正在销毁

     }

     function callHook(vm, hook) {
         var options = vm.$options
         var obj = options[hook]
         if (obj) {
             for (var i = 0; i < obj.length; i++) {
                 obj[i].call(vm)
             }
         }

     }

     function getData(data, vm) {
         return data.call(vm, vm)
     }

     //共享的访问器对象
     var sharedProperty = {
         enumerable: true,
         configurable: true,
         get: noop,
         set: noop
     };

     function proxy(vm, data, key) {

         sharedProperty.get = function () {
                 // console.log("我监听到你访问了我")
                 return this[data][key]
             },
             sharedProperty.set = function (newVal) {
                 console.log("我设置了data的值" + key + "==" + newVal)
                 this[data][key] = newVal

             }
         Object.defineProperty(vm, key, sharedProperty)
     }

     function initData(vm) {
         var opts = vm.$options
         var data = vm.$options.data
         // 通过之前strats 里面合成好的数据，data是一个function ，为了独立数据调用的空间。拿到data的值。
         data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}
         if (!isPlainObject(data)) {
             data = {}
             warn('data选项应该是object对象')
         }
         // data methods props 里面属性名称不能相同
         var props = opts.props
         var methods = opts.methods
         for (let key in data) {
             if (props && hasOwn(props, key)) {
                 warn("props " + key + "选项已经定义为data的属性.")
             } else if (methods && hasOwn(methods, key)) {
                 warn("methods: " + key + "选项已经定义为data的属性.")
             } else if (!isReserved(key)) {
                 proxy(vm, "_data", key)
             }

         }
         observe(data, true)
     }
     var shouldObserve = true
     var toggleObserving = function (value) {
         shouldObserve = value
     }

     function Dep() {
         this.subs = []
     }
     Dep.prototype.addSub = function (sub) {
         this.subs.push(sub)
     }
     Dep.prototype.depend = function () {
         console.log("收集依赖"); //Watch 观察者
     }
     Dep.prototype.notify = function () {
         var subs = this.subs.slice()
         for (var i = 0; i < subs.length; i++) {
             subs[i].updata() // 数据更新的操作   Watch
         }
     }
     Dep.target = null

     function def(obj, key, val) { // data._ob_  实例对象 指向 Observer
         Object.defineProperty(obj, key, {
             value: val,
             enumerable: false, //不可枚举
             configrable: true
         })
     }

     function Observe(value) {
         this.value = value;
         this.vmCount = 0;
         this.dep = new Dep() //回调列表 依赖在什么情况调用
         def(value, '_ob_', this)
         if(Array.isArray(value)){
             var augment = hasProto ?  protoAugment : copyAugment ;
             augment(value,shell,arrayKeys)
         }else{
             this.walk(value)
         }

     }
     function protoAugment(target,src){
         target.__proto__ = src
     }
     function copyAugment(target,src,keys){
         for(var i =0, j=keys.length; i<j; i++){
             var key = keys[i];
             def(target, key, src[key]);
         }
         console.log(target)
     }
     // 加入响应式系统   添加   setter  getter
     function defindReactive(obj, key, val, shallow) {
         var dep = new Dep() // 收集依赖  回调列表
         var property = Object.getOwnPropertyDescriptor(obj, key)
         var getter = property && property.get
         var setter = property && property.set
         // getter 和 setter 都不存在。或者都存在则为 true ===》 (!getter || setter)
         // console.log((!getter || setter),arguments)
         if ((!getter || setter) && arguments.length === 2) {
             val = obj[key] // 深度观测
         }
         var childOb = !shallow && observe(val)
         Object.defineProperty(obj, key, {
             get: function () {
                 var value = getter ? getter.call(obj) : val
                 if (Dep.target) {
                     dep.depend()  // 收集依赖
                     if (childOb) {
                         childOb.dep.depend()  // 收集依赖
                     }
                 }
                 return value
             },
             set: function (newVal) {
                 var value = setter ? setter.call(obj) : val
                 // is NaN !== NaN
                 if (newVal === value || (value !== value && newVal !== newVal)) {
                     return
                 }
                 if (setter) {
                     setter.call(obj, newVal)
                 } else {
                     val = newVal
                 }
                 console.log('我监听到data变化' + newVal)
                 // 如果改变的新值为 object 或者Array 就在进行深度检测，递归。
                 childOb = !shallow && observe(val)
                 dep.notify() //通知依赖更新

             }
         })
     }
     Observe.prototype.walk = function (value) {
         var keys = Object.keys(value)
         for (var i = 0; i < keys.length; i++) {
             defindReactive(value, keys[i])
         }
     }
     Observe.prototype.observeArray = function(items){
         items.forEach(function(item){
             observe(item)
         })
     }
     // 响应式系统
     function observe(value, asRootData) {
         var ob
         if (!isObject(value)) {
             return;
         }
         if(hasOwn(value,'_ob_') && value._ob_ instanceof Observe){
             ob= value._ob_

         }else if (shouldObserve && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue) {
             ob = new Observe(value)
         }
         if (ob && asRootData) {
             ob.vmCount++
         }

         return ob
     }

     function initState(vm) {
         var opts = vm.$options
         // 初始化props
         if (opts.props) {
             initProps(vm, opts.props)
         }
         // 初始化methods
         if (opts.methods) {
             initMethods(vm, opts.methods)
         }
         // 初始化computed
         if (opts.computed) {
             initComputed(vm, opts.computed)
         }
         // 初始化data 如果存在就initData
         if (opts.data) {
             initData(vm)
         } else {
             // 放在响应式系统里面
             observe(vm._data = {}, true)
         }
     }

     function initMinxin(options) {
         Vue.prototype._init = function (options) {
             var vm = this
             // 记录生成的vue实例对象
             vm._uip = uip++ //   //-------忘记写
             // 是否可扩展
             vm.is_Vue = true;
             //合并选项
             vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor), options, vm)
             // // 初始化数值代理
             initProxy(vm)
             // 初始化当前实例的$children 和$parent 的指向
             initLifeCycle(vm)
             // 调用beforeCreate 的钩子函数
             callHook(vm, 'beforeCreate')
             // 初始化数据
             initState(vm)
         }
     }

     function Vue(options) {
         // 安全机制
         if (!(this instanceof Vue)) { //-------忘记写
             warn('Vue是一个构造函数，必须是由new关键字调用')
         }
         this._init(options)
     }
     initMinxin() //  初始化选项1: 规范 2: 合并策略。
     Vue.options = {
         components: {
             transtions: {},
             keepAlive: {},
             solt: {},
             transtionsGroup: {}
         },
         directives: {},
         _bash: Vue
     }

     function initExend(Vue) {
         Vue.extend = function (extendOptions) {
             extendOptions = extendOptions || {} // -----忘记写
             var Super = this
             var Child = function VueComponent(options) {
                 this._init(options)
             }
             Child.prototype = Object.create(Super.prototype)
             Child.prototype.constructor = Child // 改变constructor 的指向
             Child.options = mergeOptions(Super.options, extendOptions)
             // 子类继承父类的静态方法。
             Child.extend = Vue.extend
             // console.log(new Child({}))
             return Child
         }
     }
     initExend(Vue)
     return Vue
 })

html代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>第八课</title>
 </head>
 <body>
     <div id="app">
         <huml></huml>

     </div>
     <script src="vue.js"></script>
     <!-- <script src="vue2.5.1.js"></script> -->
     <script type="text/javascript">
         var componentA = {
             el: "#app"
         }
         var vm = new Vue({
             el:"#app",
             data: {
                 message: "hello Vue",
                 key: "wodow",
                 test: 1,
                 list: {
                     b:1
                 },
                 aa:{
                     b: [1,2,3]
                 }
             },
             beforeCreate: function(){
                 console.log('我钩子函数beforeCreate')
             },
             components:{
                 humle: componentA
             }
         })
         vm.test = 2;
         // console.log(vm.aa)
     </script>
 </body>
 </html>