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,类似于给每个组件实例创建一个私有的数据空间,保护各自的数据互不影响
- CI学习 CCNET Config 第一天
- IBatisNet基础组件
- 学习altas笔记[客户端JS和Altas环境初始化关系和DataTable返回数据的客户端处理]
- 在Windows 8 Hyper-V下的安装CentOS 6和SSH配置
- WordPress RSS Feed 优化/设置技巧六则
- SourceTree 基本介绍
- 学习Altas 笔记[JS简单调用服务端方法]
- 使用WinSCP软件在windows和Linux中进行文件传输
- 线程安全的Generic Dictionary
- Python 项目实践三(Web应用程序)第五篇
- CentOS 6.3下 安装 Mono 3.2 和Jexus 5.4
- Python 项目实践三(Web应用程序)第四篇
- 负载均衡环境下缓存处理
- WordPress Ajax 异步加载 自定义评论表情
- 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 数组属性和方法
- 基于机器学习的文本分类!
- JVM系列之:再谈java中的safepoint
- 《图解算法》第2章 选择排序
- 《图解算法》第3章 递归
- 《图解算法》第4章 快速排序
- 基于H5的Speedtest网速测试工具搭建
- Phaser类在性能测试中应用
- Mockito框架Mock Void方法
- 未来的神器fiddler Everywhere
- Sentinel整合Apollo进行规则持久化
- DevTools(Chrome 85)的新功能
- 在Node.js中处理Zip文件
- 构建一个带身份验证的 Deno 应用
- Sentinel整合Apollo进行规则持久化(二)
- Sentinel整合Apollo进行规则持久化(三)