Vue 中 data 为什么必须是一个函数
时间:2022-07-26
本文章向大家介绍Vue 中 data 为什么必须是一个函数,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
为什么 Vue 中的 data 必须是个函数?
官方文档的解释如下:
为什么会出现上述“影响到其它所有实例”的情况呢?
其实这个问题取决于 JS 原型链知识,而非 Vue 我们先来看不是函数的情况:
function Component() {
}
Component.prototype.data = {
name: 'Morty',
age: 14,
}
var componentA = new Component()
var componentB = new Component()
componentA.data.age = 40
console.log(componentA, componentB) // 40 40
可以看到,componentA 和 componentB data 之间指向了同一个内存地址,age 都变成了 40,导致了问题 因此,data 如果单纯的写成对象形式,会使得所有组件实例共用了一份 data,造成一个变了全都会变的结果 接下来我们用函数改造以上代码:
function Component() {
this.data = this.data()
}
Component.prototype.data = function () {
return {
name: 'Morty',
age: 14,
}
}
var componentA = new Component()
var componentB = new Component()
componentA.data.age = 40
console.log(componentA, componentB) // 40 14
这就很好的解释了为什么 Vue 组件中的 data 需要用函数了,当 data 是函数的时候,每一个实例的 data 属性都是独立的,互不影响
总结
Vue 中的 data 必须是个函数,因为当 data 是函数时,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,实例化几次就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变 简单来说,就是为了保证组件的独立性和可复用性,如果 data 是个函数的话,每复用一次组件就会返回新的 data,类似于给每个组件实例创建一个私有的数据空间,保护各自的数据互不影响
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法