vue computed 源码问题

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Computed</title>

    </head>

    <body>
        <div id="app">
            <label for="">FirstName:<input v-model="firstName"/></label><br>
            <label for="">LastName:<input v-model="lastName"/></label><br>
            <label for="">NickName<input v-model="nickName"/></label><br>
            <p>名称:{{name}}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            new Vue({
                el: '#app',
                data: function() {
                    return {
                        firstName: '',
                        lastName: '',
                        nickName: ''
                    }
                },
                computed: {
                    name: function() {
                        console.log('触发computed了')
                        if (this.nickName) {
                            return this.nickName
                        } else {
                            return this.firstName + '.' + this.lastName
                        }
                    }
                }
            })
        </script>
    </body>
</html>

以上代码当nickName有值后,再更改firstName或lastName将不再触发computed, 但一开始
firstName.deps 和 lastName.deps 都添加了 computed watcher,为什么后续改变不会触发
computed watcher,什么时候移除的呢?不是很理解这块,有大佬解释下吗

阅读 1.2k
1 个回答
  1. computed 具有缓存特点。
  2. 当 nickName 有内容为true时,修改 firstName 和 lastName 结果不会改变。
  3. 当 computed结果不变时,不会执行computed中的函数,会直接使用缓存的结果。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题