标签：nextTick function Vue console log 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) // => '已更新' }

}

标签：nextTick,function,Vue,console,log,vue,更新,API,全局
来源： https://www.cnblogs.com/sunzihui/p/16212242.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。