我猜你不会的nexttick

最新推荐文章于 2022-02-28 23:04:21 发布

weixin_45184807

最新推荐文章于 2022-02-28 23:04:21 发布

阅读量75

点赞数

分类专栏： vue 文章标签： vue

原文链接：https://mp.weixin.qq.com/s/Gaa7tDLR-YhmIuCbiBqjdg

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

题目

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div id="div">{{a}}</div>
      <button @click="btn">btn</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',

        data: {
          a: 1,
        },
        methods: {
          btn() {
            const div = document.getElementById('div')
            this.a = 3
            this.a = 2
            this.$nextTick(() => {
              console.log('nextTick', div.innerHTML)
            })
            console.log(div.innerHTML)

            // const div = document.getElementById('div')
            // this.$nextTick(() => {
            //   console.log('nextTick', div.innerHTML)
            // })
            // this.a = 2
            // console.log(div.innerHTML)
          },
        },
      })
    </script>
  </body>
</html>

首先看一下官网是怎么介绍nextTick的连接

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

所以说这个方法就是在数据改变后执行的

所以

const div = document.getElementById('div')
this.a = 3
this.a = 2
this.$nextTick(() => {
  console.log('nextTick', div.innerHTML)
})
console.log(div.innerHTML)

在这里插入图片描述

所以这些都不对

看这里
https://mp.weixin.qq.com/s/Gaa7tDLR-YhmIuCbiBqjdg

weixin_45184807

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我猜你不会的nexttick

题目<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body>
复制链接

扫一扫