【js】Vue 2.5.1 源码学习 （八）响应式入口observe

大体思路（七）

本节内容：

deps 依赖收集的数组对象 => Dep 构造函数

/** ==> observe()

* var ob

* ==> if --isObject

* ==> if -- shouldObserve isExtensible is_Vue 是否可扩展

* ==> ob = new Observe(value);

* == if ob.vmCount++

* ==> reutrn ob

* Observe(value){

* this.value = value

* this.vmCount = 0

* def(value,'_ob_',this);

* ==> ,,,

* this.dep = new Dep()

* this.walk(value)

*

* }

* Observe.prototype.walk = fucntion(obj){

* defindReactive(obj,key[i])

* }

* //响应式系统的核心 将数据对象的属性转化成访问器属性：getter setter

* defindReactive(obj,key,val,shallow){

* // 深度观测

*

* }

* Dep(){

* this.subs=[]

* }

* ==> is_Vue = true

*

*

*

*

* */

watch 解析字段(属性) => Watch 观察者 实例对象$watch()

 

vue.js 代码如下

// 大体思路（七）
// 本节内容：
// deps 依赖收集的数组对象  => Dep  构造函数
/**    ==>  observe()
 *          var ob 
 *          ==> if --isObject   
 *          ==> if -- shouldObserve isExtensible  is_Vue 是否可扩展
 *              ==> ob = new Observe(value);
 *          ==  if   ob.vmCount++ 
 *      ==> reutrn ob 
 * Observe(value){
 * this.value = value
 * this.vmCount = 0
 *   def(value,'_ob_',this);
 *     ==>   ,,,
 * this.dep = new Dep()
 * this.walk(value)  
 *       
 * }
 * Observe.prototype.walk = fucntion(obj){
 *    defindReactive(obj,key[i])
 * }
 * //响应式系统的核心 将数据对象的属性转化成访问器属性：getter setter 
 * defindReactive(obj,key,val,shallow){
 * // 深度观测 
 *    
 * }
 * Dep(){
 *  this.subs=[]
 * }
 *      ==> is_Vue = true 
 * 
 * 
 * 
 * 
 *  */
// watch 解析字段(属性)   =>  Watch 观察者   实例对象$watch()


(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 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)
        this.walk(value)
    }
    // 加入响应式系统   添加   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])
        }
    }
    // 响应式系统
    function observe(value, asRootData) {
        var ob
        if (!isObject(value)) {
            return;
        }
        if (shouldObserve && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue) {
            ob = new Observe(value)
        }
        console.log(ob)
        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
                }
            },
            beforeCreate: function(){
                console.log('我钩子函数beforeCreate')
            },
            components:{
                humle: componentA
            } 
        })
        vm.test = 2;
        console.log(vm)
    </script>
</body>
</html>