今天在整理代码时,遇到这样的一个场景,下面将结合示例说明:

  (一)在Vue文件中定义一个const常量,如下图所示:

  (二)在data中有三个元素是这样赋值的,如下图所示:

  (三)在created()或mounted()中打印上述三个数据元素的值,如下图所示:

  (四)测试结果如下图所示:

  (五)结果分析:

  1、首先说说我为啥会这样赋值,有可能给name、alian1和alian2赋值时都是同一个值,并且这串字符又是比较长的,所以我就想当然地先将这串长字符赋值给name,然后通过this.name的方式赋值给alian1和alian2,结果就出人意料了,alian1和alian2的值都是undefined。

  2、分析为何出现该结果,我个人按照JS的语法猜测,这可能跟变量未定义就先使用了有关,所以出现上述结果。

Vue中data元素之间相互赋值的陷阱的更多相关文章

  1. Vue中ajax返回的结果赋值

    这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...

  2. 5种方法去掉HTML中Inline-Block元素之间的空白

    5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...

  3. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  4. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  5. Vue中data重置问题

    Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...

  6. IE7中绝对定位元素之间的遮盖问题

    由于页面复杂就不上现实例子,举例说明. 两个同层级<div>元素,都设置了 position: relative;相对定位. 他们的内部的元素(不管什么元素了)都设置了position: ...

  7. vue中data必须是一个函数

    前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.

  8. HTML表格中各元素之间属性之间的相互影响

    开发了一个动态表格制作程序,用的是谷歌浏览器.发现几个现象,记录如下: 1.按照技术文档的说法,正规的表格样式如下: <table> <caption>标题</capti ...

  9. Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...

随机推荐

  1. Codeforces_822

    A.小的那个数的阶乘. #include<bits/stdc++.h> using namespace std; int a,b; int main() { ios::sync_with_ ...

  2. mysql和 oracle 的区别

    垂直拆分: 把一个数据库中不同业务单元的数据分到不同的数据库里面.水平拆分: 根据一定的规则把同一业务单元的数据拆分到多个数据库中. 读写分离 主:写 从:查 ==================== ...

  3. MySQL性能优化---索引

    一.什么是索引 索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没有索引,执行查询时MySQL必须从第一个记录开始扫描整个表的所有记录,直至找到符合要求的记录.表里 ...

  4. lwip1.4.1需要的文件

    1.4.1版本一共必须25个文件,如下,接下来,要看如何将2.0.2用起来 以上是必须的lwip原始的文件, 此外,还需要一些其它文件 Keil uVision5包含路径配置:

  5. PHP 安装扩展步骤

    一般来说php安装扩展需要几下几个步骤   1.下载扩展包    比如  pdo_mysql.tar.gz  (如果不想下载,可以到php安装目录,(类似php-5.3.3/ext/)的ext文件中找 ...

  6. .NET Core之单元测试(四):Fluent Assertions的使用

    目录 什么是Fluent Assertions 待测试API 测试用例 什么是Fluent Assertions Fluent Assertions 是 .NET 平台下的一组扩展方法,用于单元测试中 ...

  7. this关键字和static关键字

    this关键字 普通方法中,this总是指向调用该方法的对象. 构造方法中,this总是指向正要初始化的对象. this区分成员变量和全局变量的作用,在当前类中可以省略. this的常用方法: 让类中 ...

  8. Nginx Rewrite相关功能

    目录 Nginx Rewrite相关功能 ngx_http_rewrite_module模块指令: if指令: set指令: break指令: return指令: rewrite_log指令: rew ...

  9. JS正则表达式的创建、匹配字符串、转义、字符类、重复以及常用字符

    正则表达式都是操作字符串的 作用:对数据进行查找.替换.有效性验证 创建正则表达式的两种方式: // 字面量方式 /js/ // 构造函数方式 regular expression new RegEx ...

  10. Ansible学习笔记(一):部署管理Windows机器遇到的一些坑

    在给国盛通上海测试环境做Ansible管理Windows服务器的时候,遇到了一些坑,Google解决掉了,特此记录,坑用红色标记. 一.环境说明 1.Ansible管理主机 操作系统:CentOS 7 ...