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

编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了vue里的data要用return返回的原因浅析,需要的朋友可以参考下

官网的示例

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

项目中的写法

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

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

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

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

PS:狼蚁网站SEO优化看下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返回的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板