专栏首页女程序员的日常_Lin为什么vue中的data必须是一个函数?

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

概述

1. 引用类型与函数区别

引用类型与函数

object是引用类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了。

js中只有函数构成作用域(只有函数的{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会互相影响。

用法

JS中有三种执行上下文类型:

const MyComponent = function(){};
MyComponent.prototype.data = {
  a:1,
  b:2
}
const component1 = new MyComponent();
const component2 = new MyComponent();

component1.data.a  = component2.data.a;
component1.data.b = 5;
component2.data.b  // 5

如果两个实例引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;

两个实例必须有自己各自的作用域才行,需要通过下列方法进行处理

const Mycomponent = function(){
  this.data = this.data();
}
Mycomponent.prototype.data = function(){
  return {
    a: 1,
    b: 2 
  }
}

这样每一个实例的data属性都是独立的,不会互相影响。

这是js本身的特性带来的,跟vue本身设计无关。

参考:

  • https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0
  • https://www.jianshu.com/p/839cbef3be41

本文分享自微信公众号 - 女程序员的日常(gh_df41d619fb70),作者:凛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于Linux环境变量

    最近在配置开发环境,遇到了很多不懂的问题。主要还是linux操作系统相关的,分享给宝宝们!一提到环境配置就不得不说环境变量,so,今天的主题是环境变量。

    用户3258338
  • 读书笔记-《了不起的nodejs》-TCP

    TCP是一个面向连接的协议,它保证了两台计算机之间数据传输的可靠性。如今的网络应用都是用TCP/IP协议进行通信的。

    用户3258338
  • 在nuxt.js项目中对axios进行封装

    不管是在服务端还是客户端获取数据都可以使用axios。在实际的开发过程中,每次请求中往往要携带一些自定义的参数或进行一些统一的处理,所以对axios进行封装是必...

    用户3258338
  • 寻找和为定值的两个数

    输入一个整数数组和一个整数,在数组中查找一对数,满足他们的和正好是输入的那个整数,如果有多对数的和等于输入的整数,则全部输出,要求输出的结果中不应该出现重复,如...

    陌无崖
  • WordPress发布/更新文章、提交/审核评论自动清理VeryCloud缓存

    上一篇文章分享了WordPress 发布文章评论自动刷新腾讯云 CDN 的教程,而博客现在还用到了 VeryCloud 的 CDN,正好有朋友在文章后面留言说 ...

    张戈
  • 学习笔记 | 基于FPGA的伪随机数发生器(附代码)

    今天是画师本人第一次和各位大侠见面,执笔绘画FPGA江湖,本人写了篇关于FPGA的伪随机数发生器学习笔记,这里分享给大家,仅供参考。

    FPGA技术江湖
  • 员工流动分析和预测

    公司员工,是一家公司成长和发展的关键要素之一。留不住优秀的员工,也就难以打造出卓越的公司。很多公司,比方说,惠普公司,IBM公司等,已经采用数据科学的手段,对内...

    陆勤_数据人网
  • python实现在线翻译

    砸漏
  • SAP Spartacus里使用Observable访问Component数据

    在自定义Component的constructor里,无法直接访问通过构造函数参数注入的data数据:

    Jerry Wang
  • 【go】剑指offer:常见排序算法

    冒泡排序是比较简单的排序算法,它的关键思想是移动指针不断的进行两两比较,将最大的数字不断的进行更换位置,直至到最后,即完成一趟比较,都会寻找到最大的数字,且最大...

    陌无崖

扫码关注云+社区

领取腾讯云代金券