最近,在开发的时候遇到一个问题,让我对vue中nextTick()的用法加深了了解~
下面是在组件中引用的一个拖拽的组件:
<vue-draggable-resizable
class="drag-img"
:w="coordinate[0].width"
:h="coordinate[0].height"
:x="coordinate[0].abs"
:y="coordinate[0].ord"
@dragging="onDragAvator"
@resizing="onResizeAvator"
@dragstop="onDragstopAvator"
@onDragStart="onDragStartAvator"
:min-width="50"
:min-height="50"
:handles="['tl','tr','br','bl']"
:lock-aspect-ratio="true"
:parent="true">
<img @click="setAvatorDafault" src="@/assets/img/icon_touxiang@2x.png" alt="">
</vue-draggable-resizable>
这个拖拽组件的横坐标和纵坐标、宽高是由data的一个数据控制的:
data() {
return {
coordinate:[{
width: 50,
height: 50,
abs: 10,
ord: 10
}]
}
}
在dragging和resizing的过程中,这个数据和dom的操作应该都是双向绑定的:
onResizeAvator: function (x, y, width, height) {
this.coordinate[0].abs = x
this.coordinate[0].ord = y
},
onDragAvator: function (x, y) {
this.coordinate[0].abs = x
this.coordinate[0].ord = y
},
但是,在编辑回显的时候,需要将异步获取的数据赋给coordinate,再显示到页面。
现在问题来了,当数据coordinate被赋值成异步获取的数据后,页面中的拖拽组件的宽高并没有变化,这是为什么?
methods: {
getDefaultData() {
let that = this
axios.get(this.$store.state.marketinghost
+ '/fission/task/get/bycode?onlischoolCode=' + this.onlischoolCode
+ '&taskCode=' + this.$route.query.id)
.then(res => {
if(res.data.code == "1") {
var data = res.data.data
if (data.components.length) {
that.coordinate = data.components
}
}
})
.catch((err) => {
Promise.resolve(err);
})
}
}
mounted() {
this.getDefaultData()
}
加了一个变量控制拖拽组件后,组件DOM会强制性更新,宽高就变成回显时候的值了
<vue-draggable-resizable
class="drag-img"
v-if="!editLoading"
:w="coordinate[0].width"
:h="coordinate[0].height" :x="coordinate[0].abs" :y="coordinate[0].ord" @dragging="onDragAvator" @resizing="onResizeAvator" @dragstop="onDragstopAvator" @onDragStart="onDragStartAvator" :min-width="50" :min-height="50" :handles="['tl','tr','br','bl']" :lock-aspect-ratio="true" :parent="true"> <img @click="setAvatorDafault" src="@/assets/img/icon_touxiang@2x.png" alt=""> </vue-draggable-resizable>
data() {
return {
editLoading: false,
coordinate:[{
width: 50,
height: 50,
abs: 10, ord: 10 }] } }
methods: {
getDefaultData() {
let that = this
that.editLoading = true
axios.get(this.$store.state.marketinghost
+ '/fission/task/get/bycode?onlischoolCode=' + this.onlischoolCode
+ '&taskCode=' + this.$route.query.id)
.then(res => {
if(res.data.code == "1") {
var data = res.data.data
if (data.components.length) {
that.coordinate = data.components
that.$nextTick(() => {
that.editLoading = false
})
}
}
})
.catch((err) => {
Promise.resolve(err);
})
}
}
mounted() {
this.getDefaultData()
}
为了更加了解nextTick(),下面是vue官网关于异步更新队列的解释:
https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97
总之,当你设置 vm.someData = 'new value'
,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新,为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)
:
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})
因为nextTick()返回的事一个Promise对象,所以也可以写成async/await的方式:
methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
来源:oschina
链接:https://my.oschina.net/u/4388677/blog/3519482