目录
1.概念
Vue响应式指当数据变化时,页面会重新渲染,如下例
<body>
<div id="app">
{{ sentence}}
</div>
</body>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
sentence: '自由就是不再寻求认可'
}
})
</script>
【结果】改变 sentence 的值,页面重新渲染
【注】当创建vue实例时,vue会将data中的成员代理给vue实例,目的是为了实现响应式,监控数据变化,执行某个监听函数
2.页面何时渲染
Vue更新DOM的操作是异步执行的,只要侦听到数据变化,将开启一个异步队列,如果一个数据被多次变更,那么只会被推入到队列中一次,这样可以避免不必要的计算和DOM操作
<div id="app">
{{ bookList }}
</div>
const vm = new Vue({
el: '#app',
data: {
bookList: ['被讨厌的勇气', '没有凶手的杀人夜', '亲密关系']
}
})
vm.bookList[1] = 'JavaScript高级程序设计';
console.log(vm.bookList[1]); // 此时数据已经更改
console.log(vm.$el.innerHTML); //但是页面内容还没有更改
【结果】
3.vm.$nextTick 和 Vue.nextTick
1)在DOM更新后,会立刻执行 vm.$nextTick 和 Vue.nextTick,所以可以利用它们看到数据更改后,立刻看到渲染后页面的值
<div id="app">
{{ bookName }}
</div>
const vm = new Vue({
el: '#app',
data: {
bookName: '被讨厌的勇气'
}
})
vm.bookName = 'JavaScript高级程序设计';
console.log(vm.bookName); // 此时数据已经更改
console.log(vm.$el.innerHTML);
vm.$nextTick(()=>{
console.log(vm.$el.innerHTML);
})
【结果】
2)vm.$nextTick 和 Vue.nextTick 可以当作Promise使用
const vm = new Vue({
el: '#app',
data: {
bookName: '被讨厌的勇气'
}
})
vm.bookName = 'JavaScript高级程序设计';
console.log(vm.bookName); // 此时数据已经更改
vm.$nextTick().then(()=>{
console.log(vm.$el.innerHTML);
})
Vue.nextTick().then(()=>{
console.log(vm.$el.innerHTML);
})
【结果】
3)vm.$nextTick 和 Vue.nextTick 的区别
vm.$nextTick 内部函数的 this 指向 Vue 实例对象,Vue.nextTick 内部函数的 this 指向 window
4)nextTick 的实现
异步任务分为宏任务(macro)和微任务(micro),微任务执行在前,宏任务执行在后,在 nextTick 的实现源码中,会先判断是否支持微任务,不支持后才会执行宏任务
if(typeof Promise !== 'undefined') {
// 微任务
// 首先看一下浏览器中有没有promise
// 因为IE浏览器中不能执行Promise
const p = Promise.resolve();
} else if(typeof MutationObserver !== 'undefined') {
// 微任务
// 突变观察
// 监听文档中文字的变化,如果文字有变化,就会执行回调
// vue的具体做法是:创建一个假节点,然后让这个假节点稍微改动一下,就会执行对应的函数
} else if(typeof setImmediate !== 'undefined') {
// 宏任务
// 只在IE下有
} else {
// 宏任务
// 如果上面都不能执行,那么则会调用setTimeout
}
4.不发生重新渲染的情况
1)更改的数据必须是存在的数据,否则不能重新渲染页面【例1】;
【例1】不会报错,但是也不会渲染页面,因为监听不到这个值
<div id="app">
{{ book.sentence }}
</div>
const vm = new Vue({
el: '#app',
data: {
book: {
name: '被讨厌的勇气',
writer: '岸见一朗',
}
}
})
vm.book.setence="触手可及但互不干扰"
2)更改的数据必须是已渲染过的数据,否则从性能角度考虑,不会重新渲染【例2】;
【例2】
<div id="app">
{{ book.writer }}
</div>
const vm = new Vue({
el: '#app',
data: {
book: {
name: '被讨厌的勇气',
writer: '岸见一朗',
}
}
})
vm.book.name="JavaScript高级程序设计"
3)利用索引直接设置一个数组项时不会重新渲染【例3】;
【例3】
<div id="app">
{{ bookList }}
</div>
const vm = new Vue({
el: '#app',
data: {
bookList:['被讨厌的勇气','没有凶手的杀人夜','亲密关系']
}
})
vm.bookList[3]="JavaScript高级程序设计"
4)修改数组长度时不会重新渲染【例4】;
【例4】
<div id="app">
{{ bookList }}
</div>
const vm = new Vue({
el: '#app',
data: {
bookList: ['被讨厌的勇气', '没有凶手的杀人夜', '亲密关系']
}
})
vm.bookList.length = 0;
5)添加或删除对象时不会重新渲染【例5】;
<div id="app">
{{ bookList }}
</div>
const vm = new Vue({
el: '#app',
data: {
bookList: ['被讨厌的勇气', '没有凶手的杀人夜', '亲密关系']
}
})
vm.bookList[3] = 'JavaScript高级程序设计';
delete vm.bookList[2];
5. 响应式更新数组和对象
(1)数组
1)利用数组方法 pop、pop、shift、unshift、splice、sort、reverse
2)利用vm.$set 或 Vue.set 实例方法,vm.$set(object, propertyName, value)
3)利用vm.$delete或 Vue.delete删除数组中的某一项
<div id="app">
{{ bookList }}
</div>
const vm = new Vue({
el: '#app',
data: {
bookList: ['被讨厌的勇气', '没有凶手的杀人夜', '亲密关系']
}
})
vm.bookList.push('为奴十二年');
vm.$delete(vm.bookList, 2)
vm.$set(vm.bookList, 3, '小王子')
【结果】
(2)对象
1)添加利用 vm.$set 或 Vue.set 实例方法
2) 删除利用vm.$delete或 Vue.delete