// 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)
    }
}

// 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>`,
})

// 我们在这里模拟更新
setTimeout(() => {
    vm.a = 456
    // 此方法是刷新视图的核心
    vm._update(vm._render())
}, 1000)