zoukankan      html  css  js  c++  java
  • vue中data为什么是函数而不是对象

    vue组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的.

    基于这一理念,组件每复用一次,data数据就会被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响。

    1、函数

    <template>
        <div class="title">
            <h1>按钮被点击了{{ count }}次</h1>
            <button v-on:click="count++">点击</button>
        </div>
    </template>
    <script>
        export default {
          name: 'BtnCount',
          data () {
            return {
              count: 0
            }
          }
        }
    </script>
    <style scoped>
        .title {
            background-color: red
        }
    </style>

    结果:

    2、对象

    <template>
        <div class="title">
            <h1>按钮被点击了{{ count }}次</h1>
            <button v-on:click="count++">点击</button>
        </div>
    </template>
    <script>
        export default {
          name: 'BtnCount',
          data () {
            
              count: 0
            
          }
        }
    </script>
    <style scoped>
        .title {
            background-color: red
        }
    </style>

    结果:

     总结:如果data是对象的话,每当被复用是,复用的对象和源对象都会指向同一个内存地址(浅拷贝),互相之间相互影响,所以要是函数

  • 相关阅读:
    3.09课·········打印矩形,三角形和菱形
    3.09课·········for穷举和迭代
    3.09课·········for循环
    Django的中间件
    Cookie和Session
    Django之ORM
    Django ORM那些相关操作
    Django form表单
    Django model 中的 class Meta 详解
    pymysql模块的使用
  • 原文地址:https://www.cnblogs.com/xxflz/p/14116421.html
Copyright © 2011-2022 走看看