您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue中偵聽器,緩存與computed的區(qū)別是什么”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“vue中偵聽器,緩存與computed的區(qū)別是什么”吧!
當一些數(shù)據(jù)需要根據(jù)其它數(shù)據(jù)變化時,需要進行處理才能去展示,雖然vue提供了綁定數(shù)據(jù)表達式綁定的方式,但是設計它的初衷只是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護,對于一些比較復雜和特殊的計算有可能就捉襟見肘了,而且計算的屬性寫在模板里也不利于項目維護
computed主要的作用:
分離邏輯(模板和數(shù)據(jù)分離)
緩存值
雙向綁定(getter,setter)
格式
computed:{ [key: string]: Function | { get: Function, set: Function } }
參數(shù)說明:
key:字符串類型
值:可以是一個方法,如果是方法默認是get操作,也可以是對象 ,設置get屬性或者set屬性
說明
在一個計算屬性里可以完成各種復雜的邏輯,包括運算、函數(shù)調用等,最終返回一個結果,
計算屬性還可以依賴多個Vue 實例的數(shù)據(jù),只要其中任一數(shù)據(jù)變化,計算屬性就會重新執(zhí)行,視圖也會更新,適用于比較費時的數(shù)據(jù)計算
示例代碼
<div id="app"> <!--使用表達式的方式--> <p v-text="originalPrice - discountPrice"></p> <!--使用計算屬性的方式--> <p v-text="currentPrice"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { id:1, originalPrice:1200, discountPrice:200, }, //計算屬性 computed: { // 把日期換成 常見規(guī)格格式的字符串。 currentPrice: function () { return "當前價格:" + (this.originalPrice - this.discountPrice); } } });
說明
每一個計算屬性都包含一個getter 和一個setter,上面的示例都是計算屬性的默認用法, 只是利用了getter來讀取
如果需要,也可以提供一個setter 函數(shù), 當修改計算屬性的值就像修改一個普通數(shù)據(jù)那樣時,就會觸發(fā)setter 函數(shù)
示例代碼
<div id="app1"> <p v-text="currentPrice"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { id: 1, originalPrice: 1200, discountPrice: 200, }, //計算屬性 computed: { cache:false, // 把日期換成 常見規(guī)格格式的字符串。 currentPrice: { get: function () { return "當前價格:" + (this.originalPrice - this.discountPrice); }, // 注意必須要傳遞參數(shù),否則沒有意義 set: function (value) { //執(zhí)行自定義的一下操作 this.discountPrice = value } } } }); </script> <!-- 在 console 中 輸入 app.currentPrice=300 1> 先執(zhí)行get方法改變discountPrice的值 2> 因為數(shù)據(jù)發(fā)生改變了 所以會重新計算當前的價格, 執(zhí)行get方法 -->
注意
絕大多數(shù)情況下,我們只會用默認的
getter
方法來讀取一個計算屬性,在業(yè)務中很少用到setter
,所以在聲明一個計算屬性時,可以直接使用默認的寫法
說明
計算屬性基于它們的依賴進行緩存的,只有相關依賴發(fā)生改變的時候才會重新求值,一般為響應式依賴
什么是響應式依賴,Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行
getter/setter
轉化過程,所以屬性必須在data
對象上存在才能讓 Vue 轉換它,這樣才能讓它是響應
示例代碼
<!-- 響應式依賴 --> <script> var vm = new Vue({ data: { // 聲明 message 為一個空值字符串 message: '' }, }) // 響應式 vm.message = 'Hello!' vm.v="非響應式的的值" </script>
<div id="app"> <button @click="getMethodsDate">methods</button> <button @click="getComputedDate">computed帶緩存</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', methods: { getMethodsDate: function () { console.log(new Date().toLocaleTimeString()) }, // 返回computed選項中設置的計算屬性——computedDate getComputedDate: function () { console.log("緩存--->" + this.computedDate) } }, computed: { computedDate: function () { return new Date().toLocaleTimeString() } } }) </script>
computed 只有符合:存在依賴型數(shù)據(jù),依賴型數(shù)據(jù)發(fā)生改變這兩個條件,computed才會重新計算。而methods下的數(shù)據(jù),是每次都會進行計算的
調用方式不一樣,computed
定義的成員像屬性一樣訪問,而methods
定義的成員必須以函數(shù)形式調用。
computed
是帶緩存的,只有其引用的響應式屬性發(fā)生改變時才會重新計算,而methods
里的函數(shù)在每次調用時都要執(zhí)行。
官方:當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,watch 選項允許我們執(zhí)行異步操作 (訪問一個 API),限制我們執(zhí)行該操作的頻率,并在我們得到最終結果前,設置中間狀態(tài)
watch
和我們前面介紹的methods
相同的語法,但是有一個關鍵的區(qū)別。雖然嵌套屬性的值確實是函數(shù),但鍵的名稱必須對應數(shù)據(jù)屬性中的名稱
watch:{ [key: string]: string | Function | Object }]
key:必須是Vue對象data中定義的屬性
值:值可以是一個字符串,這個字符串是方法名;值可以是一個函數(shù);值也可以是一個對象,其中包含回調函數(shù)可以其他選項:比如是否深度遍歷。
示例代碼
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ data: { test: "111", user: { name: "碼帝", address: { city: "大武漢" } } }, methods: { fun: function (val) { alert(val) } }, watch: { // 方法名方式 對應 methods中的函數(shù)名 // test: 'fun', // 函數(shù)方式 test: function (v1, v2) { alert("新值" + v1 + "====舊值:" + v2) }, /** *什么是深度 例如 data: {test: "111", user: {name: "碼帝" ,address{city:'大武漢'}} * user屬性對應值就是深層,一次內推 * 如果我們監(jiān)聽的user屬性 當user.name屬性發(fā)生改變的時候 watch監(jiān)聽是不到,所有我們這里需要使用深層監(jiān)聽 */ // user: { handler: function (val) { alert(val.name) }, // 是否深度監(jiān)聽 默認是false // 如果不設置為true當我們手動設置vm.user.name = "擼帝"的時候,是監(jiān)聽不到的 deep: true }, /** * 或者也可以使用下面的方式來監(jiān)聽 * 注意鍵值必須是一個字符串,所以用引號括起來 * */ "user.address.city": function (val) { alert(val) } } }); vm.test = '333'; vm.user.name = "擼帝"; vm.user.address.city = '長沙'
<div id="app"> <input type="text" v-model="search"/> <ul> <li v-for="result in results" v-text="result"></li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { user:{ name:"碼帝", } search: "", results: [], }, methods: { fun: function () { alert("111"); } } watch: { // 使用函數(shù) search: function (v1, v2) { console.log('新值: %s, 舊值: %s', v1, v2) this.results.push(v1) } } }) </script>
觸發(fā)條件不同
computed計算屬性會依賴于使用它的data屬性,只要是依賴的data屬性值有變動,則自定義重新調用計算屬性執(zhí)行一次。
watch則是在監(jiān)控的data屬性值發(fā)生變動時,其會自動調用watch回調函數(shù)。
應用場景不同
執(zhí)行異步操作,開銷較大的操作,避免堵塞主線程,使用watch。
簡單且串行返回的,使用computed
感謝各位的閱讀,以上就是“vue中偵聽器,緩存與computed的區(qū)別是什么”的內容了,經(jīng)過本文的學習后,相信大家對vue中偵聽器,緩存與computed的區(qū)別是什么這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。