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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM