3.2 Vue 实例

import Vue from 'vue'

const app = new Vue({
  // el: '#root',
  template: '<div ref="div">{{text}} {{obj.a}}</div>',

// data里面注册数据响应式绑定
  data: {
    text: 0,
    obj: {}
  }
  // watch: {
  //   text (newText, oldText) {
  //     console.log(`${newText} : ${oldText}`)
  //   }
  // }
  methods:{
        this.$nextTick(function () {
            // DOM 现在更新了
            // `this` 绑定到当前实例
             this.doSomethingElse()
        })
}, 1000);

});

// 将Vue 实例挂载到指定的节点
app.$mount('#root');

let i = 0;
setInterval(() => {
  i++
  // app.text += 1
  // app.text += 1
  // app.text += 1
  // app.text += 1
  // app.text += 1
  // app.obj.a = i
// 通过实例方法设置响应式数据
  app.$set(app.obj, 'a', i)
  // app.$forceUpdate()

  // app.$data.text += 1;


// 实例的数据
console.log(app.$data)

// 实例的props
console.log(app.$props)

// 实例的挂载的节点
 console.log(app.$el)

// 实例的属性
 console.log(app.$options)
 
// 无法通过 $options赋值
app.$options.data.text += 1

// render方法 
app.$options.render = (h) => {
     return h('div', {}, 'new render function')
 }

// 实例的根节点
console.log(app.$root === app)

// 实例的子组件
console.log(app.$children)

// 实例的slot
console.log(app.$slots)

// 实例的作用域slot
console.log(app.$scopedSlots)

// 对应的html节点或者组件
console.log(app.$refs)

// 服务端渲染判断
console.log(app.$isServer)

// 实例的方法 
 const unWatch = app.$watch('text', (newText, oldText) => {
   console.log(`${newText} : ${oldText}`)
 })

// 调用注册后的返回的方法即可注销掉这个watch方法 
 setTimeout(() => {
  unWatch()
 }, 2000)


// 绑定实例方法 ， $once 只监听一次
app.$once('test', (a, b) => {
   console.log(`test emited ${1} ${b}`)
 })

// 触发实例方法 
setInterval(() => {
  app.$emit('test', 1, 2)
 }, 1000)

 app.$forceUpdate()