您好,登录后才能下订单哦!
本文小编为大家详细介绍“VUE中data配置的作用是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“VUE中data配置的作用是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
data是Vue实例中一个配置项。用来存储vue实例或者组件里面的数值。
在Vue的data属性定义以下数据类型:
1、字符串
2、整数
3、数组
4、对象
5、对象数组
data: { // 定义字符串 name: "谷哥的小弟", // 定义整数 number:9527, // 定义数组 hobby:["篮球","足球","击剑"], // 定义对象 user:{id: 21, name: "zxx", age: 50}, // 定义对象数组 users:[ {id: 21, name: "zxx", age: 50}, {id: 22, name: "zxc", age: 51}, {id: 23, name: "zcc", age: 52}, ] }
2.1也可以是一个函数的形式。
const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }
Vue.component('component1',{ template:`<div>组件</div>`, data(){ return { foo:"foo" } } })
Vue的官方文档中也有说组件中的data必须使用函数否则会报错,这是为什么呢?
这就要追溯到我们的Jvascript的对象了,众所周知Javascript的对象属于引用数据类型,如果将一个对象赋值给另一个对象他并不是将该对象的值赋给新变量,而是在内存中将起初申明的对象去指向这个新对象。
let obj = { name: "小明", age:19 } let obj1 = obj obj.name = "小红" // 此时 obj1.name == "小红" // 并且 obj.name == "小红"
这种情况下如果修改obj1中的属性,obj的数据也会发生变化
为什么要提到这个呢 我们就要理解一下组件 其实就类似原生js的一个构造函数
我们去调用的组件就是相当于原生js我们去实例化的对象加入我们申明一个构造函数 person并改变其中的值
function Person(name,age){ this.name = nmae; this.age = age ; this.race = "汉族" } let ming = new Person("xiaoming",19) let hong = new Person("xiaohong",20) console.log(ming) console.log(hong) // 此时如果我们把小明的名族改了 ming.race="维吾尔族" console.log(ming) console.log(hong) // 我们再去查看一下会发现,小明小红都变成了维吾尔族
所以,为了防止对象的变量修改,在组件的data必须要用函数的形式存在,因为只有函数有函数的封闭作用域,这也就是为什么Vue的设计者为什么在组件中使用了一个data却再次return了一个对象。
读到这里,这篇“VUE中data配置的作用是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。