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