vue组件更新_引起组件更新的起因，什么会引发组件的更新

最新推荐文章于 2024-07-11 09:03:35 发布

田江

最新推荐文章于 2024-07-11 09:03:35 发布

阅读量1.4k

点赞数 2

分类专栏： vue 文章标签： vue vue生命周期 beforeUpdate

本文链接：https://blog.csdn.net/jiang7701037/article/details/103077021

版权

vue 专栏收录该内容

49 篇文章 25 订阅

订阅专栏

会不会引发vue中的组件更新，只要抓住：组件模板的显示结果会不会改变就行，如果显示结果会变，那就会更新组件，否则不会引发组件更新

一、数据有没有渲染在页面上：

数据在模板（页面）里使用了：只要数据变了，自然会引起页面的更新，因为，影响了组件里的模板显示结果
数据没有在模板（页面）里使用：就算数据变了，也不会引起页面的更新，因为，不影响组件里的模板显示结果

二、数据有没有改动：

前提是，数据在模板里使用了。

1、数据赋值了，而且赋值前后的值不一样，引起组件的更新，因为，影响了组件里的模板显示结果

2、数据赋值了，但是赋值前后的值一样的，不会引起组件的更新，因为，没有影响了组件里的模板显示结果

运行以下代码，点击按钮，看看控制台里的变化

<body >
     <div id="app">
        <p>i显示在页面上： {{i}}</p>
        <input type="button" value="i++" @click="changeI()" >
        <input type="button" value="j++" @click="changeJ()" >
        <input type="button" value="改变i，但是赋值为固定的值" @click="setI()" >
        <input type="button" value="j++" @click="changeJ()" >
     </div>    
 </body>
 </html>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
 
 let vm = new Vue({
     el:'#app',
     data:{    
       i:0,
       j:0
   },
   methods:{
        changeI(){
          this.i++;//由于i显示渲染在模板了，所以，引起了组件的更新，即调用了钩子函数beforeUpdate
       },
        changeJ(){
          this.j++;//由于j没有渲染在模板上，所以，改变j不会，引起组件更新
       },
       setI(){
           this.i=20;//给i赋值为20，会引起组件的更新，但是如果，再次给i赋值为20（值没有变），则不会引起组件更新
       }
   },
   beforeUpdate:function(){
       console.log("beforeUpdate");
   }
});
 
 </script>

田江

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue组件更新_引起组件更新的起因，什么会引发组件的更新

会不会引发vue中的组件更新，只要抓住：组件模板的显示结果会不会改变就行，如果显示结果会变，那就会更新组件，否则不会引发组件更新一、数据有没有渲染在页面上：数据在模板（页面）里使用了：只要数据变了，自然会引起页面的更新，因为，影响了组件里的模板显示结果数据没有在模板（页面）里使用：就算数据变了，也不会引起页面的更新，因为，不影响组件里的模板显示结果二、数据有没有改动...
复制链接

扫一扫

专栏目录