vue重复赋值一个变量,界面渲染几次?
<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#异步更新队列