vue组件更新引起组件更新的原因，如何引发组件的更新
会不会引发vue中的组件更新，只要抓住：组件模板的显示结果会不会改变就行，如果显示结果会变，那就会更新组件，否则不会引发组件更新。
一、数据有没有渲染在页面上：
- 数据在模板（页面）里使用了：只要数据变了，自然会引起页面的更新，因为，影响了组件里的模板显示结果
- 数据没有在模板（页面）里使用：就算数据变了，也不会引起页面的更新，因为，不影响组件里的模板显示结果
二、数据有没有改动：
前提是，数据在模板里使用了。
1、数据赋值了，而且赋值前后的值不一样，引起组件的更新，因为，影响了组件里的模板显示结果
2、数据赋值了，但是赋值前后的值一样的，不会引起组件的更新，因为，没有影响了组件里的模板显示结果
<body >
<div id="app">
<p>{{ 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>
