工作问题

发表于 | 分类于 | 阅读 次
字数统计: 224 | 阅读时长 ≈ 1

前几天同事问了一个问题，用户上传照片成功后回显照片，更改img标签的src属性后dom没有及时更新，例子如下：

1
2
3
4
5
6
7
8
9
10
11
<img :src="url" height="100" width="100"/>
    data()  {
      return {
        url:  ''
      }
    },
    created() {
      setTimeout(() => {
        this.src = 'http://www.xrcloud.net:8777/resource/2018-09-10/152483865313_1536562410312.png'
      }, 500)
    }

简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以这时候就应该使用

1
2
3
4
Vue.$nextTick(function () {
  // Code that will run only after the
  // entire view has been rendered
})

上面的代码应该改成：

1
2
3
4
5
6
7
created() {
  setTimeout(() => {
    this.$nextTick(function () {
      this.src = 'http://www.xrcloud.net:8777/resource/2018-09-10/152483865313_1536562410312.png'
    })
  }, 500)
},

具体原理可以查看这篇文章： Vue.nextTick 的原理和用途