vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick(可以理解为是一次异步操作),相信你也用过。我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。比如你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
为什么要用nextTick?
请看如下一段代码
new Vue({
el: '#app',
data: {
list: []
},
mounted: function () {
this.get()
},
methods: {
get: function () {
this.$http.get('/api/article').then(function (res) {
this.list = res.data.data.list
// ref list 引用了ul元素,我想把第一个li颜色变为红色
this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
})
},
}
})
在获取到数据后赋值给数据模型中list属性,然后我想引用ul元素找到第一个li把它的颜色变为红色,但是事实上,这个要报错了,我们知道,在执行这句话时,ul下面并没有li,也就是说刚刚进行的赋值操作,当前并没有引起视图层的更新。因此,在这样的情况下,vue给我们提供了$nextTick方法,如果我们想对未来更新后的视图进行操作,我们只需要把要执行的函数传递给this.$nextTick方法,vue就会给我们做这个工作。
new Vue({
el: '#app',
data: {
list: []
},
mounted: function () {
this.$nextTick(() => {
this.get()
})
},
methods: {
get: function () {
this.$http.get('/api/article').then(function (res) {
this.list = res.data.data.list
// ref list 引用了ul元素,我想把第一个li颜色变为红色
this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
})
},
}
})
注意:$nextTick执行完后网不好的话图片可能还没加载完(图片的高度可能不对)
- $nextTick也不行,因为图片的高度没有被计算在内
- 在所有图片加载完后,获取的高度才是正确的,可以再加一个防抖函数以防过多执行。
把图片display:none隐藏后元素高度正好等于$nextTick计算的高度。说明图片加载完毕晚于$nextTick进行。
解决办法一:固定图片大小
解决办法二:在图片加载完(监听图片加载load image方法回调),获取到正确高度,调用频繁就使用防抖操作
Vue @load(事件会在页面或图像加载完成后立即发生。)_muzidigbig的博客-CSDN博客_@load
vue动态渲染img,图片不显示(监听图片错误onerror)_muzidigbig的博客-CSDN博客_vue动态渲染img