<template>
<div id="app" ref="app">
<div @click="clisk">点我改变</div>
<!-- 通过这个样式函数打印可以看见渲染几次-->
<div :class="setFn()">{{ name }}</div>
<div :class="setFn2()">{{ obj.name }}</div>
</div>
</template>
<script>
export default {
data () {
return {
name: '',
obj: {name: ''}
}
},
// 界面会渲染一次!
// created () {
// this.name = '1'
// this.name = '2'
// },
// 这样的方式,界面渲染了2次,
mounted () {
this.name = '1'
this.name = '2'
this.obj.name = '3'
this.obj.name = '4'
},
methods: {
// 这样的方式 界面渲染了一次
clisk () {
this.name = '张三'
this.name = '李三'
this.obj.name = '3'
this.obj.name = '4'
},
setFn () {
console.log(1)
},
setFn2 () {
console.log(2)
}
},
// 页面更新后只渲染一次
updated () {
console.log(123)
}
}
</script>
https://cn.vuejs.org/v2/guide/reactivity.html#异步更新队列