专栏首页Devops专栏37. Vue组件的data使用

37. Vue组件的data使用

官网说明

data 必须是一个函数

前言

上一篇章讲解了Vue组件的定义以及全局、私有创建的方式、相关注意事项。那么本篇章再来看看另一个注意点data

vm实例中的data是可以直接定义属性值,如下:

但是,在组件中data如果这样定义属性值,那么就会报错。而且必须是一个函数,下面来逐步示例说明。

示例1:组件中的data定义属性值,验证是否会报错

1.首先执行类似VM示例定义data的属性值

2.打开浏览器,查看信息

可以从错误信息中看出,在组件中的data只能返回一个function,如果直接定义值,那么则会直接报错。

3.修改data返回一个function方法

4.打开浏览器,查看信息

那么是不是这样来给组件设置data就可以了呢?

其实如果这样设置的话,单个组件使用就没问题,如果多个组件使用,那么就会出现问题了。

示例2:设置一个组件被多次应用中data的数据问题

1.首先编写一个按钮,点击变化一个组件中的数据

2.在页面只渲染一个组件,点击按钮查看数字变化

浏览器显示如下:

可以看到点击按钮,数字就可以增加了。那么如果渲染多个组件,情况会怎么样呢?

3.在页面渲染组件多次

在浏览器显示如下:

此时,点击不同的按钮,组件之间的data数据是单独的,这是正常的。

但是有时候,data也有一种写成错误数据共享的情况。

4.将组件data设置为同一个值,这样就会出现多个组件共享值的情况

因为data中返回的都是components_data这个数据对象,内存共享,那么在浏览器点击数据变化是同步的,如下:

可以看到,点击一次按钮,三个组件中的值都会同时改变。

5.最好的简化写法,避免data共享就不能返回一个数据对象,应该每个组件都要return一个新的对象

此时浏览器上的情况又回到步骤3的情况,组件拥有单独的num值,如下:

更多精彩原创Devops文章,快来关注我的Devops社群吧:

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 41. Vue组件传值-父组件向子组件传值

    前面写了组件的创建、切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用。这里存在一个问题,就是父组件的数据如何传递到子组件中。

    Devops海洋的渔夫
  • Django 2.1.7 创建应用模板

    上一篇中讲诉了关于Django 2.1.7 视图的操作,本篇章开始研究模块这块内容。

    Devops海洋的渔夫
  • 42. Vue组件传值-子组件通过事件调用向父组件传值

    上一篇章讲解了使用props将父组件的值传递到子组件中,那么子组件如果反过来传递给父组件呢?

    Devops海洋的渔夫
  • 前端开发:关于Vue组件中的data属性值是函数而不是对象的详解

    最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象。

    三掌柜
  • 搭建简易的物联网服务端和客户端-DCloud手机端(十)

    1)介绍 官方介绍:最接近原生APP体验的高性能前端框架 网址:http://dev.dcloud.net.cn/mui/

    治电小白菜
  • 小伙子不讲武德,竟用Python爬取了B站上1.4w条马老师视频数据来分析

    比如2020年一月份,右眼被蹭了一下的马老师面带微笑,为我们生动形象地讲述了健身房里的年轻人是如何不讲武德,偷袭他的故事。

    朱小五
  • 基于R语言利用QQ群进行数据挖掘案例整理

           利用QQ群进行数据挖掘案例,数据源来源于2016年12-2017年大致一个月的QQ群基本数据,通过对聊天内容的分析,了解QQ聊天群资料了解时间,人...

    学到老
  • 一文彻底搞懂BP算法:原理推导+数据演示+项目实战(下篇)

    鸢尾花数据集如图2所示,总共有三个品种的鸢尾花(setosa、versicolor和virginica),每个类别50条样本数据,每个样本有四个特征(花萼长度、...

    磐创AI
  • 机器学习算法实现解析——libFM之libFM的训练过程概述

    在FM模型的训练过程中,libFM源码中共提供了四种训练的方法,分别为:Stochastic Gradient Descent(SGD),Adaptive SG...

    zhaozhiyong
  • R语言基础绘图教程——第5章:直方图和柱状图

    DoubleHelix

扫码关注云+社区

领取腾讯云代金券