vue数据不更新解决方法

1. Vue 无法检测实例被创建时不存在于 data 中的 property

原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

var vm = new Vue({

 data:{},

 // 页面不会变化

 template: '<div>{{message}}</div>'

})

vm.message = 'Hello!' // `vm.message` 不是响应式的

解决办法：

var vm = new Vue({

 data: {

  // 声明 a、b 为一个空值字符串

  message: '',

 },

 template: '<div>{{ message }}</div>'

})

vm.message = 'Hello!'

2. Vue 不能检测通过数组索引直接修改一个数组项

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化

var vm = new Vue({

 data: {

  items: ['a', 'b', 'c']

 }

})

vm.items[1] = 'x' // 不是响应性的

解决办法：

Vue.set(vm.items, indexOfItem, newValue)

// vm.$set

vm.$set(vm.items, indexOfItem, newValue)

// Array.prototype.splice

vm.items.splice(indexOfItem, 1, newValue)

3.在异步更新执行之前操作 DOM 数据不会变化

<div id="example">{{message}}</div>

var vm = new Vue({

 el: '#example',

 data: {

  message: '123'

 }

})

vm.message = 'new message' // 更改数据

vm.$el.textContent === 'new message' // false

vm.$el.style.color = 'red' // 页面没有变化

解决办法:

var vm = new Vue({

 el: '#example',

 data: {

  message: '123'

 }

})

vm.message = 'new message' // 更改数据

//使用 Vue.nextTick(callback) callback 将在 DOM 更新完成后被调用

Vue.nextTick(function () {

 vm.$el.textContent === 'new message' // true

 vm.$el.style.color = 'red' // 文字颜色变成红色

})