vue nexttick用法
Tick是Vue.js提供的一个方法，可以在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以获取更新后的DOM，并进行一些操作。
使用方法：
在Vue组件内部使用Tick方法，方法中传入一个回调函数即可。回调函数会在下次DOM更新结束之后执行。
Tick(() => {
  some code here
})
Tick同时也支持Promise的异步函数调用方式。可以使用async/await来简化代码。
async someMethod () {
  code here
  Tick()
  code here
}
Tick方法的使用场景多种多样，常用的场景如下：
1.修改数据后立即使用DOM更新之后的信息。
由于Vue的数据响应式，在修改数据后，DOM并不会立即更新。如果想要立即拿到更新后的DOM信息，需要使用Tick方法。
例如：我们将一个列表中的元素从第一个位置移动到最后一个位置，并想立即获取这个更新后的DOM位置信息。代码如下：
    let list = fs.list  通过ref获取列表标签
    let firstElem = veChild(list.childNodes[0])  移除第一个节点
    list.appendChild(firstElem)  将移除的节点添加到最后
    Tick(() => {
      获取更新后的DOM信息
      let lastElem = list.childNodes[list.childNodes.length - 1]
      console.log(lastElem.offsetTop)
    })
2.在用v-for循环渲染数据的时候，获取DOM列表信息。
使用v-for指令循环渲染数据时，如果想要获取每一个子元素的DOM信息，需要使用Tick方法来获取更新后的DOM信息。
例如：
<template>
  <ul ref="list">
    <li v-for="(item, index) in list" :key="index">{{item}}</li>
  </ul>
</template>
<script>
  export default {
    data() {
      return {
        list: ['a', 'b', 'c']
      }
    },
    methods: {
      handleList() {
        let arr = []
        循环获取每一个li元素的offsetTop属性值
        for (let i = 0; i < this.list.length; i++) {
          let li = fs.list.childNodes[i]
          arr.push(li.offsetTop)
        }
        console.log(arr)
      }
    }
  }
</script>
上述代码中，handleList方法可以获取到每个li元素的offsetTop属性值。
3.在el表达式中获取更新后的DOM信息。
await和async使用方法在Vue中，可以使用{{}}语法来表示el表达式，可以在el表达式中插入下一次DOM更新完毕后的信息。
例如：我们想获取列表最后一个元素的offsetTop属性值，代码如下：
{{list[list.length-1]}}
<div ref="listEnd">{{list[list.length-1]}}</div>
Tick(() => {
  let listEndTop = fs.listEnd.offsetTop  获取更新后的位置信息
  console.log(listEndTop)
})
在上述例子中，{{list[list.length-1]}}会在下一次DOM更新完毕后显示出值，此时，ref="listEnd"所在的div会获取到更新后的位置信息。
总结
Tick方法是前端开发中非常常见的一个方法，可以获取到下一次DOM更新完毕后的信息，对于一些涉及到DOM操作、修改数据需要即时得到更新后状态的场景下，是非常有用的方法。希望本文对大家有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。