vue中的data要用return返回

原创已于 2022-11-06 12:50:45 修改 · 4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #前端框架

于 2022-03-17 08:55:06 首次发布

vue 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了Vue组件中数据管理的重要原则，强调了使用return包裹数据以避免全局变量污染，确保组件实例间的数据隔离。同时，解释了在组件定义时为何data必须是一个返回初始数据对象的函数，以支持组件的复用。通过示例展示了简单Vue实例与组件实例化的正确数据处理方式。

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

2.当一个组件被定义，data必须为其声明返回一个初始数据对象的函数，因为组件可能被用来创建多个实例

//简单vue实例中data属性是如下方式展示  对象式
let app = newVue ({
    el:"#app",
    data:{
        name:''
   }
})


//在组件实例化项目中  函数式 组件必须使用

export default{
   data(){
     return{
       name:''
        }
      }
}