//  大体思路（九）

 //  本节内容：

 // 1. $mount 挂载函数的实现。

 //    // 将Vue.prototype.$mount 缓存下来

 //     ==>mountComponet(this,el) {

 //         // 组建挂载的时候做的事情

 //         var uodateComponent = function(){

 //             // 1. render返回生产的虚拟节点

 //             // 2. _update 将虚拟节点变为正真的dom

 //         }

 //         // 渲染函数的观察者对象 初识 Watcher undateComponent被观察目标

 //         new Watcher(vm,undateComponent,noop,{},true);

 //     }

 //     Vue.prototype.$mount= function(){

 //         el = el && query(el)

 //         if(el === document.body || document.documentElement){

 //             warn('禁止将组件挂载到html 和 body上')

 //         }

 //         options = this.$options

 //         if(!options.render){

 //             template = options.template;

 //             // 自定义渲染函数  把模版编译为渲染函数

 //             if(template){

 //                 if(typeof template === 'string'){

 //                     if(template.charAt(0) === '#'){

 //                         template = idToTemplate(template)

 //                     }

 //                 }

 //             }else if(el){

 //                 template = getOuterHTML(el)

 //             }

 //             if(template){

 //                 // 解析成渲染函数  编译  AST 虚拟DOM

 //                 var res = compileToFuntions(template);

 //                 options.render = res.render; // 渲染函数

 //             }

 //         }

 //         return mount.call(this,el)

 //     }

 //     query(el) ===> el === 'string'? doeument.querySelector(el):el

 //     idToTemplate(id){

 //         var el = query(id)

 //        return  el && el.innerHTML;

 //     }

 //     getOuterHTML(el){

 //         if(el.outerHTML){

 //             return el.outerHTML

 //         }else{

 //             var con = document.createElement('div');

 //             con.appendChild(el.cloneNode(true));

 //             return con.innerHTML

 //         }

 //     }

 // 2. 渲染函数的观察者

 // 3. 初识Watcher

 (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)

             //调用created钩子

             callHook(vm,'created')

             // 挂载组件

             if(vm.$options.el){

                 vm.$mount(vm.$options.el)

             }

         }

     }

     // 检查是否为正确的el

     function query(el){

         if(typeof el === 'string'){

             var element = document.querySelector(el)

             if(!element){

                 warn('connet fined element' + el)

             }

             return element

         }else {

             return el

         }

     }

     // 输出html的模版

     function isToTemplate(el){

         var el = el && query(el)

         return el && el.innerHTML

     }

       // 输出html的模版

     function getOuterHTML(el){

         if(el.outerHTML){

             return el.outerHTML

         }else {

             var dom = document.createElement('div')

             dom.appendChild(el.clone(true))

             return dom.innerHTML

         }

     }

     // 挂载转体统

     function mountComponent(){

        // 组建挂载的时候做的事情

         var uodateComponent = function(){

             // 1. render返回生产的虚拟节点

             // 2. _update 将虚拟节点变为正真的dom

         }

         // 渲染函数的观察者对象 初识 Watcher undateComponent被观察目标

         new Watcher(vm,undateComponent,noop,{},true);

     }

      // 挂载系统

      Vue.prototype.$mount = function(el){

         var el = el && query(el)

         // 挂载组件，  生成虚拟dom   编译为真实dom节点

         return mountComponent(this,el)

     }

     var mount = Vue.prototype.$mount

     // 重写了$mount

     Vue.prototype.$mount = function(el){

         var el = el && query(el)

         // console.log(el)

         // 不能绑定在body 和html上。

         if(el === document.body || el === document.documentElement){

             warn('禁止组件挂载在html 或者body上')

         }

         var options = this.$options

         // 自定义渲染函数  把模版编译为渲染函数

         if(!options.render){

            var  template = options.template

            if(template){

                if(typeof template === 'string' && template.charAt(0) === "#"){

                   template = isToTemplate(template)

                }

            }else if(el){

                   template = getOuterHTML(el)

            }

            if(template){

                 //解析成渲染函数    编译  AST   虚拟DOM

                var res = compileToFunctions(template)

                this.render = res.render  //渲染函数

            }

         }

         return mount.call(this.el)

     }

     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

 })