在项目开发中遇见一个问题,用的vue框架然后在 created()
生命钩子中进行接口调用然后赋值,赋值完后再直接 console.log
打印更新的值
结果发现这个值输出的还是初始值,但是输出 this
却发现里面的值已经更新
简单点说就是,我更新 data
的值在 created
里 console
,但是 console.log(this.a)
的值还是初始的,但是 console.log(this)
里面a的 值已经更新了
1 | <body> |
当时的代码差不多情况如图
是的我的想法就是在调完接口后输出内容看下(实际是想输出返回中的一个id看下)
但是却发现无论怎么输出,在 created
里输出的都是默认值(初始值)
后来经过讨论和实践找到了问题,因为 Promise
是一个异步函数,异步执行的,然后 created
是在页面刷新/首次加载时就运行了,
所以这里其实会先运行 console.log(this.message,this)
导致这里的值还没更新
我也通过以下代码证实了猜想
1 | <body> |
是的如果把 console
放到一个异步函数( setTimeout
也是一个异步函数)里,那么输出的值也会是正常的了