Vue中nextTick()解析
2024-08-30 14:25:48
最近，在开发的时候遇到一个问题，让我对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) // => '已更新'
}
}
最新文章
- WCF 数据数据 DataTable
- Spring学习总结（一）——Spring实现IoC的多种方式
- kd tree学习笔记 (最近邻域查询)
- wget进行整站下载
- 实验二 Linux下C语言编程基础
- 用Rprofile文件配置打开时R的设置
- Ubuntu Android Studio/IntelliJ IDEA 支持文件中文命名
- setFocus一定要写在setLayout设置的后面，否则不起作用——使用setFocusPolicy为控件设置不同的焦点策略：Tab焦点，Click焦点，Wheel焦点和没有焦点
- iOS_20_微博的骨架结构
- freemarker遍历list中的map
- 基于Node的高性能MVC框架
- JHipster技术栈定制 - JHipster Registry消息总线配置
- python 3.7 配置mysql数据库
- [物理学与PDEs]第3章习题3电磁场的矢势在 Lorentz 规范下满足的方程
- 独立使用Asp.net Core 的razor模板 (一):Razor引擎的一些细节
- 吴恩达机器学习笔记23-神经网络：表述--非线性假设（Non-linear Hypotheses）
- python学习笔记13-集合set
- 正则表达式，清除HTML标签，但要保留 <br>和<img>标签，其他的清除
- 【树】Convert Sorted Array to Binary Search Tree
- sprint2 （第八天）