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

傷城~ 2023-06-13 08:52 4阅读 0赞

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

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

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

二、**数据有没有改动：**

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

**    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>