利用vue中 computed 与 watch 、 created 与 mounted 彼此的关联与顺序完美解决watch多级耦合监听与mounted再次赋值的逻辑执行
<template><div><p> {{ firstNum }} </p><p> {{ secondNum }} </p><p> {{ thirdNum }} </p></div></template><script>export default {computed
·
<template>
<div>
<p> {{ firstNum }} </p>
<p> {{ secondNum }} </p>
<p> {{ thirdNum }} </p>
</div>
</template>
<script>
export default {
computed: {
secondNum() {
// firstNum 从一开始就与之绑定关联
console.log('secondNum is computing: ' + this.firstNum * 100)
return this.firstNum * 100
}
},
data() {
return {
firstNum: 0,
thirdNum: 0
}
},
watch: {
firstNum(val) {
// firstNum 只有在发生改变时,才会进入该逻辑
console.log('firstNum is watched: ' + val)
this.thirdNum = val * 100
}
},
created() {
// 该步骤在 data() 数据实例化之前。
// 此时改变 data() 中的数据是不会触发 change 事件的,无法进入 watch 代码部分。
this.firstNum = 1
},
mounted() {
// 该步骤在 data 数据实例化之后。
// 此时改变 data 中的数据是会触发 change 事件的,也就能被 watch 到。
this.firstNum = 2
}
}
</script>
将这个demo页面植入你项目中某个界面去运行感受一下,输出结果如下:
页面显示值:2 200 200
控制台输出结果:
综上所述,他们彼此间的生命周期先后顺序是这样的:
computed -> created -> mounted
而 watch 与 computed 的区别,最关键的是watch需要监听值的变化而改变,但是computed从一开始就可以达到和某个值关联起来。
如果在watch中有多级耦合联动,但是在mounted中我们要进行缓存赋值,我们要怎么做,这里就需要利用到事件的异步处理,了解js的执行顺序
setData存放的是所有缓存this.$data
这里主要用到的是解决mounted加载,缓存赋值,然后进行watch监听触发逻辑,最后异步对特定值进行再次赋值
完美解决多级耦合,再次赋值的时候一定要进行的是深拷贝才行,这里很关键
更多推荐
已为社区贡献16条内容
所有评论(0)