tip：实例创建之后添加新的属性到实例上，不会触发视图更新
分解tip：new Vue() 生命周期created() 之后 在data内添加的属性，不会触发view层的更新
new Vue({{
el: '#app',
data: {
user: {
name: 'tom',
sex: 'male'
}
},
created() {
this.user.msg = 'reactivity' // 成功创建并在视图更新
},
mounted() {
this.user.data = 'reactivity' // 成功创建，但不更新视图
}
})
解决方法
1Vue API
vm.$set(obj, key, value)
2Object.assign()
Object.assign({}, this.user, {key: value})
new Vue({{
el: '#app',
data: {
user: {
name: 'tom',
sex: 'male'
}
},
created() {
this.user.msg = 'reactivity' // 成功创建并在视图更新
},
mounted() {
this.$set(this.user, 'data', 'reactivity') // Vue API
Object.assign({}, this.user, {'data', 'reactivity'}) // Object.assign
}
})
异步数据操作
异步获取数据后更新视图:
new Vue({{
el: '#app',
data: {
user: {
name: 'tom',
sex: 'male'
}
},
created() {
setTimeout(() => {
// this.user.msg = 'reactivity' // 不更新视图
this.$set(this.user, 'data', 'reactivity') // Vue API
Object.assign({}, this.user, {'data', 'reactivity'}) // Object.assign
}, 1000) // 模拟异步数据
},
mounted() {
}
})
原理：异步数据操作的栈队列在整个vue生命周期最后
异步更新队列
this.$nextTick() 下一次栈队列执行完毕之后
异步数据更新后，操作对应的dom更新
new Vue({{
el: '#app',
data: {
user: {
name: 'tom',
sex: 'male'
}
},
created() {
setTimeout(() => {
this.user = {'age': 18}
this.$nextTick(() => {
// 数据刷新后对应的dom更新完毕
})
}, 1000) // 模拟异步数据
},
mounted() {
}
})
MutationObserver
vue2.0使用MutationObserver API作为异步更新队列的DOM更新解决方案
MutationObserver属于microtasks，执行效率更高，优先于macrotasks - setTimeout执行
// Firefox和Chrome早期版本中带有前缀
const MutationObserver = window.MutationObserver
|| window.WebKitMutationObserver || window.MozMutationObserver
// 创建观察者对象
const observer = new MutationObserver(mutations=>{
mutations.forEach(function(mutation) {
console.log(mutation.type);
})
})
// 配置观察选项:
const config = {
attributes: true,
childList: true,
characterData: true
}
// 选择目标节点
const target = document.querySelector('#test');
// 传入目标节点和观察选项
observer.observe(target, config);
target.appendChild(document.createElement("div"))
/*
* mutationObserver优先于setTimeout
*/
setTimeout(console.log,0,'setTimeout')
console.log('appending')
target.setAttribute('class','hello') //添加了一个元素子节点,触发回调函数.
// 随后,你还可以停止观察
// observer.disconnect();
/*
* doc https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
*/
执行结果
/*
appending
childList
attributes
setTimeout
*/
