关于更新数据后虚拟dom对比更新渲染

最新推荐文章于 2023-05-06 17:20:22 发布

_老逄

最新推荐文章于 2023-05-06 17:20:22 发布

阅读量1.2k

点赞数 2

分类专栏： vue 文章标签：虚拟dom更新渲染

本文链接：https://blog.youkuaiyun.com/qq_45134087/article/details/93338467

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

关于更新数据后虚拟dom对比更新渲染

拿Vue官网的一个例子

<body>
    <div id="app">
        <example></example>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        Vue.component("example",{
            template:"<div><p>{{message}}</p ref='a'><button @click='updataMessage'>《更新按钮》</button></div>",
            data(){
                return{
                    message:"未更新"
                }
            },
            methods:{
                updataMessage(){
                    this.message = "已更新"
                    console.log(this.$el.textContent) //未更新
                    console.log(this.message)  //已更新
                    this.$nextTick(()=>{
                        console.log(this.$el.textContent)// 已更新
                    })
                }
            }
        })
        new Vue({
            el:"#app"
        })
    </script>
</body>

点击按钮执行updataMessage方法