Why do data in vue return with return

I. original [vue modify object method]

1.set method, add a property and value

The set method can also add properties and values to an object

<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 syntax), add multiple attributes and values

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

Why does data need to use return to return data in large projects? Answer: the data without return package will be globally visible in the project, which will cause variable pollution; after using return package, the variables in the data will only take effect in the current component, and will not affect other components.

1. See the data attribute in Vue instance in simple Vue instance as follows:

let app= newVue({

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

2,In projects that use componentization, it is as follows:
export default{
    data(){
        return {
            showLogin:true,
            // def_act: '/A_VUE',
　　　　　　　msg: 'hello vue',
            user:'',
            homeContent: false,
        }
    },
    methods:{
       
    }
}

Why do data in vue return with return

1. Why does data need to use return to return data in the project?

Data not wrapped with return will be globally visible in the project, causing variable pollution; variables in the data will only take effect in the current component after wrapping with return, and will not affect other components.

When a component is defined, data must be declared as a function that returns an initial data object, because the component may be used to create multiple instances. If data is still a pure object, all instances will share and reference the same data object! By providing the data function, each time a new instance is created, we can call the data function to return a new copy of the original data object.

The data attribute in the Vue instance seen in the simple Vue instance is shown as follows:

let app= new****Vue({

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


//The following forms are used in projects using componentization:


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

    methods:{
       
    }
}

//Why does data need to use return to return data in large projects?

//Yue: the data without return package will be globally visible in the project, which will cause variable pollution.
   //After using the return package, the variables in the data only take effect in the current component and will not affect other components.

// The data attribute in the Vue instance is shown as follows:
let app = newVue({

    el: "#app",
    data: { msg: '' },
    methods: {}
})
// The projects using componentization are shown as follows:

export default{
    data(){
        return{
            showLogin:true,
            msg:''
        }
    },
    methods:{}
}

// Why does data need to use return to return data in large projects?
// Answer: the data without return package will be in the projectGlobally visible，Variable pollution
return{
showLogin:true,
msg:''
}
},
methods:{}
}

> // Why does data need to use return to return data in large projects?
> // A: if you do not use return package data, it will be "globally visible" in the project, which will cause variable pollution.
> // After using the return package, the variables in the data will only take effect in the current component and will not affect other components.