从2019年2月开始进入vue开发,几个月下来踩了不少坑 这里记录一下需要注意的点,首先是vue的数据响应式
响应式
使用vue最方便的地方在于不关心数据展示只关注数据本身,而实现响应式的更本是ES5中的 Object.defineProperty 转换所有属性为 getter/setter 这也是vue 不支持IE8 及以下浏览器的原因
Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化,所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的,对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用
Vue.set(object, propertyName, value)
方法向嵌套对象添加响应式属性 比如1
2
3Vue.set(vm.someObject, 'b', 2)
//or
this.$set(this.someObject,'b',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 }数组触发更新检测也差不多
1
2
3
4
5
6
7this.someArry[1] = 'x' // 不是响应性的
this.someArry.length = 2 // 不是响应性的
//解决方法
this.$set(vm.items, indexOfItem, newValue)
this.someArry.splice(newLength)
this.someArry=[...newArry]异步更新队列
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 | var vm = new Vue({ |
因为 $nextTick() 返回一个 Promise
对象,所以你可以使用新的 ES2016 async/await 语法完成相同的事情:
1 | methods: { |