Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue 中 data 为什么必须是一个函数

Vue 中 data 为什么必须是一个函数

作者头像
Leophen
发布于 2020-10-14 07:31:48
发布于 2020-10-14 07:31:48
1.3K00
代码可运行
举报
文章被收录于专栏:Web前端开发Web前端开发
运行总次数:0
代码可运行

为什么 Vue 中的 data 必须是个函数?

官方文档的解释如下:

为什么会出现上述“影响到其它所有实例”的情况呢?

其实这个问题取决于 JS 原型链知识,而非 Vue 我们先来看不是函数的情况:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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,造成一个变了全都会变的结果 接下来我们用函数改造以上代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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,类似于给每个组件实例创建一个私有的数据空间,保护各自的数据互不影响

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
解锁本地大模型的潜力:Ollama API 调用深度解析与实践指南
用ChatGPT、Claude、Gemini辅助学习更高效!注册ChatGPT、Claude、Gemini等账号,推荐使用https://yeka.ai/i/SUCCESS,输入推荐码SUCCESS,开卡费88折。 随着大语言模型(LLM)的快速发展,如何在本地高效部署和调用这些模型成为开发者关注的焦点。Ollama 作为一个轻量级开源框架,提供了一套简单而强大的 API 接口,支持本地运行多种预训练模型。本文深入探讨 Ollama API 的调用方法,包括生成补全、聊天对话、模型管理等功能,并通过丰富的代码示例展示其实践应用。从基础的安装配置到高级的流式响应处理,本文不仅详细解析了 API 的请求格式与参数,还结合 Python 编程语言,提供了大量带中文注释的代码,帮助读者快速上手。此外,文章还探讨了 Ollama 的架构优势及其在本地化场景中的潜力,适合希望在无 GPU 环境下运行大模型的开发者。通过本文,读者将掌握如何利用 Ollama API 构建本地化 AI 应用,解锁大模型的无限可能。
蒙娜丽宁
2025/04/13
1.5K0
解锁本地大模型的潜力:Ollama API 调用深度解析与实践指南
DeepSeek 本地化新篇章:Ollama 兼容 OpenAI API 的深度解析与部署实践
随着大语言模型(LLM)的快速发展,开发者对本地化部署和 API 兼容性的需求日益增加。Ollama 作为一个轻量级开源框架,通过兼容 OpenAI API 的接口设计,为本地运行 DeepSeek 等大模型提供了便捷途径。本文深入探讨 Ollama 如何实现与 OpenAI API 的无缝对接,结合 DeepSeek 模型的本地部署,展示其在文本生成、聊天对话及流式响应中的应用。从安装配置到高级功能实现,本文提供了大量带中文注释的 Python 代码示例,涵盖 Curl 请求、SDK 调用及错误处理等内容。此外,文章还分析了这种兼容性的优势与局限,适合希望在无 GPU 环境下运行 DeepSeek 或迁移 OpenAI 项目的开发者。通过本文,读者将掌握如何利用 Ollama 将 DeepSeek 等模型融入本地化开发,充分发挥其潜力。
蒙娜丽宁
2025/04/15
1.4K0
DeepSeek 本地化新篇章:Ollama 兼容 OpenAI API 的深度解析与部署实践
Ollama本地部署大模型总结
今天计划对之前ollama系列做个回顾,从如何部署到API使用,整理到一篇内容中,提供给大家参考。
拓荒者IT
2025/03/30
1.4K0
Ollama本地部署大模型总结
Ollama系列05:Ollama API 使用指南
本文是Ollama系列教程的第5篇,在前面的4篇内容中,给大家分享了如何再本地通过Ollama运行DeepSeek等大模型,演示了chatbox、CherryStudio等UI界面中集成Ollama的服务,并介绍了如何通过cherryStudio构建私有知识库。
拓荒者IT
2025/03/21
1.4K0
Ollama系列05:Ollama API 使用指南
DeepSeek从云端模型部署到应用开发-01-社区内一键部署DeepSeek
DeepSeek现在流行度正盛,今年的机器学习就用他作为一个开端,开整。 本文是基于百度aistudio的在线课程《DeepSeek从云端模型部署到应用开发》。
IT从业者张某某
2025/03/15
1710
DeepSeek从云端模型部署到应用开发-01-社区内一键部署DeepSeek
Ollama 本地CPU部署开源大模型
如 Facebook的llama3, 谷歌的gemma, 微软的phi3,阿里的qwen2 等模型。
lyhue1991
2024/06/26
2.7K0
Ollama 本地CPU部署开源大模型
腾讯云HAI部署DeepSeek结合Ollama API搭建智能对话系统
本文将详细介绍如何在腾讯云HAI平台上部署DeepSeek模型,并配置使用Ollama API服务以实现对外部请求的支持。通过对前期准备、部署流程、API服务配置及使用的详细阐述,希望能为读者提供一个全面且实用的指南,助力AI应用的高效开发和部署。
Front_Yue
2025/02/10
1.2K5
腾讯云HAI部署DeepSeek结合Ollama API搭建智能对话系统
ollama安装初体验
Ollama官网:https://ollama.com/,官方网站的介绍就一句话:Get up and running with large language models. (开始使用大语言模型。)下载直接双击安装即可,由于网络原因可能下载不了,这里也可以去国内aistudio.baidu.com/datasetdetail/314989下载。 Ollama是一个开源的 LLM(大型语言模型)服务工具,用于简化在本地运行大语言模型、降低使用大语言模型的门槛,使得大模型的开发者、研究人员和爱好者能够在本地环境快速实验、管理和部署最新大语言模型,包括如Qwen2、Llama3、Phi3、Gemma2等开源的大型语言模型。
云未归来
2025/07/16
1060
ollama安装初体验
浅谈宇宙最强开源大模型Llama3如何应用
北京时间4月19日凌晨,Meta公司通过其官方网站宣布了Llama系列的最新开源大模型:Llama-3。
AIGC新知
2024/10/08
4790
浅谈宇宙最强开源大模型Llama3如何应用
绝了!k3s (k8s) 安装 ollama 运行 deepseek 全流程揭秘,yaml全公开
在容器编排的世界中,k3s (k8s) 无疑是备受瞩目的存在。此次聚焦在 k3s (k8s) 环境下安装 ollama,并实现运行 deepseek。首先映入眼帘的是一个关键的 yaml 文件 ——ollama.yaml 。这个文件犹如整个部署流程的指挥棒,规定各项参数和配置信息。ollama.yaml 内容如下:
福大大架构师每日一题
2025/03/06
2710
绝了!k3s (k8s) 安装 ollama 运行 deepseek 全流程揭秘,yaml全公开
DeepSeek从云端模型部署到应用开发-03-实战指南:从部署到RAG Agent
Ollama理论上不刚需显存,只需要有足够的内存(RAM),基础版环境刚好卡到门槛,但是为了优化使用体验,建议通过V100 16GB启动项目,而且每日运行项目就送8算力点!!!
IT从业者张某某
2025/03/15
2550
DeepSeek从云端模型部署到应用开发-03-实战指南:从部署到RAG Agent
本地大模型部署指南:Ollama+Llama3.2从入门到API调用
本文来介绍一下怎么下载 Ollama 并部署 AI 大模型(DeepSeek-R1、Llama 3.2 等)。通过 Ollama 这一开源的大语言模型服务工具,你就可以在自己的电脑上跑其它开源的 AI 模型。接下来,我们将分步骤说明如何完成下载和安装,以便你能够轻松地与 AI 开展对话。
用户8721171
2025/03/13
1.4K0
使用 HAI 结合 Ollama API 打造高效文本生成系统:deepseek-r1:7b 实践指南
在人工智能的浪潮中,越来越多的开发者和企业开始尝试将大规模语言模型(LLMs)部署到本地环境中,以降低成本、提高数据安全性并提升应用性能。高性能应用服务HAI 和 Ollama 作为一种新兴的工具,为开发者提供了一个轻松的本地部署与调用接口,支持多种大模型的使用与管理。
不惑
2025/02/06
8782
使用 HAI 结合 Ollama API 打造高效文本生成系统:deepseek-r1:7b 实践指南
LangChain+Ollama+DeepSeek AI 应用开发:LangChain 模型 IO 模块认知
Lang Chain 是在 LLM 爆发之后,最早有一定知名度的开源工具,其他生态大部分工具也都基于 Lang Chain 的架构方式,所以通过学习 Lang Chain 可以了解 大部分的 AI 应用工具,今天和小伙伴分享 Lang Chain 模块中的 模型 IO
山河已无恙
2025/03/13
7690
LangChain+Ollama+DeepSeek AI 应用开发:LangChain 模型 IO 模块认知
119K star!无需GPU轻松本地部署多款大模型,DeepSeek支持!这个开源神器绝了
119K star!无需GPU轻松本地部署多款大模型,DeepSeek支持!这个开源神器绝了
小华同学ai
2025/04/10
3900
119K star!无需GPU轻松本地部署多款大模型,DeepSeek支持!这个开源神器绝了
FastAPI开发AI应用一:实现连续多轮对话
本文将通过一个完整的实战项目,介绍如何使用 FastAPI 框架开发 AI 聊天应用,重点讲解连续多轮对话的实现原理和核心技术。即使你是编程新手,也能跟着本教程一步步构建出功能完整的 AI 聊天应用。
wayn
2025/07/03
2120
FastAPI开发AI应用一:实现连续多轮对话
5分钟本地部署史上最强开源大模型Llama3
几天前meta发布了史上最强开源大模型Llama3,要想免费使用Llama3,除了去官网 https://llama.meta.com/llama3/ 在线使用外,还可以本地部署。
后端云
2024/05/06
8.3K0
5分钟本地部署史上最强开源大模型Llama3
[大模型]LLaMA3-8B-Instruct WebDemo 部署
在 autodl 平台中租赁一个 3090 等 24G 显存的显卡机器,如下图所示镜像选择 PyTorch-->2.1.0-->3.10(ubuntu20.04)-->12.1
云未归来
2025/07/21
1030
[大模型]LLaMA3-8B-Instruct WebDemo 部署
大模型llm:Ollama部署llama3学习入门llm
Llama 3 是一个自回归语言模型(an auto-regressive language),它使用优化的 transformer 架构。调整后的版本使用监督微调 (SFT) 和带有人类反馈的强化学习 (RLHF),以符合人类对有用性和安全性的偏好。
黄规速
2024/05/24
6K0
大模型llm:Ollama部署llama3学习入门llm
大模型 API 调用从 0 到 1 (以智谱 AI 为例)
在 NoteBook 中,我们可以通过虚拟环境安装指定版本的 Python,具体教程请参考:ModelArts codelab 创建虚拟环境切换 Python
胡琦
2025/05/20
5400
大模型 API 调用从 0 到 1 (以智谱 AI 为例)
推荐阅读
相关推荐
解锁本地大模型的潜力:Ollama API 调用深度解析与实践指南
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验