vue 全局API

1.Vue.extend

使用基础Vue构造器,创建子类

div #mount-point

//data必须是函数

var peofile = Vue.extend({

 template:’‘

data:function() {}

})

//创建Profile实例,挂在到元素上

new Profile().$mount('#mount-point')

2.Vue.nextTIck([callback, conText])

在修改数据之后立即使用这个方法,获取更新后的 DOM。

异步更新队列

Vue更新dom是异步的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一时间循环中发生的数据变更,如果watcher被多次书法,只会被推入队列一次,为了在数据变化后等待VUe完成更新,可以在数据变化之后立即使用Vue.nextTick(callback),回调函数将在DOM更新完毕后被调用

在组件中使用组件.$nextTick()特别方便,它不需要全局Vue,并且回调函数中的this自动绑定到当前Vue实例上

this.$nextTick()

$nextTick返回一个Promise对象,可以使用async和await

methods: { updateMessage: function () {

this.message = '已更新'

console.log(this.$el.textContent) // => '未更新'

this.$nextTick(function ()

{ console.log(this.$el.textContent) // => '已更新' })

}

methods: { updateMessage: async function ()

{ this.message = '已更新'

console.log(this.$el.textContent) // => '未更新'

await this.$nextTick()

console.log(this.$el.textContent) // => '已更新' }

}

3.Vue.set(target, propertyName/index, value)

4.Vue,delete(target,propertyName/index)

 

posted @ 2022-05-01 09:48  HaoyuSun  阅读(104)  评论(0)    收藏  举报