您现在的位置是:首页 > Javascript
当前栏目
VUE——data配置项详细解析
2023-03-31 10:39:11 时间
1.data是什么?有什么作用?
data是Vue实例中一个配置项。用来存储vue实例或者组件里面的数值。
2.data的存在位置差异(data配置项存在于两种位置)
2.1.当data存在于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"
}
}
2.2当data存在于组件中时,它只能是一个函数
Vue.component('component1',{
template:`<div>组件</div>`,
data(){
return {
foo:"foo"
}
}
})
3.为什么在组件中data只能是一个函数呢?
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了一个对象。
相关文章
- 两行 JS 代码实现页面横向滚动特效
- 盘点JavaScript中数组遍历的全部方式(下篇)
- JavaScript中call()、apply()、bind()方法特点讲解
- 【前端】嘿,Nest.js实战开发系列之 Nest.js初体验
- 【CSS进阶】试试酷炫的 3D 视角
- Node.js vs Ruby on Rails:哪个最适合Web开发?
- 盘点用jQuery框架实现“for循环”的四种方式!
- Linkerd 2.10(Step by Step)之使用 Linkerd 进行分布式跟踪
- 【前端】你好,我叫TypeScript (五)装饰器
- React 性能优化 :包括原理、技巧、Demo、工具使用
- 20个 Javascript 技巧,提高我们的摸鱼时间!
- 函数指针定义的一个错误
- 原以为哈夫曼树、哈夫曼编码很难,结果……
- 五个常见的JavaScript内存错误
- 分布式事务 — 可靠消息最终一致性方案
- 前端百题斩——从验证点到手撕New操作符
- nodejs和php实现图片访问实时处理
- 大佬,怎么办?升级React17,Toast组件不能用了
- 解读官方博客:React18真的来了
- 7.1 万 Star!超实用,60 多种动画效果的 CSS 库