1. 計(jì)算屬性computed與方法methods的比較

通過(guò)學(xué)習(xí)的知識(shí),我們已經(jīng)了解到computed計(jì)算屬性和methods方法,

計(jì)算屬性computed和methods方法都可以將一段邏輯代碼進(jìn)行復(fù)用,那么他們有什么不同之處呢.

我們先看一個(gè)示例:

<div id="app">
    <h2>對(duì)于字符串?dāng)?shù)據(jù)進(jìn)行反向處理</h2>

    <h3>1. 原字符串</h3>
    {{ message }}

    <h3>2. methods方法反向</h3>
    {{ reversedMessage() }}

    <h3>3. computed計(jì)算屬性反向</h3>
    {{ reversedMsg }}
</div>


<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            message:"hello"
        },
        methods: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        },
        computed: {
            reversedMsg: function () {
                return this.message.split('').reverse().join('')
            }
        }
    })

</script>

通過(guò)示例我們會(huì)發(fā)現(xiàn),兩種對(duì)數(shù)據(jù)處理的邏輯最終結(jié)果確實(shí)完全相同

然而，不同的是計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的。只在相關(guān)依賴(lài)發(fā)生改變時(shí)它們才會(huì)重新求值。這就意味著只要 message 還沒(méi)有發(fā)生改變，多次訪(fǎng)問(wèn) reversedMsg 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

<div id="app">
    <h3>多次調(diào)用計(jì)算屬性</h3>
    {{ reversedMsg }}
    {{ reversedMsg }}
    {{ reversedMsg }}
    {{ reversedMsg }}
    {{ reversedMsg }}
</div>


<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            message:"hello"
        },
        computed: {
            reversedMsg: function () {
                console.log("computed")
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

在多次調(diào)用reversedMsg 計(jì)算屬性是, console.log只會(huì)打印一次, 也就是從第二次調(diào)用開(kāi)始一直使用的都是第一次調(diào)用計(jì)算屬性得到的結(jié)果,只要當(dāng)message數(shù)據(jù)發(fā)生變化的時(shí)候,計(jì)算屬性才會(huì)重新執(zhí)行.

相比之下，方法的每次調(diào)用都會(huì)觸發(fā)函數(shù)的執(zhí)行, 所以方法并不會(huì)對(duì)結(jié)果進(jìn)行緩存

<div id="app">

    <h3>多次調(diào)用方法</h3>
    {{ reversedMessage() }}
    {{ reversedMessage() }}
    {{ reversedMessage() }}
    {{ reversedMessage() }}
    {{ reversedMessage() }}

</div>

<script>  
    const vm = new Vue({
        el: "#app",
        data: {
            message:"hello"
        },
        methods: {
            reversedMessage: function () {
                console.log("methods")
                return this.message.split('').reverse().join('')
            }
        }
    })

</script>

通過(guò)上面的例子,每次調(diào)用方法都會(huì)觸發(fā)函數(shù)

所以總結(jié):

1. methods屬性里的函數(shù)是Vue實(shí)例的方法, 方法每次調(diào)用都會(huì)執(zhí)行, 沒(méi)有緩存,
2. computed屬性里的函數(shù)是Vue實(shí)例的屬性, 屬性在第一次計(jì)算后就會(huì)進(jìn)行緩存
3. computed里函數(shù)計(jì)算是方法,就不能加括號(hào)調(diào)用
4. 所以一般結(jié)果不怎么太變化的,可以使用計(jì)算屬性,計(jì)算屬性只要依賴(lài)的數(shù)據(jù)不變,就會(huì)一直使用緩存的結(jié)果
5. 結(jié)果變化比較大的,每次調(diào)用都有可能有不同結(jié)果使用方法

2. 計(jì)算屬性computed與監(jiān)聽(tīng)屬性watch比較

通過(guò)前面的學(xué)習(xí),我們知道計(jì)算屬性computed和監(jiān)聽(tīng)屬性watch都可以做到對(duì)于數(shù)據(jù)的檢測(cè),

但是我們?nèi)菀诪E用 watch,所以接下來(lái)我們好好看看兩者的區(qū)別

通過(guò)例子了解一下:

<!-- html-->
<div id="app">

    <h3>Computed計(jì)算屬性</h3>
    {{fullNameCom}}

    <h3>watch監(jiān)聽(tīng)屬性</h3>
    {{fullName}}
</div>


<!--js-->
<script>
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        computed: {
            fullNameCom: function () {
                return this.firstName + ' ' + this.lastName
            }
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
</script>

通過(guò)上面的對(duì)比案例的對(duì)比,雖然都能實(shí)現(xiàn)我們的效果

但是從代碼上看, 與computed相比,watch實(shí)現(xiàn)這種需求顯得很繁瑣

watch的功能就像他名字一樣,監(jiān)聽(tīng), 監(jiān)聽(tīng)某個(gè)值的變化, 做響應(yīng)的事情

computed 計(jì)算屬性,往往是為了使用他的值, 這個(gè)值是依賴(lài)其他值而求得的結(jié)果,相當(dāng)于保存了計(jì)算的過(guò)程,如果在使用過(guò)程中,依賴(lài)的值發(fā)生了變化, 就會(huì)重新執(zhí)行計(jì)算

一言以蔽之:

1. computed計(jì)算屬性的值我們需要用到它,依賴(lài)變化運(yùn)算過(guò)程自動(dòng)執(zhí)行
2. watch監(jiān)聽(tīng)的值我們不需要用到它，我們只是想在它監(jiān)聽(tīng)的值改變了的時(shí)候搞點(diǎn)事情。

watch重點(diǎn)記住的一句話(huà):

雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的 watcher。這是為什么 Vue 通過(guò) watch 選項(xiàng)提供一個(gè)更通用的方法，來(lái)響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時(shí)，執(zhí)行異步操作或開(kāi)銷(xiāo)較大的操作，這是很有用的。