会不会引发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>