watch
vue中watch来监视data数据的变化,当被监视的数据发生变化watch中定义的相关方法便会调用,也可以监听异步操作。
语法
watch: {
被监听的数据: {
immediate: true|false, // 是否一上来直接监视,不写默认是false
deep: true|false, // 是否开启深度监视,不写默认是false
handler(数据改变后的值, 数据改变之前的值) {
相关代码逻辑...
} // 监视的回调,不可不写
}
}
$nextTick
在Vue在更新DOM的时候,是异步执行的。只要监听到数据变化,vue将开启一个队列,并缓存在同一个事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入队列中一次。
什么是 Vue.nextTick()
**定义:**在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后DOM。理解:nextTick(),是将回调函数延迟在下次dom更新数据后调用。简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数。
methods:{
testClick:function(){
let that=this;
that.testMsg="修改后的值";
that.$nextTick(function(){
console.log(that.$refs.aa.innerText); //输出:修改后的值
});
}
}
**A:**Vue实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新。 n e x t T i c k 是在下次 D O M 更新循环循环结束之后执行延迟回调,在修改数据之后使用 nextTick 是在下次DOM更新循环循环结束之后执行延迟回调,在修改数据之后使用 nextTick是在下次DOM更新循环循环结束之后执行延迟回调,在修改数据之后使用nextTick,则可以在回调中获取更新后的DOM。
B: Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM其实并未进行任何渲染,此时i进行DOM操作无用。所以一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与值对应的就是mounted钩子函数,因为钩子函数执行时所有的DOM挂载完成。
当项目中想要改变DOM元素的数据后基于新的DOM操作,对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中;通俗的理解是:更改数据后当你想立即使用js操作新的视图的时候需要使用它。
正确的用法是:Vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码:
changeTxt:function(){
let that=this;
that.testMsg="修改后的文本值"; //修改dom结构
that.$nextTick(function(){ //使用vue.$nextTick()方法可以dom数据更新后延迟执行
let domTxt=document.getElementById('h').innerText;
console.log(domTxt); //输出可以看到vue数据修改后并没有DOM没有立即更新,
if(domTxt==="原始值"){
console.log("文本data被修改后dom内容没立即更新");
}else {
console.log("文本data被修改后dom内容被马上更新了");
}
});
},
Wtach+$nextTick()
通过watch监听数据变化,即监视到我们已经获取这个数据。这个时候数据还没驱动视图变化,只是缓存在了同一事件循环中,这个时候如果要根据这个数据渲染出的DOM元素进行某些操作的时候,往往就需要watch中使用$nextTick()。
watch+$nextTick:
实现数据更新后,界面更新时重新渲染数据
watch:{
xx:{
immediate: true|false, // 是否一上来直接监视,不写默认是false
deep: true|false, // 是否开启深度监视,不写默认是false
handler(newValue, oldValue) {
this.$nextTick(()=>{
进行诸如拿到数据再创建实例等操作
})
}
}
实际应该用场景:在轮播图展示的数据需要由别的组件传递过来的时候,我们要在页面中渲染出轮播图结构之后才能监视这个轮播图,给他设置左右按钮,分页器等操作。
watch:{
bannerList: {
handler(newValue,oldValue) {
//现在我们通过watch监听bannerList属性的属性值的变化
//如果执行handler方法,代表组件身上这个属性已经有了[数组:四个元素]
//当前这个函数执行:只能保证bannerList数据已经有了,但是没办法保证v-for已经执行结束了
//v-for执行完毕,才有结构[你现在在watch当中没办法保证的]
//nextTick:在下次DOM更新 循环结束之后 执行延迟回调。在修改数据之后 立即使用这个方法,获取更新后的 DOM。
this.$nextTick(()=>{
//当你执行这个回调的时候,保证服务器数据回来了,v-for执行完毕了[一定轮播图的结构有了]
var mySwiper = new Swiper(document.querySelector('.swiper-container'), {
//第一个参数:设置轮播图方向【属性这有两个:水平、垂直】
// direction: 'vertical',
// 开启循环模式
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
//点击小球的时候也切换图片
clickable:true
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
})
}
}
}