// Vue实例化
let vm = new Vue({
    el: '#app',
    data() {
        return {
            aa: 1,
            bb: 2,
            cc: 3,
        }
    },
    // render(h) {
    //   return h('div',{id:'a'},'hello')
    // },
    template: `<div id="a">hello 这是我自己写的Vue{{computedName}}{{cc}}</div>`,
    computed: {
        computedName() {
            return this.aa + this.bb
        },
    },
})
// 当我们每一次改变数据的时候  渲染watcher都会执行一次 这个是影响性能的
setTimeout(() => {
    vm.cc = 4
}, 2000)
console.log(vm)

// Vue实例化
let vm = new Vue({
    el: '#app',
    data() {
        return {
            a: 123,
        }
    },
    template: `<div id="a">hello {{a}}</div>`,
})

setTimeout(() => {
    vm.a = 1
}, 1000)

Vue.mixin({
  created() {
    console.log("我是全局混入");
  },
});

// Vue实例化
let vm = new Vue({
  el: "#app",
  data() {
    return {
      a: { a: { a: { b: 456 } } },
      aa: 1,
      bb: 2,
    };
  },
  created() {
    console.log("我是自己的");
  },
  template: `<div id="a">hello 这是我自己写的Vue{{name}}
          </div>`,
});

// Vue实例化
let vm = new Vue({
    el: '#app',
    data() {
        return {
            aa: 1,
            bb: 2,
        }
    },
    template: `<div id="a">hello 这是我自己写的Vue{{name}}</div>`,
    methods: {
        doSomething() {},
    },
    watch: {
        aa(newVal, oldVal) {
            console.log(newVal)
        },
        // aa: {
        //   handle(newVal， oldVal) {
        //     console.log(newVal);
        //   },
        //   deep: true
        // },
        // aa: 'doSomething',
        // aa: [{
        //   handle(newVal， oldVal) {
        //     console.log(newVal);
        //   },
        //   deep: true
        // }]
    },
})
setTimeout(() => {
    vm.aa = 1111
}, 1000)

// Vue实例化
let vm = new Vue({
    el: '#app',
    data() {
        return {
            a: 123,
        }
    },
    // render(h) {
    //   return h('div',{id:'a'},'hello')
    // },
    template: `<div id="a">hello {{a}}</div>`,
})

// 当我们每一次改变数据的时候  渲染watcher都会执行一次 这个是影响性能的
setTimeout(() => {
    vm.a = 1
    vm.a = 2
    vm.a = 3
}, 1000)

// src/init.js

import { initState } from './state'
import { compileToFunctions } from './compiler/index'
export function initMixin(Vue) {
    Vue.prototype._init = function (options) {
        const vm = this
        // 这里的this代表调用_init方法的对象(实例对象)
        //  this.$options就是用户new Vue的时候传入的属性
        vm.$options = options
        // 初始化状态
        initState(vm)

        // 如果有el属性 进行模板渲染
        if (vm.$options.el) {
            vm.$mount(vm.$options.el)
        }
    }

    // 这块代码在源码里面的位置其实是放在entry-runtime-with-compiler.js里面
    // 代表的是Vue源码里面包含了compile编译功能 这个和runtime-only版本需要区分开
    Vue.prototype.$mount = function (el) {
        const vm = this
        const options = vm.$options
        el = document.querySelector(el)

        // 如果不存在render属性
        if (!options.render) {
            // 如果存在template属性
            let template = options.template

            if (!template && el) {
                // 如果不存在render和template 但是存在el属性 直接将模板赋值到el所在的外层html结构（就是el本身 并不是父元素）
                template = el.outerHTML
            }

            // 最终需要把tempalte模板转化成render函数
            if (template) {
                const render = compileToFunctions(template)
                options.render = render
            }
        }

        // 将当前组件实例挂载到真实的el节点上面
        return mountComponent(vm, el)
    }
}

new Vue({
    el: '#app',
    data() {
        return {
            a: [1, 2, 3],
            name: '123',
        }
    },
})

// Vue实例化
new Vue({
    el: '#app',
    data() {
        return {
            a: 111,
        }
    },
    // render(h) {
    //   return h('div',{id:'a'},'hello')
    // },
    // template:`<div id="a">hello</div>`
})