vue 执行顺序

Question

    const data = {
        name: '123'
    }     
    console.log(data)     
    data.name = 'asdfa'

输出结果为：

请问具体原因，根据我知道的，好像是因为vue的堆栈执行顺序导致的### 问题描述

Answer 1

这个问题跟 vue 没有关系，纯粹是因为 console.log 打印的是内存中该变量的最新情况。

你可以通过 console.log(JSON.stringify(data)) 来验证，通过这种方式你看到的才是在那个时间点的 data。

这个问题真的是老生常谈了，参考 console打印出来的数组长度不一样。

Answer 2

跟vue没有关系，本身就是 js 对象引用赋值问题，你输出的对象和操作的是同一个，楼上几种方法你都试试， JSON.stringify 或者 拷贝输出，就看到结果不一样了

Answer 3

并没有什么规范或一组需求指定console.* 方法如何工作——它们并不是JavaScript 正式的一部分，而是由宿主环境添加到JavaScript 中的。因此，不同的浏览器和JavaScript 环境可以按照自己的意愿来实现，有时候这会引起混淆。
尤其要提出的是，在某些条件下，某些浏览器的console.log(..) 并不会把传入的内容立即输出,而且其输出的值是引用的内存中的值。出现这种情况的主要原因是，在许多程序（不只是JavaScript）中，I/O 是非常低速的阻塞部分。所以，（从页面/UI 的角度来说）浏览器在后台异步处理控制台I/O 能够提高性能，这时用户甚至可能根本意识不到其发生。

所以你会看到data打印后快照显示name为123，但是点开对象看的时候却不一样了。

Answer 4

你这样应该就明白了吧

var data = {
    name: '123'
}
console.log(data.name)
data.name = 'asdfa'
console.log(data.name)

Answer 5

• 跟 vue 无关，与 JavaScript 作用域链有关
• 每一段 JavaScript 代码(全局代码和函数) 都有一个与之关联的作用域链。这个作用域链是一个对象列表或者链表，这组对象定义了这段代码"作用域中"的变量
• 在 JavaScript 的最顶层代码中，作用域链由一个全局对象组成