vue之$nextTick详解
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick
一样,不同的是回调的 this
自动绑定到调用它的实例上。
场景解释:
<template> <div> <input id="keywords" v-show="bState" type="text" placeholder="请输入"> <button @click="Btnclick">按钮</button> </div> </template> <script> import { mixinsTest } from './mixins'; export default { name: '', components: {}, mixins: [mixinsTest], props: {}, data() { return { names: '我是主线de', bState: false }; }, watch: {}, computed: {}, created() { console.log('我是主线'); console.log(this.names); }, mounted() { this.Btnclick(); }, destroyed() {}, methods: { Btnclick() { this.bState = true; this.$nextTick(() => { document.getElementById('keywords').focus(); }); } } }; </script> <style lang="less" scoped> </style>
比如刚开始这个vue组件里面有一个v-show隐藏 的input框,然后需要在mounted里面去操作这个DOM,这个时候,如果不用$nextTick就会只是显示而不会聚焦,如果用$nextTick就ok
具体参考https://segmentfault.com/a/1190000012861862?utm_source=tag-newest