Vue核心知识-Vue实例

VUE事例的创建和作用

创建

new Vue 的方式

new Vue({
  el: '#root',
  template: '<div>this is content</div>'
})

通过 $mount

import Vue from 'vue'

const app = new Vue({
  // el: '#root',
  template: '<div>{{text}}</div>',
  data: {
    text: 0
  }
})

app.$mount('#root')

作用

数据响应式，通过实例修改数据

import Vue from 'vue'

const app = new Vue({
  // el: '#root',
  template: '<div>{{text}}</div>',
  data: {
    text: 0
  }
})

app.$mount('#root')
// 直接修改实例的数据
setInterval(() => {
  app.text += 1
}, 1000)

VUE实例的属性

vm指new Vue({})出来的实例

vm.$data

等同于 new Vue({})中的data选项

通过$data赋值，页面数据可以变化的，说明过载在vue实例data选项相关数据和和代理到vu.$data上的数据是同一个

vm.$props

等同于 new Vue({})中的props选项

vm.$el

对应挂载的节点

vm.$options

对应new Vue()时传入的对象，系统会默认传一些参数和我们传进去的合并，得到$options

// 控制台
{components: {…}, directives: {…}, filters: {…}, _base: ƒ, template: "<div>{{text}}</div>", …}

关于 $options.data

$options中有data，如果通过赋值的方式修改，是没有变化的；说明我们传入的options对象，vue在init对象时，是做过修改的，并不是直接引用$options.data，这两个不是同一个对象。所以直接修改$options上的data是没有作用的。

而通过$data赋值，页面数据可以变化的，说明过载在vue实例data选项相关数据和和代理到vu.$data上的数据是同一个

给$options重新赋值render方法

当有数据改变，重新渲染时，才生效

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

vm.$root

vue的一个实例，vue是一个树状结构进行渲染的，会有一个最上层的根节点，根节点就是我们new Vue()出来的vm。所以 vm.$root === vm

vm.$children

组件相关

假如有一个组件<item><div></div></item>，那么<div></div>就是作为item组件的children传入item中，在item中调用$childdren可以得到<div></div>

`vm.$slots`和`vm.scopedSlots`

组件相关

vue的插槽，可以在template中进行书写调用，同时也会编译出对象挂在到vue的实例上，可以通过编程的方式进行引用。

vm.$refs

模板的一个引用，快速定位模板中的某一个节点或者组件，若是html节点会返回html节点对象，若是组件会返回组件实例。

const app = new Vue({
  template: '<div ref="div">{{text}}</div>',
  data: {
    text: 0
  }
})
app.$mount('#root')
console.log(app.$refs)

得到的是对应的html节点对象

// 控制台
{div: div}

vm.$isServer

服务端渲染时，会用到这个判断

VUE实例的方法

vm.$watch()

对应new Vue()传入对象的watch，

const unWatch = vm.$watch('text', (newText, oldText) => {
  console.log(`${newText} : ${oldText}`)
})
setTimeout(() => {
  unWatch()
}, 2000)

和在watch中写相同

const app = new Vue({
  template: '<div ref="div">{{text}}</div>',
  data: {
    text: 0
  },
  watch: {
    text (newText, oldText) {
      console.log(`${newText} : ${oldText}`)
    }
  }
})

app.$mount('#root')

options中watch的好处，组件经常要被销毁，跳转路由，切换页面，老页面上的watch就没用了，watch需要被注销，不然内存会溢出

$watch需要我们自己注销，使用$watch时会返回一个unWatch方法，执行它就可以注销

vm.$on()

事件监听

vm.$on('test', () => {
  console.log('test emited')
})

vm.$emit('test')

注意：$emit和$on只能同时作用于一个vue对象上，才会生效

emit时，可以传数据

app.$on('test', (a, b) => {
  console.log(`test emited ${a} ${b}`)
})

app.$emit('test', 1, 2)

vm.$once()

只监听一次

app.$once('test', (a, b) => {
  console.log(`test emited ${a} ${b}`)
})

setInterval(() => {
  app.$emit('test', 1, 2)
}, 1000)
// 控制台
// test emited 1 2

vm.$forceUpdata()

强制组件渲染一次

vue是响应式的框架，如果在vue的data中没有进行声明，给没声明的属性赋值，就是非响应式的，不会引起vue实例的重新渲染，这时可以用$forceUpdate()

注意：不推荐使用（除非万不得已），它会强制整个组件的渲染，如果频度没有控制好，会一直渲染，导致应用性能变得很低

避免方式：

可以在一开始在data中声明一个空值
app.$set(app.boj, 'a', i) ，那么这个a，vue会进行处理，它是响应式的。对应的删除方法app.$delete，如果直接delete某个属性的话，它的reactive还存在，会导致内存溢出，通过$delete可以彻底的删除对某个属性。

import Vue from 'vue'

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

let i = 0
setInterval(() => {
  // app.text += 1
  app.obj.a = i++
  app.$forceUpdate()
}, 1000)

vm.$nextTick([callback])

vue下一次更新时，调用callback

vue的渲染过程是异步的，修改数据后，vue不是同步的进行渲染，这里会有一个异步队列，如果我们连续改某个数据，vue是一次性进行渲染的，不是每次都进行渲染dom。

操作dom节点，每次dom节点更新后去做对dom节点的直接操作，这时需要等dom节点渲染完成。

总结

vue实例对于理解项目开发是很有用的，因为每个组件内部都是一个vue实例，组件内调用的this，指向的就是vue实例。所以理解了vue实例的属性和方法，在组件内this也可以做这些操作。