VUE note about responsive

从2019年2月开始进入vue开发，几个月下来踩了不少坑 这里记录一下需要注意的点，首先是vue的数据响应式

响应式

Vue 最独特的特性之一，是其非侵入性的响应式系统

使用vue最方便的地方在于不关心数据展示只关注数据本身，而实现响应式的更本是ES5中的 Object.defineProperty 转换所有属性为 getter/setter 这也是vue 不支持IE8 及以下浏览器的原因

1. Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的，对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性 比如

   1 2 3

   Vue.set(vm.someObject, 'b', 2) //or this.$set(this.someObject,'b',2)

2. 有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新属性不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。

   1 2 3 4

   // 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) // 还可以用解构 this.someObject = { ...{ a: 1, b: 2 }), ...this.someObject }

3. 数组触发更新检测也差不多

   1 2 3 4 5 6 7

   this.someArry[1] = 'x' // 不是响应性的 this.someArry.length = 2 // 不是响应性的 //解决方法 this.$set(vm.items, indexOfItem, newValue) this.someArry.splice(newLength) this.someArry=[...newArry]

4. 异步更新队列

   Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。当你设置 vm.someData = ‘new value’，该组件不会立即重新渲染。
   当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用

1

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

1
2
3
4
5
6
7
8
9

var vm = new Vue({ 
 el: '#example', 
 data: { message: '123' } 
})
vm.message = 'new message' // 更改数据 
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () { 
  vm.$el.textContent === 'new message' // true 
})

因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2016 async/await 语法完成相同的事情：

1
2
3
4
5
6
7
8

methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}