利用vue中 computed 与 watch 、 created 与 mounted 彼此的关联与顺序完美解决watch多级耦合监听与mounted再次赋值的逻辑执行

<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监听触发逻辑，最后异步对特定值进行再次赋值

完美解决多级耦合，再次赋值的时候一定要进行的是深拷贝才行，这里很关键