關(guān)于Vue的 watch、computed和methods的區(qū)別匯總
1 前言
創(chuàng)建一個Vue實例時,可以傳入一個選項對象
const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, watch: {} })
這個選項對象可以指定非常多的選項(或者說屬性),和數(shù)據(jù)相關(guān)的選項有:包括但不限于data
、methods
、computed、watch
等等
其中methods
、computed
、watch
都能通過函數(shù)來對數(shù)據(jù)進行處理或作出響應(yīng),這三者有差異,但很容易混淆
2 基礎(chǔ)用法
用script
引入vue.js
,下面的代碼都在如下html中運行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Methods</title> <!-- 引入 vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> </body> <script> </script> </html>
2.1 methods 方法
methods
選項中的定義的函數(shù)稱為方法,在Vue
實例化的過程中,methods
對象中的方法將被混入到Vue實例中,成為Vue實例的方法??梢灾苯油ㄟ^Vue
實例訪問這些方法
<body> <div id="example"> <!-- 顯示:a:1 --> <p>a:{{ plus() }}</p> </div> </body> <script> const vm = new Vue({ el: "#example", data: { a: 0, }, methods: { plus: function () { return this.a + 1; }, }, }); console.log(vm); // 查看控制臺輸出的vm,可以看到它有一個方法是:plus: ƒ (),⚠️注意是方法 console.log(vm.plus()); // 直接通過vm實例訪問方法,輸出:1 </script>
需要主動調(diào)用methods
中的函數(shù)才能執(zhí)行,a
的值改變并不能讓頁面中的<p>a:{{plus()}}</a>
跟著更新
2.2 computed 計算屬性
computed
選項中定義的函數(shù)稱為計算屬性,在Vue
實例化的過程中,computed
對象中的計算屬性將被混入到Vue實例中,成為Vue實例的同名屬性。
<body> <div id="example"> <!-- 顯示:a:1 --> <p>a:{{ plus }}</p> </div> </body> <script> const vm = new Vue({ el: "#example", data: { a: 0, }, computed: { plus: function () { return this.a + 1; }, }, }); console.log(vm); // // 查看控制臺輸出的vm,可以看到它有一個屬性是:plus:1,⚠️注意是屬性 </script>
乍一看好像computed
和methods
功能一樣,確實在這個例子中二者展示效果相同
事實上通過打印vm實例以及訪問方式已經(jīng)體現(xiàn)出二者的一個不同之處:
methods
中的函數(shù)會成為vm
的方法- 而
computed
中的函數(shù)經(jīng)過計算后會成為vm
的同名屬性,屬性值為函數(shù)的計算結(jié)果,即返回值
另外,和方法不同的是,計算屬性能夠跟著它依賴的數(shù)據(jù)變化而進行響應(yīng)式更新,即a變化時,plus
屬性也會更新
2.3 watch 偵聽器
watch
選項中的鍵值對稱為偵聽器或者說監(jiān)聽屬性/監(jiān)聽屬性,鍵是需要觀察的表達式,值是對應(yīng)的回調(diào)函數(shù)(值還可以是其他形式,此處不展開)
在Vue
實例化的過程中,這些需要偵聽的變量會被記錄下來,當這些變量發(fā)生變化的時候,對應(yīng)的回調(diào)函數(shù)就會執(zhí)行
<body> <div id="example"> <!-- 顯示:a:1 --> <p>a:{{ a }}</p> </div> </body> <script> const vm = new Vue({ el: "#example", data: { a: 0, }, watch: { a: function () { console.log("a發(fā)生了變化"); // 因為a的值變了,回調(diào)函數(shù)執(zhí)行 console.log(this.a); }, }, }); vm.a = 1; // 這里直接手動改變a的值 </script>
3 三者的區(qū)別
3.1 方法 VS 計算屬性
除了2.2中已經(jīng)提到的兩點區(qū)別之外,還有最重要的區(qū)別是:
- 計算屬性是基于它們的響應(yīng)式依賴進行緩存的,即上文中的
a
發(fā)生變化時,才會重新觸發(fā)求值函數(shù),否則多次調(diào)用都會從緩存中求值,這對開銷較大的計算來說非常有用,可以避免重復計算 - 方法則是調(diào)用時總會重新執(zhí)行
下面用表格的形式對這兩者的區(qū)別進行總結(jié):
methods | computed | |
---|---|---|
Vue實例化后成為vm實例的什么 | 成為vm實例上的方法 | 成為vm實例上的屬性 |
能否根據(jù)依賴的數(shù)據(jù)進行響應(yīng)式更新 | 不能,需要主動調(diào)用方法 | 能 |
能否緩存 | 不能,每次調(diào)用重新執(zhí)行 | 能,依賴的數(shù)據(jù)不變,會從緩存中取值 |
3.2 計算屬性 VS 偵聽器
- 首先最明顯的區(qū)別,偵聽器的命名方式是固定的,想要監(jiān)聽誰,就和誰同名。而方法和計算屬性可任意命名
- 其次,偵聽器無法主動進行訪問,而另外兩者都能主動訪問
- 計算屬性和偵聽器的使用場景:
如果某個值需要通過一個或多個數(shù)據(jù)計算得到,就使用計算屬性
偵聽屬性主要是監(jiān)聽某個值的變化,然后進行需要的邏輯處理;此外當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,偵聽屬性就比較有用,具體例子可見vue文檔-偵聽器
到此這篇關(guān)于關(guān)于Vue的 watch
、computed
和methods
的區(qū)別匯總的文章就介紹到這了,更多相關(guān)Vue
的 watch
、computed
和methods
的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2使用element-ui,el-table不顯示,用npm安裝方式
這篇文章主要介紹了vue2使用element-ui,el-table不顯示,用npm安裝方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07