資訊專欄INFORMATION COLUMN
摘要：監(jiān)聽器監(jiān)聽器的作用就是監(jiān)視實例中的內(nèi)容變化的。需要監(jiān)聽哪個屬性，就把屬性的名字寫在監(jiān)聽器中?？偨Y(jié)監(jiān)聽器的一般寫法監(jiān)聽器的完整寫法，指定兩個參數(shù)參考內(nèi)容計算屬性和觀察者
1.計算屬性 1-1 計算屬性概述
計算屬性也是 Vue 實例的屬性，和 data 方法中返回的對象中的屬性是等同的存在。通常來說，計算屬性可以簡單理解：
計算屬性其實就是 Vue 實例的一個屬性
計算屬性一般依賴傳統(tǒng)的 Vue 實例屬性
計算屬性一般是通過運算得到的屬性
如果要更加深入的理解計算屬性，可以往下看。
1-2 搭建HTML結(jié)構(gòu)由于計算屬性有幾個特性，需要做一些測試，雖然這些測試可以在 vue-devtools 中調(diào)試查看，但是肯定沒有在頁面上看著更直觀，因此，搭建一下簡單的 HTML 結(jié)構(gòu)，更好的查看最終的執(zhí)行效果：
常規(guī)屬性：
文本框1號：文本框中輸入：{{inpVal}}
計算屬性：
文本框2號：計算屬性的值：{{comInpVal}}
展示的效果如下圖：
現(xiàn)在基本結(jié)構(gòu)已經(jīng)搭建完成了，下面就是寫一些 JavaScript 代碼來操作這些屬性了。
1-3 計算屬性的簡單使用為了遞進式的了解計算屬性，首先我們來看看，計算屬性是如何通過常規(guī)屬性計算得到一個新的屬性的。
這里沿用官網(wǎng)給出的例子，將常規(guī)屬性反轉(zhuǎn)得到計算屬性。
這個時候，聚焦到的 DOM 元素有 文本框1號 文本框中輸入 計算屬性的值，會發(fā)現(xiàn)計算屬性會隨著常規(guī)屬性的輸入，輸出常規(guī)屬性的反轉(zhuǎn)形式：
可以發(fā)現(xiàn)，上面的計算屬性是一個函數(shù)，返回值就是計算屬性的值，而計算得到的值是依賴 Vue 的實例屬性 inpVal
1-4 計算屬性的get與setget說明：
上面的計算屬性只是一種簡寫方式，完整的寫法如下：
computed: {
comInpVal: {
get() {
return this.inpVal.split("").reverse().join("")
}
}
}
其實在寫計算屬性的時候，默認指定的是計算屬性的 get 方法。因此，可以得出兩個結(jié)論：
在計算屬性不需要設(shè)置值的時候，可以只寫出 get 方法，并使用簡寫的形式
計算屬性的 get 方法必須指定返回值，返回值作為計算屬性的最終值
set說明：
既然存在了 get 方法來獲取值，是不是就存在 set 方法來設(shè)置值呢？答案是肯定的，這也是結(jié)構(gòu)中 文本框2號 存在的意義。
現(xiàn)在我們在 文本框2號 中輸入內(nèi)容，會發(fā)現(xiàn)谷歌人員開發(fā)工具中會報錯。
[Vue warn]: Computed property "comInpVal" was assigned to but it has no setter.
從報錯信息中，說明了沒有指定 setter，因此不能對計算屬性進行值的設(shè)置。如果我非要設(shè)置，并且還不讓它報錯，怎么辦？
這個時候就可以指定 set 方法了。
下面我們指定 set 方法，通過計算屬性的設(shè)置來得到常規(guī)屬性的反轉(zhuǎn)值：
computed: {
comInpVal: {
get() { // get方法：獲取值
return this.inpVal.split("").reverse().join("")
},
set(val) { // set方法：設(shè)置值
this.inpVal = val.split("").reverse().join("")
}
}
}
這個時候，再次在 文本框2號 中輸入內(nèi)容，不會出現(xiàn)任何錯誤。至此，獲取計算屬性的值和設(shè)置計算屬性的值都已經(jīng)學習完成了。
2.監(jiān)聽器監(jiān)聽器的作用就是監(jiān)視 Vue 實例中的內(nèi)容變化的。
2-1 搭建簡單的HTML結(jié)構(gòu)這次我們查看效果的時候，主要是在谷歌開發(fā)工具中的控制臺中，因此，搭建一個簡單的結(jié)構(gòu)就好：
2-2 簡單使用監(jiān)聽器
下面我們補充一下監(jiān)聽器，用來監(jiān)聽 inpVal 屬性：
通過代碼會發(fā)現(xiàn)，監(jiān)聽器寫在 watch 中。需要監(jiān)聽哪個屬性，就把屬性的名字寫在監(jiān)聽器中。
在輸入框中不斷輸入內(nèi)容，就會看到隨著內(nèi)容的輸入，控制臺中的內(nèi)容也是不斷變化的。
2-3 監(jiān)聽器的第一個參數(shù)在代碼中可以看到，監(jiān)聽器是一個函數(shù)，如果是函數(shù)，那么應該就可以存在參數(shù)，下面指定第一個參數(shù)。
watch: {
inpVal(newVal) {
console.log(this.inpVal === newVal)
}
}
在文本框中輸入內(nèi)容的時候，會發(fā)現(xiàn)，控制臺中輸入的結(jié)果始終是 true，這說明，第一個參數(shù)就是監(jiān)視的屬性值。
因此，如果只需要得到最終的結(jié)果的情況下，參數(shù)可以省略不寫。
監(jiān)聽器的第一個參數(shù)是新輸入的值，那第二個參數(shù)就是舊值。讓我們寫出兩個參數(shù)對比一下：
watch: {
inpVal(newVal, oldVal) {
console.log(newVal, oldVal)
}
}
在輸入框中輸入內(nèi)容，會發(fā)現(xiàn)控制臺中輸出的效果如下：
1 12 1 123 12
可以發(fā)現(xiàn)，在 123 輸入的時候，12 是前一個值。這個時候，就很清楚的知道，123 是新值，前一個值是舊值。
2-5 總結(jié)監(jiān)聽器的一般寫法：
watch: {
inpVal() {
// ...
}
}
監(jiān)聽器的完整寫法，指定兩個參數(shù)：
watch: {
inpVal(newVal, oldVal) {
// ...
}
}
3.參考內(nèi)容
計算屬性和觀察者
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89336.html
摘要：綁定綁定，使用，簡寫的形式是。綁定比較靈活，可以使用表達式字符串對象或數(shù)組。綁定字符串綁定字符串的時候只能綁定一個，不能綁定多個。 1.綁定Class 綁定Class，使用 v-bind:class，簡寫的形式是 :class。綁定Class比較靈活，可以使用表達式、字符串、對象或數(shù)組。 1-1 搭建結(jié)構(gòu) 首先，新建一些 class 樣式： .colorRed { colo...
摘要：首先把改成的形式這是一段測試文字綁定最后的顯示效果如下，如果要看具體的形式，可以在谷歌人員開發(fā)工具中自行查看指令的組成部分經(jīng)過上面的介紹，應該對指令有一個大概的認識，下面就來對指令的每一項進行說明。 這篇筆記主要用來說明 Vue 中數(shù)據(jù)的定義和指令的一些特性，后續(xù)會做更深入的說明。 1.Vue中的data函數(shù) 1-1 使用data函數(shù) 由于使用的是單文件組件，因此 Vue 組件中的數(shù)據(jù)...
摘要：插件的定義與使用插件的定義需要注意的點定義一個對外公開的方法方法有兩個參數(shù)第一個參數(shù)的構(gòu)造器，第二個參數(shù)是一個可選的對象必須，插件對外公開的方法構(gòu)造器可選參數(shù)，是一個對象添加全局方法或?qū)傩蕴砑尤址椒ɑ驅(qū)傩蕴砑尤仲Y源指令過濾器過渡等添 1.插件的定義與使用 1-1 插件的定義 需要注意的點： 定義一個對外公開的install方法 install方法有兩個參數(shù)：第一個參數(shù)Vue的構(gòu)造...
摘要：混合中的鉤子函數(shù)同名鉤子函數(shù)都會執(zhí)行如果組件中存在鉤子函數(shù)，混合中也存在相同的鉤子函數(shù)，那么兩個鉤子函數(shù)都會執(zhí)行。最終的執(zhí)行結(jié)果多個混合的鉤子函數(shù)多個混合的鉤子函數(shù)，會根據(jù)混合使用的順序來執(zhí)行。 1.認識混合 混合(mixins)是一種分發(fā)Vue組件中可復用功能的非常靈活的方式 混合的作用：抽取多個組件的共同部分，增強組件的可復用性 混合的實質(zhì)：混合對象類似一個Vue實例，可以包含V...
摘要：自定義指令的使用在組件中定義一個自定義指令，作用將當前節(jié)點中字體顏色設(shè)置為紅色。參考內(nèi)容自定義指令 1.自定義指令的使用 在組件中定義一個自定義指令，作用：將當前DOM節(jié)點中字體顏色設(shè)置為紅色。 在自定義指令中簡化了鉤子函數(shù)，下面的鉤子函數(shù)相當于 bind 和 unbind 的縮寫： export default { name: app, directives: ...
閱讀 1712·2021-09-26 09:55
閱讀 5622·2021-09-22 15:40
閱讀 2062·2019-08-30 15:53
閱讀 1534·2019-08-30 11:15
閱讀 1754·2019-08-29 15:41
閱讀 1911·2019-08-28 18:13
閱讀 3195·2019-08-26 12:00
閱讀 1709·2019-08-26 10:30
