Vue 组件中数据的定义

原创于 2019-07-30 21:54:30 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

文章标签：

本文深入解析Vue组件中data选项为何采用函数形式，而非根实例的对象形式。探讨了组件数据独立性的必要性，防止多人开发时的数据冲突，以及利用JavaScript函数式编程特性确保作用域隔离。同时，解释了data函数返回对象的原因，涉及ES5 Object.defineProperty的getter和setter设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 组件中数据的定义

为什么组件中的data选项是一个函数，而根实例中是对象
原因：
（1）. 组件是一个独立的整体，那么数据也应该是一个独立的【 80% 】
（2）. 多人开发，数据如果不是独立的，那么数据会冲突【 5% 】
（3）. javascript最大的特点：函数式编程，而函数本身就有一个独立作用域【 15% 】
为什么组件中的data函数要有返回值，并且返回值是一个对象，不能是其他的吗？
原因：因为data选项要经过es5 Object.defineProperty 属性进行getter和setter设置
组件中数据的使用
组件的数据，使用范围只能在组件的模板中

<body>
      <div id="app">
            <Hello></Hello>
      </div>
      <template id="hello">
            <div> {{ msg }} </div>
      </template>
</body>
<script src="../lib/vue.js"></script>
<script>
     Vue.component('Hello',{
          template: '#hello',
          data () {
             return {
                 msg: '今天热的要死'  // 组件的数据，使用范围只能在组件的模板中
             }
          }
      })
      new Vue({
            el: '#app'
      })
</script>

在这里插入图片描述