Vue--watch/computed/fun · Vue&&TypeSprict--基礎總結

[TOC] >[success] # watch/computed/methods ~~~ 1.利用keyup鍵盤事件抬起改變，通過監聽鍵盤抬起事件改變內容 2.利用watch 監聽，監聽的是屬性，根據屬性變更監聽觸發事件，所以watch中的方法名稱對應屬性名稱 3.利用computed 屬性重新計算，他就是一個方法，不過返回的是一個值，他可以監聽到他內部的屬性改變，根據改變來決定計算屬性是否重新執行返回，延伸計算屬性,可以賦值，但不建議具體用法見文檔 4.當 {{}}里面出現了復雜的邏輯算法的時候可以考慮computed 5.在watch 和computed 中不要去更改監聽的值最好，這樣容易造成無限循環的情況 6.watch 可以執行任何邏輯，如節流，ajax 異步數據，dom操作，計算屬性也能做ajax 但官方推薦在watch中，個人理解第一點計算屬性在組件初始化時候會運行一次，watch不會，很多場景的異步，我們都是想改變在觸發，不想頁面加載觸發，因此計算屬性就變得雞肋了 ~~~ >[danger] ##### 三者區別 ~~~ 1.computed屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用；只要依賴的內部監聽的data改變，計算屬性會再次計算一遍,但是在初始化的時候會計算一遍 2.methods方法表示一個具體的操作，主要書寫業務邏輯methods為什么不能作為算屬性替代品，因為計算屬性監聽內容改變才重新計算，但methods 調用就算，如果大量使用對屬性的重新賦值的地方會消耗性能。 3.watch一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體；不會像computed 初始化計算，而是根據使用者決定什么時候開始使用，默認新老數據不一樣的時候 4.computed 和watch methods，前兩者不用綁定事件執行，后者需要綁定事件才能執行 ~~~ >[info] ## 同一個案例三種寫法 ![](https://box.kancloud.cn/4ce3ff023bb409988a226bc086f4e148_558x54.png) >[danger] ##### 計算屬性--computed ~~~ 1.在 computed 中，可以定義一些屬性，這些屬性，叫做【計算屬性】，計算屬性的，本質，就是一個方法，只不過，我們在使用這些計算屬性的時候，是把它們的名稱，直接當作屬性來使用的；并不會把計算屬性，當作方法去調用；而且第一次使用就會執行，后續執行是根據計算內部值變化才會變化因為內部的緩存機制 2.注意1：計算屬性，在引用的時候，一定不要加 () 去調用，直接把它當作普通屬性去使用就好了； 3.注意2：只要計算屬性，這個 function 內部，所用到的任何 data 中的數據發送了變化，就會立即重新計算這個計算屬性的值 4.注意3：計算屬性的求值結果，會被緩存起來，方便下次直接使用；如果計算屬性方法中，所以來的任何數據，都沒有發生過變化，則，不會重新對計算屬性求值； 5.注意4:當給v-model 綁定計算屬性的時候，注意這時候我們想做的是既可以賦值，又可以得到值，但是computed默認只能得到值也就是get，需要手動添加set方法(具體見前面章節案例篇章中的多選) 6.必須return 返回 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname"> + <input type="text" v-model="middlename"> + <input type="text" v-model="lastname"> = <input type="text" v-model="fullname"> <p>{{ fullname }}</p> <p>{{ fullname }}</p> <p>{{ fullname }}</p> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', middlename: '' }, methods: {}, computed: { 'fullname': function () { console.log('ok') return this.firstname + '-' + this.middlename + '-' + this.lastname } } }); </script> </body> </html> ~~~ >[danger] ##### watch -- 監聽 ~~~ 1.watch 中的方法名對應的是data中的數據名稱 2.官方文檔案例中還提供了一個案例用來實現，監聽用戶輸入的內容，去后臺查到對應信息的優化方法見'計算屬性和偵聽器'章節 3. 第一種使用(第一次渲染的時候不會執行) watch{ 要監聽的data值:function(newVal, oldVal){ //newVal 變化的值，oldVal 變化之前的值 } } 4.如果想讓watch 第一次就監聽到內容使用immediate: true屬性或者直接計算屬性(其中在handler方法中監聽新舊值)： watch:{ 要監聽的data值:{ handler: function (val, oldVal) { /* ... */ }, immediate: true } } 5.如果想監聽對象內部內容時候需要使用deep,因為對象是一個地址，內部內容改變，但地址沒變實際是監聽不到的，所以需要deep : c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, 這里要說明一下，比如現在在data中有一個對象類似obj:{a:"123"},但是我們監聽的是obj，實際上當我們改變obj.a的屬性的時候，watch是監聽不到的，因此需要我們使用deep:true,但是deep會把這個對象中所有的key都進行，綁定監聽因此會浪費性能，建議如果只要監聽一項可以寫一個字串'obj.a'的形式在watch中 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = <input type="text" v-model="fullname"> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: {}, watch: { // 使用這個屬性，可以監視 data 中指定數據的變化，然后觸發這個 watch 中對應的 function 處理函數 'firstname': function (newVal, oldVal) { // console.log('監視到了 firstname 的變化') // this.fullname = this.firstname + '-' + this.lastname // console.log(newVal + ' --- ' + oldVal) this.fullname = newVal + '-' + this.lastname }, 'lastname': function (newVal) { this.fullname = this.firstname + '-' + newVal } } }); </script> </body> </html> ~~~ >[danger] ##### methos -- 事件觸發 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname" @keyup="getFullname"> + <input type="text" v-model="lastname" @keyup="getFullname"> = <input type="text" v-model="fullname"> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: { getFullname() { this.fullname = this.firstname + '-' + this.lastname } } }); </script> </body> </html> ~~~ >[info] ## 更直觀的看出computed的緩存機制 ~~~ 1.復制下面案例運行一下看看神奇,計算屬性將不再更新，因為 Date.now () 不是響應式依賴 ~~~ ~~~html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script> </head> <body>  <div id="app"> <input type='submit' value='切換我帶你看計算屬性緩存的強大' @click='isShow=!isShow' /> <div v-if='isShow'> 我是計算屬性代表： {{CGetData}} <br /> 我是方法代表：{{MGetData()}} </div> <div v-else> 我是計算屬性代表： {{CGetData}} <br /> 我是方法代表：{{MGetData()}} </div> </div> <script> var vm = new Vue({ el: '#app', data: { isShow: true, }, methods: { MGetData() { return Date.now() } }, computed: { CGetData() { return Date.now() } } }) </script> </body> </html> ~~~