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

    技术2025-08-22  11

    开始学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:{             } }

     

    Processed: 0.015, SQL: 9