Vue中關(guān)于computed計(jì)算屬性的妙用

更新時(shí)間：2022年11月17日 09:43:28 作者：流轉(zhuǎn)往復(fù)

這篇文章主要介紹了Vue中關(guān)于computed計(jì)算屬性的妙用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

computed

computed：相當(dāng)于method，返回function內(nèi)return的值賦值在html的DOM上。

但是多個(gè){{}}使用了computed，computed內(nèi)的function也只執(zhí)行一次。

僅當(dāng)function內(nèi)涉及到Vue實(shí)例綁定的data的值的改變，function才會(huì)從新執(zhí)行，并修改DOM上的內(nèi)容。

computed和method的對(duì)比

<div id="example">
? {{ message.split('').reverse().join('') }}
</div>

這個(gè)是vue官網(wǎng)一直拿來(lái)作為例子的代碼。在{{}}可以很方便的放入單個(gè)表達(dá)式，但是當(dāng)一個(gè)HTML的DOM里面存在太多的表達(dá)式，程序會(huì)變得很笨重難于維護(hù)。

html

<div id="app9">
? ? 9、method與computed的區(qū)別

? ? fullName

? ? {{fullName}}

? ? fullName2

? ? {{fullName}}

? ? fullNameMethod

? ? {{getFullName()}}

? ? fullNameMethod2

? ? {{getFullName()}}

</div>

js

var app9 = new Vue({
? ? el: '#app9',
? ? data: {
? ? ? ? firstName: 'Foo',
? ? ? ? lastName: 'Bar'
? ? },
? ? methods:{
? ? ? ? getFullName:function () {
? ? ? ? ? ? console.log("執(zhí)行了methods")
? ? ? ? ? ? return this.firstName+" " +this.lastName;
? ? ? ? }
? ? },
? ? computed: {
? ? ? ? fullName: function () {
? ? ? ? ? ? console.log("執(zhí)行了computed")
? ? ? ? ? ? return this.firstName + ' ' + this.lastName
? ? ? ? }
? ? }
})
setTimeout('app9.firstName="Foo2"',3000);

控制臺(tái)輸出的結(jié)果
執(zhí)行了computed
執(zhí)行了methods
執(zhí)行了methods
執(zhí)行了computed
執(zhí)行了methods
執(zhí)行了methods

由此可見使用computed，function只會(huì)執(zhí)行一次。當(dāng)Vue實(shí)例中綁定的data數(shù)據(jù)改變的時(shí)候，computed也相對(duì)應(yīng)的只改變一次。

相同點(diǎn)：

在以上代碼中，兩個(gè)p標(biāo)簽都會(huì)打印出同樣被反轉(zhuǎn)的Hello。

不同點(diǎn)：

使用了methods的：HTML中，每一個(gè)調(diào)用了Vue的methods的方法，都需要執(zhí)行一遍reversedMessage()這個(gè)方法；
而使用computed計(jì)算屬性的，只執(zhí)行一遍將結(jié)果保存在緩存中。

computed和watch的對(duì)比

html

<div id="demo">{{ fullName }}</div>

js

var vm = new Vue({
? el: '#demo',
? data: {
? ? firstName: 'Foo',
? ? lastName: 'Bar',
? ? fullName: 'Foo Bar'
? },
? watch: {
? ? firstName: function (val) {
? ? ? this.fullName = val + ' ' + this.lastName
? ? },
? ? lastName: function (val) {
? ? ? this.fullName = this.firstName + ' ' + val
? ? }
? }
})

var vm = new Vue({
? el: '#demo',
? data: {
? ? firstName: 'Foo',
? ? lastName: 'Bar'
? },
? computed: {
? ? fullName: function () {
? ? ? return this.firstName + ' ' + this.lastName
? ? }
? }
})

watch可以監(jiān)聽數(shù)據(jù)的改變（不能監(jiān)測(cè)數(shù)據(jù)內(nèi)部的改變），但是如果使用不當(dāng)就是多此一舉了。

比如以上這個(gè)例子，使用watch監(jiān)聽firstName和lastName兩個(gè)數(shù)據(jù)，其實(shí)就相當(dāng)于computed，function內(nèi)使用了Vue實(shí)例綁定的firstName和lastName。

setter

computed有g(shù)etter屬性也有setter屬性，默認(rèn)只有g(shù)etter。

這個(gè)比較簡(jiǎn)單，貼個(gè)官網(wǎng)的代碼就好了。

computed: {
? fullName: {
? ? // getter
? ? get: function () {
? ? ? return this.firstName + ' ' + this.lastName
? ? },
? ? // setter
? ? set: function (newValue) {
? ? ? var names = newValue.split(' ')
? ? ? this.firstName = names[0]
? ? ? this.lastName = names[names.length - 1]
? ? }
? }
}
vm.fullName = 'John Doe';//此時(shí)觸發(fā)set函數(shù)

watch

比較適合watch的場(chǎng)景，監(jiān)聽input的輸入

<div id="watch-example">
? <p>
? ? Ask a yes/no question:
? ? <input v-model="question">
? </p>
? <p>{{ answer }}</p>
</div>

<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
? el: '#watch-example',
? data: {
? ? question: '',
? ? answer: 'I cannot give you an answer until you ask a question!'
? },
? watch: {
? ? // 如果 question 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行
? ? question: function (newQuestion) {
? ? ? this.answer = 'Waiting for you to stop typing...'
? ? ? this.getAnswer()
? ? }
? },
? methods: {
? ? getAnswer: _.debounce(
? ? ? function () {
? ? ? ? if (this.question.indexOf('?') === -1) {
? ? ? ? ? this.answer = 'Questions usually contain a question mark. ;-)'
? ? ? ? ? return
? ? ? ? }
? ? ? ? this.answer = 'Thinking...'
? ? ? ? var vm = this
? ? ? ? axios.get('https://yesno.wtf/api')
? ? ? ? ? .then(function (response) {
? ? ? ? ? ? vm.answer = _.capitalize(response.data.answer)
? ? ? ? ? })
? ? ? ? ? .catch(function (error) {
? ? ? ? ? ? vm.answer = 'Error! Could not reach the API. ' + error
? ? ? ? ? })
? ? ? },
? ? ? // 這是我們?yōu)橛脩敉Ｖ馆斎氲却暮撩霐?shù)
? ? ? //_.debounce 0.5秒內(nèi)刷新就不執(zhí)行函數(shù)
? ? ? 500
? ? )
? }
})
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: