詳解Vue3?中的計算屬性及偵聽器
計算屬性
我們知道,在模板中可以直接通過插值語法顯示一些data中的數(shù)據(jù),但是在某些情況,我們可能需要對數(shù)據(jù)進行一些轉(zhuǎn)化后再顯示,或者需要將多個數(shù)據(jù)結(jié)合起來進行顯示
在模板中使用表達式,可以非常方便的實現(xiàn),但是設(shè)計它們的初衷是用于簡單的運算,在模板中放入太多的邏輯會讓模板過重和難以維護,并且如果多個地方都使用到,那么會有大量重復(fù)的代碼
所以我們希望將業(yè)務(wù)邏輯和UI界面進行分離,其中一種方式就是將邏輯抽取到一個method中,但這種做法有以下弊端
- 所有的data使用過程都會變成了一個方法的調(diào)用
- 多次獲取數(shù)據(jù),需要多次調(diào)用方法,執(zhí)行對應(yīng)的邏輯,沒有緩存
事實上,對于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯,你都應(yīng)該使用計算屬性
<div id="app"> <!-- 計算屬性的使用和普通狀態(tài)的使用方式是一致的 --> <h2>{{ fullname }}</h2> </div> <script> Vue.createApp({ data() { return { firstname: 'Klaus', lastname: 'Wang' } }, computed: { fullname() { return this.firstname + ' ' + this.lastname } } }).mount('#app')
緩存
計算屬性會基于它們的依賴關(guān)系進行緩存,在數(shù)據(jù)不發(fā)生變化時,計算屬性是不需要重新計算的
但是如果依賴的數(shù)據(jù)發(fā)生變化,在使用時,計算屬性依然會重新進行計算
并且界面會使用最新的計算屬性的值進行重新渲染
getter 和 setter
計算屬性在大多數(shù)情況下,只需要一個getter方法即可,所以我們會將計算屬性直接寫成一個函數(shù)
<div id="app"> <!-- 計算屬性的使用和普通狀態(tài)的使用方式是一致的 --> <h2>{{ fullname }}</h2> <button @click="change">change</button> </div> <script> Vue.createApp({ data() { return { firstname: 'Klaus', lastname: 'Wang' } }, methods: { change() { this.fullname = 'Alex Li' } }, computed: { // 計算屬性的完整寫法 fullname: { get() { return this.firstname + ' ' + this.lastname }, set(v) { this.firstname = v.split(' ')[0] this.lastname = v.split(' ')[1] } } } }).mount('#app') </script>
偵聽器
在data返回的對象中定義了數(shù)據(jù),這個數(shù)據(jù)通過插值語法等方式綁定到template中,當(dāng)數(shù)據(jù)變化時,template會自動進行更新來顯示最新的數(shù)據(jù)
但是在某些情況下,我們希望在代碼邏輯中監(jiān)聽某個數(shù)據(jù)的變化,這個時候就需要用偵聽器watch來完成了
Vue.createApp({ data() { return { info: { name: 'Klaus' } } }, watch: { // 可以使用watch監(jiān)聽響應(yīng)式數(shù)據(jù)的改變 // 對應(yīng)有兩個參數(shù) // 參數(shù)一 --- 新值 // 參數(shù)二 --- 舊值 info(newV, oldV) { // 如果監(jiān)聽的值是對象,獲取到的新值和舊值是對應(yīng)對象的代理對象 console.log(newV, oldV) // 代理對象 轉(zhuǎn) 原生對象 // 1. 使用淺拷貝獲取一個新的對象,獲取的新的對象為原生對象 console.log({...newV}) // 2. 使用Vue.toRaw方法獲取原生對象 console.log(Vue.toRaw(newV)) } }, methods: { change() { this.info = { name: 'Steven' } } } }).mount('#app')
配置選項
屬性 | 說明 |
---|---|
deep | 是否開啟深度監(jiān)聽 值為boolean 未開啟的時候,如果監(jiān)聽的是對象,那么只有對象的引用發(fā)生改變的時候,才會觸發(fā)watch回調(diào) 開始后,如果監(jiān)聽的是對象,那么只要對象中的任意一個屬性發(fā)生了改變,就會觸發(fā)watch回調(diào) |
immediate | 是否立即開始監(jiān)聽 默認(rèn)情況下,初次渲染是不會觸發(fā)watch監(jiān)聽,只有當(dāng)值發(fā)生改變后,才會觸發(fā)watch監(jiān)聽 將immediate設(shè)置為true后,初次渲染也會觸發(fā)watch監(jiān)聽,此時oldValue的值為undefined |
Vue.createApp({ data() { return { info: { name: 'Klaus' } } }, watch: { info: { // 開啟了深度監(jiān)聽后,當(dāng)info的屬性發(fā)生改變的時候,就會觸發(fā)對應(yīng)的watch回調(diào) // 注意: 和直接修改info引用不同的是,如果直接修改的是對象的屬性 // 那么此時newV和oldV是同一個對象的引用, 此時也就獲取不到對應(yīng)的舊值 handler(newV, oldV) { console.log(newV, oldV) console.log(newV === oldV) // => true }, deep: true, immediate: true } }, methods: { change() { this.info.name = 'Steven' } } }).mount('#app')
其它寫法
直接監(jiān)聽對象屬性
watch: { 'info.name'(newV, oldV){ console.log(newV, oldV) } }
字符串寫法
Vue.createApp({ data() { return { info: { name: 'Klaus' } } }, watch: { // watch的值如果是一個字符串的時候 // 會自動以該字符串作為函數(shù)名去methods中查找對應(yīng)的方法 'info.name': 'watchHandler' }, methods: { change() { this.info.name = 'Steven' }, watchHandler(newV, oldV){ console.log(newV, oldV) } } }).mount('#app')
數(shù)組寫法
Vue.createApp({ data() { return { info: { name: 'Klaus' } } }, watch: { 'info.name': [ 'watchHandler', function handle() { console.log('handler2') }, { handler() { console.log('handler3') } } ] }, methods: { change() { this.info.name = 'Steven' }, watchHandler(){ console.log('handler1') } } }).mount('#app')
$watch
Vue.createApp({ data() { return { info: { name: 'Klaus' } } }, created() { /* $watch 參數(shù)列表 參數(shù)一 --- 偵聽源 參數(shù)二 --- 偵聽回調(diào) 參數(shù)三 --- 配置對象 */ this.$watch('info.name', (newV, oldV) => console.log(newV, oldV), { immediate: true }) }, methods: { change() { this.info.name = 'Steven' } } }).mount('#app')
到此這篇關(guān)于詳解Vue3 中的計算屬性及偵聽器的文章就介紹到這了,更多相關(guān)Vue偵聽器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法
這篇文章主要介紹了父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法,需要的朋友可以參考下2018-04-04VueJs中的shallowRef與shallowReactive函數(shù)使用比較
這篇文章主要為大家介紹了VueJs中的shallowRef與shallowReactive函數(shù)的使用比較解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04vue3?TS?vite?element?ali-oss使用教程示例
這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07基于elementUI使用v-model實現(xiàn)經(jīng)緯度輸入的vue組件
這篇文章主要介紹了基于elementUI使用v-model實現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05