强制更新($forceUpdate)
在vue中，如果data中有基本数据类型变量:age，修改他，页面会自动更新。
但如果data中的变量为数组或对象（引用数据类型），我们直接去给某个对象或数组添加属性，页面是识别不到的，不会同步更新；
<template>
<div id="app">
name：<p>{{userInfo.name}}</p>
age：<p>{{userInfo.age}}</p>
<button @click="updateName">增加age属性</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
userInfo:{
name:'末晨曦吖'
}
}
},
mounted() {
},
components:{
},
methods:{
updateName(){
this.userInfo.age = 18
}
}
}
</script>
<style scoped>
</style>
我们尝试给userInfo对象添加属性值，发现页面其实并没有变化
<template>
<div id="app">
name：<p>{{userInfo.name}}</p>
age：<p>{{userInfo.age}}</p>
<div v-for="(item,index) in list" :key="index">{{ item.name }} --- {{ item.age }}</div>
<button @click="updateName">增加age属性</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
userInfo:{
name:'末晨曦吖'
},
list:[
{ name:'末' }
]
}
},
mounted() {
},
components:{
},
methods:{
updateName(){
// 对象
// this.userInfo.age = 18
// this.$forceUpdate() // 第一种解决方式： this.$forceUpdate(); 强制刷新 同等效果的：window.location.reload() 不推荐
// this.$set(this.userInfo,'age',18) // 第二种解决方式 推荐使用
// 数组
// this.list[0].age = 18
// this.$forceUpdate()
// this.$set(this.list[0],'age',18)
}
}
}
</script>
<style scoped>
</style>
通过 v-once 创建低开销的静态组件
渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来，就像这样：
Vue.component('terms-of-service', {
template: `
<div v-once>
<h1>Terms of Service</h1>
... a lot of static content ...
</div>
`
})
