为什么data属性是一个函数而不是一个对象？_55.为什么data属性是一个函数而不是一个对象-CSDN博客

本文链接：https://blog.csdn.net/weixin_41764042/article/details/112850940

vue.js组件中的data属性为什么是一个函数而不是一个对象？

首先我们需要知道，data属性可以是一个函数也可以是一个对象，比如在vue实例中，它可以设置为对象：

<script>
    let vm = new Vue({
        el:'#app',
        data:{}
    })
</script>

而在组件中就需要将data设置为函数类型了，因为我们知道vue组件是需要进行复用的，假设data属性是一个对象的话，就意味着组件在复用的时候，其中的data用的是一个内存地址，在组件A中的变动也会体现在组件B中，而如果data属性是一个函数就不会出现这样的问题，我们每次在调用组件的时候data函数都会为我们返回一个新的对象，由各组件独立维护。

其实就是因为对象是一个引用类型。

Vue.component('demo', {
  template: `<div></div>`,
  data: {
    demo: 'ok'
  }
})
//组件中data属性为对象会报错!!!

组件中data属性正确的写法应该是这样：

Vue.component('demo', {
   template: `<div></div>`,
   data(){
       return {
            demo:'ok'
        }
    }
})