nextTick与ref的介绍与案例

最新推荐文章于 2023-06-05 10:58:55 发布

摩羯座**

最新推荐文章于 2023-06-05 10:58:55 发布

阅读量202

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48864616/article/details/122329762

版权

笔记专栏收录该内容

102 篇文章 0 订阅

订阅专栏

nextTick

 vue:异步更新队列。
  vue在观察到数据变化时，并不会直接更新DOM，而是开启一个队列（让大家都去排队），缓冲在同一事件中所有的数据变化。

  for循环，对num++执行100次，在页面上输出结果。
  1.num的值每改变一次，就操作DOM修改一下页面的结果 （操作了100次的DOM）
  2.等100次循环执行完了，操作DOM修改一下页面的结果  （只操作了1次DOM）

  nextTick就是用来知道什么时候DOM更新完成的。


  1.active的值发现了变化
  2.看看还有没有其他的值要变化
  3.所有的值都变化了，再去更新DOM
  4.DOM更新完成后，执行nextTick中的回调函数。

代码示例
css部分

  <style>
        #box {
            width: 300px;
            height: 300px;
            border-radius: 10px;
            margin-top: 10px;
            margin-left: 10px;
            background-color: lightsalmon;
        }
    </style>

body部分

<body>
    <div id="app">
        <button @click="getInfo">显示/隐藏</button>
        <p>{{num}}</p>
        <input type="text" v-model="num">
        <div id="box" v-if="isActive">
            <p>昨天小雪</p>
        </div>
        <button @click="getBox">获取Box内容</button>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                isActive: false,
                num: 10
            },
            methods: {
                getInfo() {
                    this.isActive = !this.isActive
                     //在执行上面代码之后，box并不会立刻创建，而是等待该事件执行完。
                   console.log(document.getElementById("box"));    //undefind
                   this.$nextTick(()=>{
                       let data = document.getElementById("box").innerHTML;
                       console.log(data);   //<p>昨天小雪</p>
                   })
                },
                getBox(){
                    console.log(document.getElementById("box"));   //  <div id="box"><p>昨天小雪</p> </div>
                }
            }


        })


    </script>
</body>

ref

 ref可以获取本页面的DOM元素。

    （1）在元素上  ref="自定义名称"
    （2）在获取时  this.$refs.自定义名称

    ref作用在组件上时，通过 this.$refs.自定义名称获取的不是元素节点，而是 vue组件对象。

    $el可以获取 组件的模板内容

代码示例

<body>
    <div id="app">
        <button @click="fn">点击</button>
        <div ref="box">123</div>
        <hello ref="tk"></hello>
    </div>
     <template id="hello">
        <div>
            {{msg}}
        </div>
   </template>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                fn(){
                    console.log(this.$refs.tk.msg);   //可以打印听课不停学
                } 
            },
            components:{
                hello:{
                    template:"#hello",
                    data(){
                        return {
                            msg:"听课不停学",
                        }
                    }
                }
            }
        })
    </script>
</body>

摩羯座**

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nextTick与ref的介绍与案例

nextTick vue:异步更新队列。 vue在观察到数据变化时，并不会直接更新DOM，而是开启一个队列（让大家都去排队），缓冲在同一事件中所有的数据变化。 for循环，对num++执行100次，在页面上输出结果。 1.num的值每改变一次，就操作DOM修改一下页面的结果（操作了100次的DOM） 2.等100次循环执行完了，操作DOM修改一下页面的结果（只操作了1次DOM） nextTick就是用来知道什么时候DOM更新完成的。 1.active的值发现了变化
复制链接

扫一扫