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#异步更新队列

 

posted @ 2020-11-27 11:25  simple-love  阅读(1289)  评论(0编辑  收藏  举报