Vue组件里Methods方法更新了数据如何重新渲染组件

Question

在Vue组件中，通过Methods里的的方法修改了Data返回对象中的值，但是整个页面并没有根据修改的值进行重新渲染

export default {
data () {

let page = this.$attrs['page']
let pageSize = this.$attrs['pageSize']
let dataBus = {
  newArticleData: [],
  page
}
console.log(page)
this.$a.get(`http://localhost:8081/api/article/page/${dataBus.page}/pageSize/${pageSize}`).then(res => {
  let json = res.data
  if (json.err === false) {
    dataBus.newArticleData = json.data[0]
  }
}, err => {
  console.log(err)
})

return dataBus

},
methods: {

addPage () {
  this.page++
  console.log(this.page)
}

}
}

Answer 1

//老铁 写法有问题把
export default {
    data () {
        return {
            dataBus:{
                newArticleData: [],
                page: 0
            }
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData(){
            this.$a.get(`http://localhost:8081/api/article/page/${dataBus.page}/pageSize/${pageSize}`).then(res => {
              let json = res.data
              if (json.err === false) {
                this.dataBus.newArticleData = json.data[0]
              }
            }, err => {
              console.log(err)
            })
        }
    }
    //大致是这样，不知道你哪调用了addPage

Answer 2

data中声明变量不是应该在return中吗？
获取后台数据应该在mounted 调用 ，
个人感觉，这个代码结构有点混乱

methods:{
    addPage(){
    this.page++;
    this.xxx()
    }
} 

page ++后，再次调用那个依赖page参数的方法

Answer 3

老铁 建议你去看一下 watch