vue.js中watch的使用
虽然新的网站使用服务端渲染,但是部分跟SEO信息无关的,还是选择了客户端渲染。
如果在客户端渲染,先显示着,数据回来以后再更新UI,则会出现闪的情况。
那怎么办呢?当然是先把内容隐藏起来。
当数据回来的时候根据结果显示即可。
watch的使用
- 简单地监听一个数值的变化
比如说:
<template>
<input v-model="userName">
</template>
<script>
export default {
data() {
return {
userName: ''
}
},
watch: {
userName(newValue) {
console.log('new user name is -- > ' + newValue);
}
}
}
</script>
<style>
</style>
当我输入
sfadfs
log输出如下:
new user name is -- > s
index.vue?6ced:13 new user name is -- > sf
index.vue?6ced:13 new user name is -- > sfa
index.vue?6ced:13 new user name is -- > sfad
index.vue?6ced:13 new user name is -- > sfadf
index.vue?6ced:13 new user name is -- > sfadfs
这就监听了一个值的变化了
- 假如要更新的值是全局的呢?
比如说我们网站这个案例,多个地方使用到了achievement,所以当lalyout/default.vue加载的时候,在它mount的时候就去加载achievement相关的信息,然后保存到store里,侧栏的用户信息根据这个来改变显示还是隐藏。如果是有成就信息,那么就显示出来。
所以这个时候就要监听store里的数据了。
怎么实现呢?
<template>
</template>
<script>
export default {
computed: {
achievementData() {
return this.$store.state.achievement
}
},
watch: {
achievementData(newAchievement) {
console.log('粉丝数量 -- > ' + newAchievement.followcount);
}
}
}
</script>
<style>
</style>
当数据加载回来,改变store里的值时,就可以监听到数据的变化了,根据数据的结果判断,是否要显示对应的内容,这样子就可以避免闪烁的问题了。
当数据渲染完了,再把display改成block即可。