Vue细究——为什么vue中的data要用return返回

开始学vue的时候总是抱着“是什么，怎么用”的策略，最近搞了一些项目之后觉得是时候搞下“为什么了”

为什么在项目中data需要使用return返回数据呢？

大家知道用组件化来写vue项目,每个.vue都是一个个组件。那什么是vue中的组件？
官网写的很易懂——组件就是一个可复用的vue的实例。
这也就意味着如果你的data是一个普通的对象，那么所有复用这个实例的组件都将引用同一份数据，这就造成了数据污染！
这个时候如果我们将data封装成一个函数，我们在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染。

1.set方法,添加一个属性和值

set方法还可以为对象添加属性和值

<script>
    export default {
        data(){
            return {
                obj:{
                    name:'xiaoming'
                }
            }
        },
        methods:{
            change(){
                this.$set(this.obj,'age',12)
                console.log(this.obj);{name:xiaoming,age:12}
            }
        }
    }
</script>

2.Object.assign（ES6语法），添加多个属性和值

<script>
    export default {
        data(){
            return {
                obj:{
                    name:'xiaoming'
                }
            }
        },
        methods:{
            change(){
                this.obj=Object.assign({},this.obj,{
                      height:180,
                      eq:200
                  })
            }
        }
    }
</script>

为什么在大型项目中data需要使用return返回数据呢？答：不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
1
1、在简单的vue实例中看到的Vue实例中data属性，如下所示：

let app= newVue({

    el:"#app",
    data:{
        msg:''
    },
    methods:{
       
    }
})

2、在使用组件化的项目中，如下所示：
export default{
    data(){
        return {
            showLogin:true,
            // def_act: '/A_VUE',
　　　　　　　msg: 'hello vue',
            user:'',
            homeContent: false,
        }
    },
    methods:{
       
    }
}

为什么vue中的data用return返回
1、为什么在项目中data需要使用return返回数据呢？

不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

在简单的vue实例中看到的Vue实例中data属性是如下方式展示的：

let app= new****Vue({

    el:"#app",
    data:{
        msg:''
    },
    methods:{
       
    }
})

在使用组件化的项目中使用的是如下形式：

export default{
    data(){
        return {
            showLogin:true,
            // def_act: '/A_VUE',
            msg: 'hello vue',
            user:'',
            homeContent: false,
        }
    },

    methods:{
       
    }
}