Vue中nextTick()解析
最近,在开发的时候遇到一个问题,让我对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) // => '已更新'
}
}
Vue中nextTick()解析的更多相关文章
- vue中nextTick
vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- 通俗易懂了解Vue中nextTick的内部实现原理
1. 前言 nextTick 是 Vue 中的一个核心功能,在 Vue 内部实现中也经常用到 nextTick.在介绍 nextTick 实现原理之前,我们有必要先了解一下这个东西到底是什么,为什么要 ...
- vue中nextTick的理解
A. vue 中的 nextTick 是什么? 1.首先需要清楚,nextTick是一个函数:这个函数的作用,简单理解就是下一次渲染后才执行 nextTick 函数中的操作: 2.在下一次 DOM 更 ...
- Vue中v-model解析、sync修饰符解析
上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...
- vue中$nextTick详细讲解保证你一看就明白
1.功能描述 今天我们要实现这个一个小功能: 页面渲染完成后展示一个div元素: 当点击这个div元素后: div元素消失: 出现一个input元素:并且input元素聚焦 想必大家我觉得简单,我们一 ...
- vue中$nextTick的使用
转载 https://www.jb51.net/article/154823.htm ,写的通俗易懂 在这里我有一个疑问,因为在vue中mounted里面执行后,dom节点是挂载上去了的,所以视图上 ...
- vue中nextTick的使用(转载)
转载自:https://www.cnblogs.com/chaoyuehedy/p/8985425.html 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量 ...
- vue中$nextTick的用法
简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架.本人比较喜欢用之.在我们用vue时,我们经常用到一个方法是th ...
随机推荐
- 基于服务器版centos7的Hadoop/spark搭建
前提说明: 1.Hadoop与spark是两个独立的框架,只安装spark也可独立运行,spark有自己的调度器(standalone模式): 2.在Hadoop的基础上安装spark就是为了使用ya ...
- codeforces 689 Mike and Shortcuts(最短路)
codeforces 689 Mike and Shortcuts(最短路) 原题 任意两点的距离是序号差,那么相邻点之间建边即可,同时加上题目提供的边 跑一遍dijkstra可得1点到每个点的最短路 ...
- nginx 4 win10
去下载文件 http://nginx.org/en/download.html 然后释放文件到一目录 最后执行nginx.exe.到浏览器查看localhost,界面: 在最后,别忘了,修改其80端口 ...
- 【Codeforces 1030D】Vasya and Triangle
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 参考这篇题解:https://blog.csdn.net/mitsuha_/article/details/82825862 为什么可以保证m ...
- MongoDB增加用户、删除用户、修改用户读写权限及只读权限(注:转载于http://www.2cto.com/database/201203/125025.html)
MongoDB 增加用户 删除用户 修改用户 读写权限 只读权限, MongoDB用户权限分配的操作是针对某个库来说的.--这句话很重要. 1. 进入ljc 数据库: use ...
- (12)GrabCut前景提取
import cv2 import numpy as np import matplotlib.pyplot as plt img = cv2.imread('opencv-python-foregr ...
- Codeforces Round #245 (Div. 1)——Guess the Tree
题目链接 题意: n个节点,给定每一个节点的子树(包含自己)的节点个数.每一个节点假设有子节点必定大于等于2.求这种数是否存在 n (1 ≤ n ≤ 24). 分析: 用类似DP的思路,从已知開始.这 ...
- Linuxserver沦陷为肉鸡的全过程实录
Linuxserver沦陷为肉鸡的全过程实录 Linuxserver沦陷为肉鸡的全过程实录 从防火墙瘫痪说起 查找黑客行踪的方法 沦陷过程分析 1 oracle用户password被破解 2 黑客动作 ...
- 暴力解hdu4930Fighting the Landlords
#include<iostream> #include<cstring> #include<cstdio> #include<algorithm> us ...
- 第二课 MongoDB 数据模型
1.课程大纲 本课程主要介绍MongoDB数据模型相关知识.包含文档.集合与数据库的基本概念.用法及命名规则:MongoDB主要的数据类型介绍以及MongoDB Shell的简单介绍与使用. 文档 ( ...