阅读 19

Vue.nextTick() 浅析

关于 Vue 里面nextTick()的理解,证明,和用法的简单阐述

执行时间

是一个异步函数,再DOM树完成之后执行。

语法

vue.nextTick( function(){
    // do sth
}) // 在外部调用

this.nextTick( () =>{
    // do sth
}) // 在内部调用
复制代码

代码证明

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        .center {text-align: center}
    </style>
</head>

<body>
    <div id = 'app'>
        <div> </div>
        <div> </div>
   </div>
   <script>
       var vue = new Vue({
           el:"#app",
           data:{
               needed_change: "sth"
           },
           methods:{
               /*
               定义两个函数,分别是
               change_nextTick() 使用nextTick()
               change() 没有使用 nextTick()
               */
               change_nextTick(){
                   this.$nextTick( () => {
                       console.log("value_nextTick", this.needed_change)
                   })
               },
               change(){
                   console.log("value",this.needed_change)
               }

           },
           created(){
            this.change();
            this.change_nextTick()
               // dom 为完成渲染两个函数几乎同时执行
           },
           mounted(){ 
               //一般在mounted完成之后dom已经完成渲染了,选择mounted测测试
                this.needed_change = "sth_after_mounted"
                console.log("dom rended")
            }
       })
   </script>
    
</body>
</html>
复制代码

执行结果

value sth  // 先打印sth,dom为完成渲染
dom rended // 渲染完成,且needed_change值改变
value_nextTick sth_after_mounted // 打印改变后的sth
复制代码

可以发现,我们在几乎相同的地方调用了两个方法,但是执行的顺序是不一样的,或者说可以证明nextTick()是在Dom完成渲染之后执行的。

案例

在不方便改变postcss的情况下
为了适配不同的移动端设备,为不同的页面设置rem对应的px。

created(){
    console.log("created")
    this.$nextTick( () =>{
        this.font_size = `${document.documentElement.clientWidth / 23.44 + 'px'}`
        console.log("font",`${document.documentElement.style.fontSize = this.font_size}`) 
    })
}
复制代码

如果觉得有帮助不妨点个赞再走,你们的支持是我更新的动力。

关注下面的标签,发现更多相似文章
评论