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('觸發(fā)computed了')
                        if (this.nickName) {
                            return this.nickName
                        } else {
                            return this.firstName + '.' + this.lastName
                        }
                    }
                }
            })
        </script>
    </body>
</html>

以上代碼當(dāng)nickName有值后，再更改firstName或lastName將不再觸發(fā)computed，是不是可以理解成computed的依賴收集在return this.nickname時發(fā)生了變化

回答

編輯回答

尛曖昧

當(dāng)nickName有值后，再更改firstName或lastName將不再 return this.firstName + '.' + this.lastName

2017年6月9日 15:42

編輯回答

詆毀你

這個理解就不對了，看看你計算屬性里的if..else..判斷，當(dāng)已有了this.nickname后，計算屬性根本就沒有動態(tài)計算，更何談響應(yīng)式更新，要知道computed屬性是依賴式響應(yīng)式更新的。

為何不將代碼改成：

computed: {
    name: function() {
        console.log('觸發(fā)computed了')
        return this.firstName + '.' + this.lastName
    }
}

2017年11月13日 17:38

編輯回答

澐染

通俗來講，是因為vue很聰明，他知道你結(jié)果不變，不用再算一遍
具體原理可以去看源碼

2017年9月28日 02:00

編輯回答

替身

首先依賴收集是獲取組件中data數(shù)據(jù)時候發(fā)生的。上面的例子中computed中name進(jìn)行收集依賴的過程是按照程序的執(zhí)行邏輯。
當(dāng)你的nickName為''的時候，初始化就把組件中nickName, firstName, lastName都訪問到了。你可以理解為這些依賴都采集到了，當(dāng)它們發(fā)生變化后，會觸發(fā)name這個方法。

當(dāng)你的nickName有值后, 初始化中只訪問了nickName。firstName, lastName沒有被訪問?？梢岳斫鉃闆]有收集到它們的依賴，所以它們發(fā)生變化，不會觸發(fā)name這個方法?？赡阋惨⒁?，在這種情況下，當(dāng)nickName為''時，程序會訪問到firstName, lastName。這里會重新收集它們的依賴。

2018年9月23日 02:09