vue中 computed 与 watch created 与 mounted 彼此的关联与顺序

Posted 2022-12-11 黑子Kuroko

首先，来认识一下他们的一个基本写法长啥样，直接看下面这个demo：

<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页面植入你项目中某个界面去运行感受一下，输出结果如下：

页面显示值：

控制台输出结果：

由此可见，本轮的执行顺序是这样的：

created ->  computed -> mounted -> watch -> computed

而 watch 与 computed 的区别，最关键的是watch需要监听值的变化而改变，但是computed从一开始就可以达到和某个值关联起来。

注：本文仅笔者自己比较困惑的点展开解释，更多更全面的介绍与区别请自行百度。