Vue中watch、computed與methods的聯繫和區別

時間 2019-11-17

標籤 vue watch computed methods 聯繫區別简体版

原文原文鏈接

watch

顧名思義，watch 就是監聽的意思，其專門用來觀察和響應Vue實例上的數據的變更。html

能使用watch屬性的場景基本上均可以使用computed屬性，並且computed屬性開銷小，性能高，所以能使用computed就儘可能使用computed屬性vue

可是當您想要執行異步或昂貴的操做以響應不斷變化的數據時，這時watch就派上了大用場。git

其應用場景通常都是搜索框之類的，須要不斷的響應數據的變化npm

示例：緩存

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model=content >
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    content:""
                }
            },
            watch:{
                content(){
                    console.log(this.content);
                }
            },

        })
    </script>
</body>

</html>
複製代碼

運行效果：bash

可是若是你有一個搜索按鈕，當你點擊搜索按鈕的時候，纔會進行數據的響應和操做的時候，這時候最好使用computedapp

computed

computed 就是計算屬性，其能夠當成一個data數據來使用。異步

使用計算屬性要注意幾點：函數

computed是在HTML DOM加載後立刻執行的，如賦值操做；性能
計算屬性計算時所依賴的屬性必定是響應式依賴，不然計算屬性不會執行。
計算屬性是基於依賴進行緩存的，就是說在依賴沒有更新的狀況，調用計算屬性並不會從新計算，能夠減小開銷。因此能夠說computed的值在getter執行後是會進行緩存的，只有在它依賴的屬性值改變以後，下一次獲取computed的值時纔會從新調用對應的getter來計算出對應的新值。

其通常應用於比較複雜的渲染數據計算或者沒必要從新計算數值的狀況

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{Name}}
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    firstName:"Fan",
                    lastName:"JunYang"
                }
            },
            computed:{
                Name(){
                    return this.firstName + " " + this.lastName
                }
            }

        })
    </script>
</body>

</html>
複製代碼

上面就是一個經典的案例，當你改變了其中一個值的時候，另外一個值並不會進行從新計算，從而減小了開銷。

methods

methods 就是方法。

他沒有緩存，他也不像computed在DOM加載後能夠自動執行，他必須有必定的觸發條件才能執行，如點擊事件等；

咱們能夠將同一函數定義爲一個methods或者一個computed。對於最終的結果，兩種方式確實是相同的。

可是最大的區別在於：

computed計算屬性是基於它們的依賴進行緩存的。若是你進行屢次訪問的時候（在不改變值的狀況下），計算屬性會當即返回數據，而沒必要再次執行函數。而且他還能夠自動執行。
而methods只要發生從新渲染，就一定執行該函數，他必須有必定的觸發條件才能執行。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <span>{{Name1}}</span>
        <br />
        <span>{{Name}}</span>
        <br />
        <button @click='Name2()'>點我</button>
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    firstName:"Fan",
                    lastName:"JunYang",
                    Name:""
                }
            },
            computed:{
                Name1(){
                    return this.firstName + " " + this.lastName
                }
            },
            methods:{
                Name2(){
                    return this.Name = this.firstName + " " + this.lastName
                }
            }

        })
    </script>
</body>

</html>
複製代碼