最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

最新资讯：vue组件更新引起组件更新的原因，如何引发组件的更新

来源：博客园


(资料图片仅供参考)

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

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

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

二、数据有没有改动：

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

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

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

     
        
{{ i }}
                                     
       <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>

关键词：