欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

为什么vue中的data用return返回

程序员文章站 2022-03-29 09:16:50
...

为什么vue中的data用return返回

一.原 [vue 修改对象方法]

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、在简单的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:{
       
    }
}

为何在大型项目中data需要使用return返回数据呢?

曰:不使用return包裹的数据会在项目的全局可见,会造成变量污染
   使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。
// Vue实例中data属性是如下方式展示的:
let app = newVue({

    el: "#app",
    data: { msg: '' },
    methods: {}
})
// 使用组件化的项目中是如下方式展示的:

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

// 为何在大型项目中data需要使用return返回数据呢?
// 答:不使用return包裹的数据会在项目的全局可见,会造成变量污染
return{
showLogin:true,
msg:’’
}
},
methods:{}
}


> // 为何在大型项目中data需要使用return返回数据呢?
> // 答:不使用return包裹的数据会在项目的`全局可见`,会造成变量污染
> // 使用return包裹后数据中变量`只在当前组件中生效`,不会影响其他组件