vue里的data要用return返回的原因浅析

前端  /  管理员 发布于 4年前   293

官网的示例

var vm = new Vue({ el: '#example', data: { message: 'Hello' }});

项目中的写法

data() { return { message: 'Hello' } }

为什么要把data变成函数并return属性呢？

组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。

将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染。

PS：下面看下vue中data是否使用return的区别

// Vue实例中data属性是如下方式展示的：let app = newVue({  el: "#app",  data: { msg: '' },  methods: {}})// 使用组件化的项目中是如下方式展示的:export default{  data(){    return{      showLogin:true,      msg:''    }  },  methods:{}}

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

总结

以上所述是小编给大家介绍的vue里的data要用return返回的原因浅析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！

您可能感兴趣的文章:

• vue实例中data使用return包裹的方法
• vue 修改 data 数据问题并实时显示的方法
• Vue.js数据绑定之data属性
• vue 中自定义指令改变data中的值
• 详解Vue.js基于$.ajax获取数据并与组件的data绑定