Vue(9)，2024年最新Web前端客户端开发面试题目

mounted: function () {

this.$nextTick(function () {

// Code that will run only after the

// entire view has been rendered

})

}

其他应用场景

---

其他应用场景如下三例：

例子1：

点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。

showsou(){

this.showit = true //修改 v-show

document.getElementById(“keywords”).focus() //在第一个 tick 里，获取不到输入框，自然也获取不到焦点

}

修改为：

showsou(){

this.showit = true

this.$nextTick(function () {

// DOM 更新了

document.getElementById(“keywords”).focus()

})

}

例子2：

点击获取元素宽度。

{{ message }}

<button @click=“getMyWidth”>获取p元素宽度

getMyWidth() {

this.showMe = true;

//this.message = this.$refs.myWidth.offsetWidth;

//报错 TypeError: this.$refs.myWidth is undefined

this.$nextTick(()=>{

//dom元素更新后执行，此时能拿到p元素的属性

this.message = this.$refs.myWidth.offsetWidth;

})

}

例子3：

使用 swiper 插件通过 ajax 请求图片后的滑动问题。

实例理解 nextTick 应用

---

下面的例子来自 https://www.cnblogs.com/hity-…， 稍有改动。各位可以复制运行一遍，加深理解。

• {{item}}
• {{item}}
• {{item}}
• {{item}}
• {{item}}