Vue中關于computed計算屬性的妙用

更新時間：2022年11月17日 09:43:28 作者：流轉往復

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

computed

computed：相當于method，返回function內return的值賦值在html的DOM上。

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

僅當function內涉及到Vue實例綁定的data的值的改變，function才會從新執(zhí)行，并修改DOM上的內容。

computed和method的對比

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

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

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);

控制臺輸出的結果
執(zhí)行了computed
執(zhí)行了methods
執(zhí)行了methods
執(zhí)行了computed
執(zhí)行了methods
執(zhí)行了methods

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

相同點：

在以上代碼中，兩個p標簽都會打印出同樣被反轉的Hello。

不同點：

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

computed和watch的對比

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)測數(shù)據(jù)內部的改變），但是如果使用不當就是多此一舉了。

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

setter

computed有getter屬性也有setter屬性，默認只有getter。

這個比較簡單，貼個官網(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';//此時觸發(fā)set函數(shù)

watch

比較適合watch的場景，監(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ā)生改變，這個函數(shù)就會運行
? ? 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秒內刷新就不執(zhí)行函數(shù)
? ? ? 500
? ? )
? }
})
</script>

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

您可能感興趣的文章: