vue修改数组页面不生效_Vue中数组直接修改不是不能响应吗？

这个问题其实挺有趣的，先抛结论：

数组响应确实是不会响应，但是你可以看到你页面上的数据其实会有变化

这是为什么呢？其实这里和两个概念有关：你在页面上看到的数据：其实是vue通过你的kkk的值更新对应的dom元素内部的值

vue更新dom的操作(也就是1的步骤)是异步执行的

关于1：

你应该听说过虚拟dom这个东西吧，没听说过也不要紧。具体其实就是说我们的数据映射到页面上并不是直接映射的，而是通过数据 =〉虚拟dom =〉更新真实dom这样一个过程。所以其实并不是直接你修改了你变量里的值，对应页面上dom元素的内容就直接改了，这中间有个过程。这点要记住，很重要

通过第一点的解答你知道了vue更新dom这个是有个过程的，并且这个过程他是异步的摘自vue官方文档：深入响应式原理章节

接下来我们详细介绍2: vue更新dom的操作是异步执行的

知道了vue更新dom的操作是异步的了，异步的方式具体是什么呢？根据场景支持程度分别分为setTimeout和Promise两类，分别对应创建的是JS运行时里的宏服务与微服务。宏服务与微服务的关系：一个宏服务下面可以有很多微服务，执行完一个宏服务再执行下一个宏服务。

这里的概念你可以之后在查，主要是要突出一个执行关系，就是在JavaScript运行时：第一个宏服务开始同步 => 第一个宏服务同步代码执行完成 => 第一个宏服务中微服务(Promise)代码执行完成 => 第二个宏服务(setTimeout)开始执行这样运行的，所以你可以看到无论是Promise的微服务还是setTimeout创建的宏服务都在第一个宏服务的同步代码执行完成后才执行。

对应到你的代码

this.kkk[2] = 'x'

this.kkk = this.kkk.map(value => {

return value + 1

})

this.kkk[0] = 15

// 之后更新dom的内容

所以并不是vue响应了你的变化，而是vue在为数组赋值的时候kkk[0]就已经是15了，不信的话你可以这样试一下：

this.kkk[2] = 'x' // 只写这一句不会变更，变更其实是在this.kkk被this.kkk.map返回的新数组赋值时进行的

或者是

async mounted () {

this.kkk[2] = 'x'

this.kkk = this.kkk.map(value => {

return value + 1

})

await this.$nextTick() // 这里表示vue把dom渲染完成了

this.kkk[0] = 15 // 这个时候虽然数组变了，但是由于不会响应，所以dom上的展示就不会变更

}

看完这些，你现在能理解为什么了吧

辛苦打了这么多字，如果有帮助还请点赞，收藏加关注三连，哈哈哈哈谢谢