Vue 数据变化重新渲染能保留上次滚动条的位置吗

Question

如题，数据立标比较长，包裹在一个div中出现滚动条，当修改其中的数据时，会重新渲染dom，这是滚动条会回到初始状态，如何保留其上次的位置，这是由于浏览器重新渲染dom导致滚动条位置发生的改变吗？

Answer 1

没有吧，我的是concat一个数组进去，数据更新了，位置没变

Answer 2

默认是保留的吧？

Answer 3

vue-router有个scrollBehavior函数可以做到，

  scrollBehavior: function (to, from, savedPosition) {
    return savedPosition || { x: 0, y: 0 }
  },
  

滚动行为

Answer 4

如果你的页面是单页应用，Vuet可以实现你的需求

import Vue from 'vue'
import Vuet from 'vuet'
Vue.use(Vuet)

const vuet = new Vuet({
  modules: {
    testModule: {
      data () {
        return {}
      }
    }
  }
})


new Vue({
  // ...
  vuet,
  template: `
    <div v-vuet-scroll.self="{ path: 'testModule',  name: '随便给一个名字' }"></div>
  `
})

如果你需要记录多个滚动条，调用多次v-vuet-scroll这个指令，设置不同的名字即可