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也可以做这些操作。
网友评论