八. Vue.js数据更新后dom操作-vue.nextTick

最新推荐文章于 2025-06-14 19:32:28 发布

原创最新推荐文章于 2025-06-14 19:32:28 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nextTick #数据更新操作dom

vue2.0 专栏收录该内容

20 篇文章

订阅专栏

本文探讨了Vue框架中响应式系统的运作原理，指出数据变化并不立即更新DOM，而是通过Vue.nextTick确保在DOM更新后执行相关操作。示例中展示了在尝试获取v-if指令控制的元素宽度时，如何正确利用Vue.nextTick来避免因DOM未及时更新导致的错误。

Vue响应式并不是数据发生改变后DOM 立即发生改变，而是按一定的策略进行 DOM 的更新，所有当我们改变数据时，立即对改变的DOM处理时就会出错，最明显的就是使用v-if或v-for的时候，针对这种改变数据要对DOM操作，Vue.nextTick起了重要作用

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <p ref="myWidth" v-if="showMe">{{ message }}</p>
            <button @click="getMyWidth">获取p元素宽度</button>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
         /*定义vue实例app2*/
        var app2 = new Vue({
            el: '#app2',
            data: {
                message: '你好！我时nextTick'
             },
            methods: {
                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;
                     })
                }
            }
        });

        
    </script>
</html>