Apakah yang boleh dilakukan oleh harta pengiraan Vue? Analisis ringkas senario aplikasi

Apakah yang boleh dilakukan oleh sifat pengiraan Vue? Apakah senario yang boleh digunakan? Artikel berikut akan membawa anda memahami sifat pengiraan Vue dan membandingkannya dengan kaedah dan jam tangan saya harap ia akan membantu anda!

Atribut yang dikira dalam Vue ialah pengiraan semua atribut, dan pengiraan ini semuanya berubah dalam nilai penapisan, dan nilai dan operasi yang berbeza dikira melalui perubahan berterusan data. Kaedah yang berbeza Dalam Vue, senario biasa yang digunakan untuk sifat yang dikira ialah:

• Ungkapan dalam templat

• atribut Ungkapan yang boleh dilakukan dalam v-bind. (Belajar perkongsian video: tutorial video vue)

• Ungkapan yang boleh dilakukan dalam arahan

Tiga di atas Kelebihan utama adalah kesederhanaan. Jika ia hanya operasi kecil, seperti beberapa nilai berangka mudah , penyambungan aksara dan ungkapan ternary, maka ia agak mudah untuk digunakan. Semestinya kaedah di atas juga mempunyai kelemahannya yang tersendiri. Apabila logik yang akan diproses adalah kompleks, jumlah kod menjadi lebih besar dan sukar untuk dikekalkan. Sebagai contoh, jika pernyataan digunakan untuk mengawal proses. Kemudian anda mungkin terfikir untuk menggunakan filter pada masa ini. Mari kita lihat contoh mudah.

<div id="app">
    <button @click="count++">{{count + &#39;分&#39;}}</button>
    <div>
        <input v-model="message" />
    </div>
    <p>{{ message.split(&#39; &#39;).reverse().join(&#39; &#39;) }}</p>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            count: 0,
            message: ''
        }
    }
})

Kesannya adalah seperti berikut:

Daripada contoh di atas kita boleh lihat:

• Kami menggunakan penggabungan rentetan dalam templat {{count '分'}}

• mengikat acara v-bind yang ditentukan oleh click, yang hanya melakukan satu perkara, iaitu, count , setiap kali button diklik, nilai count meningkat 1 Ambil perhatian bahawa methods

• input tidak digunakan di sini melalui Pengikatan data dua hala telah dilakukan, v-model telah diikat dan rentetan message telah diterbalikkan dalam teg p. message

Apabila anda mengira dan menukar

dalam tag p, adakah anda rasa semantiknya tidak begitu kuat, jadi apakah kaedah yang lebih baik? Ini memerlukan kita menggunakan penapis yang dinyatakan sebelum ini. message

Menggunakan penapis

Kita boleh mengubah suai contoh sebelumnya menggunakan

. Malah, menggunakan filter dalam Vue mempunyai kelebihan dan keburukan tersendiri: filter

• Kelebihan: memberi kita keupayaan untuk mengira dan Menapis beberapa kelemahan daripada beberapa ungkapan templat dan ungkapan atribut filter untuk pengiraan ia akan mengembalikan nilai yang dikira semasa anda boleh menghantar parameter dan berkongsi kaedah penapisan ini di berbilang tempat. Jika kita ingin mengira tempat di mana berbilang data digabungkan dengan perubahan yang berbeza, maka v-bind lebih sukar untuk ditapis,

  ialah tingkah laku satu dengan satu Menapis satu data boleh dilakukan Melepasi parameter , kaedah yang sama, tetapi parameter berbeza

• 劣势 Ubah suai contoh di atas dengan filter seperti berikut: filter

filter

Dalam contoh ini, kami menggunakan penapis untuk melaksanakannya Jelas sekali jumlah kod adalah lebih sedikit, tetapi semantik keseluruhannya menjadi agak jelas apabila mereka melihatnya ialah pembalikan rentetan apabila anda melihat reverseString.

<div id="app">
    <button @click="count++">{{count + &#39;分&#39;}}</button>
    <div>
        <input v-model="message" />
    </div>
    <p>{{ message | reverseString }}</p>
</div>

let app = new Vue({
    el: &#39;#app&#39;,
    data () {
        return {
            count: 0,
            message: &#39;&#39;
        }
    },
    filters: {
        reverseString (value) {
            if (!value) return &#39;&#39;
            value = value.split(&#39;&#39;).reverse().join(&#39;&#39;)
            return value
        }
    }
})

Setelah berkata begitu banyak sebelum ini, sebenarnya, kita semua berada di sini untuk membuka jalan bagi senario aplikasi

. Soalan datang lagi,

apa boleh buat? Apakah senario yang boleh digunakan?

dalam Vue sebenarnya mengelakkan semua keburukan sintaks templat dan

Kelebihannya terletak pada pengiraan semua data bergantung dan kemudian mengembalikan nilai computed Anda boleh bergantung pada semua data dalam kaedah. Selagi satu data berubah, ia akan dikira semula untuk mengemas kini perubahan paparan computed. Tidakkah ia menarik?

Mari kita bincangkan tentang senario penggunaan. Saya akan menunjukkan senario aplikasi yang mudah dan praktikal kepada anda dahulu, dan kemudian saya akan membuat senario aplikasi yang lebih menarik kemudian. computedfilterMasihkah anda ingat bahawa semasa kami bermain Weibo, terdapat had aksara semasa menyiarkan di Weibo, contohnya, hanya aksara boleh dimasukkan. Untuk menjadikan pengalaman pengguna lebih baik, apabila memasukkan kandungan dalam medan teks, terdapat juga mesej gesaan yang memberitahu pengguna berapa banyak aksara yang boleh anda masukkan. Maka lebih mudah untuk menggunakan Vue untuk melakukan perkara sedemikian. Contohnya, contoh berikut:

Kesannya adalah seperti berikut:

你可以尝试在文本域中输入内容，你将体验的效果类似下图一样：

在computed创建了一个reduceCount，一直在监听文字的字符长度，来再次进行计算，返回值给视图，让视图进行变化。这也是一个很简单的示例。前面也提到过，我们可以监听多个数据，只要一个数据变了，整个方法就会重新计算，然后反馈到视图，这个方法只是一个简单的应用。咱们再来看一个示例，这样会更好的帮助我们理解。

这个示例是一个足球比赛记分的示例。简单的对示例进行分析：

• 比赛时间，用time来维护

• 比赛双方的进球数，用对象team来维护

• 比赛的播报情况，在90分钟内，要显示中国领先或者韩国领先或者双方僵持，如果到了90分钟我们要显示中国队赢还是韩国队赢，还是平局

第三个数据相对而言比较复杂，也是比较关键的数据。那么我们用什么方式来维护，可以说比赛情况是多样化的，用一个数据去定死，这样不符合我们的场景。那么我们先列出将会改变的地方：

• 我们需要检测双方的进球数

• 通过时间来比对，确定比赛是否结果，然后显示对应的方案

这样我们就要不断的监听两个维护的数据，一是比赛时间，二是比赛两队进球数。

<div id="app">
    <h1>比赛时间：{{ time }}s</h1>
    <h2>直播播报：{{ result }}</h2>
    <div class="team">
        <div>
            <span>中国队进球数：{{ team.china }}</span>
            <button @click="team.china++">点击中国队进一球</button>
        </div>
        <div>
            <span>韩国队进球数：{{ team.korea }}</span>
            <button @click="team.korea++">点击韩国队进一球</button>
        </div>
    </div>
</div>

let app = new Vue({
    el: &#39;#app&#39;,
    data () {
        return {
            time: 0,
            team: {
                china: 0,
                korea: 0
            }
        }
    },
    created () {
        let time = setInterval(() => {
            this.time++
            if (this.time == 90) {
                clearInterval(time)
            }
        }, 1000)
    },
    computed: {
        result () {
            if (this.time < 90) {
                if (this.team.china > this.team.korea) {
                    return &#39;中国队领先&#39;
                } else if (this.team.china < this.team.korea) {
                    return &#39;韩国领先&#39;
                } else {
                    return &#39;双方僵持&#39;
                }
            } else {
                if (this.team.china > this.team.korea) {
                    return &#39;中国队赢&#39;
                } else if (this.team.china < this.team.korea) {
                    return &#39;韩国队赢&#39;
                } else {
                    return &#39;平局&#39;
                }
            }
        }
    }
})

看到的效果如下：

注：这里时间90分钟是一个写死的时间值。如果要让Demo更为完美，这个时间我们可以写一个90分钟的倒计时效果。如果你感兴趣的话，可以自己动手修改上面的Demo，然后在下面的评论中与我们一起分享。

这个示例中，用了点击事件来进行双方进球数，这个Demo帮助我们能能更充分的理解Vue中的computed的含义。说到底是观察一个或多个数据，每当其中一个数据改变的时候，这个函数就会重新计算，还有就是通过观察所有数据来维护一个状态，就是所谓的返回一个状态值。从上面这个Demo，我们就可以很容易的知道computed到底用在什么场景，如何去维护返回一个多状态的场景。

methods vs computed

在Vue中，使用methods可以做computed同样的事情，不同的是，computed可以进行缓存。什么意思呢？就是在上个例子中我们对比赛时间和两个球队的进球数进行了检测数据。如果随着时间的改变，但是球数没动，对于computed来说只会重新计算这个球数，进入缓存，而不会再次计算，而重新计算的是这个时间，而且页面的DOM更新也会触发methods来重新计算属性。所以，如果不想让计算属性进入缓存，请使用methods，但我个人更推荐使用computed，语义化会更好一点。毕竟是什么选项里就应该做什么事，methods里面就是应该来管事件的。

computed vs watch

computed和watch都可以做同一件事，就像跑步运动员都可以跑步，但是分100米和1000米，术业有专攻嘛，两个选项都是对数据进行时时监听，但是两个的适用场景就不一样了：

• computed前面说了是适用于对多数据变动进行监听，然后来维护一个状态，就是返回一个状态

• wacth是对一个数据监听，在数据变化时，会返回两个值，一个是value(当前值)，二是oldvalue是变化前的值

我们可以通过这些变化也可以去维护一个状态，但是不符合场景。那么watch主要用于什么地方呢？其主要用于监听一个数据来进行复杂的逻辑操作。

<div id="app">
    <h1>比赛时间：{{ time }}s</h1>
    <h2>直播播报：{{ result }}</h2>
    <div class="team">
        <div>
            <span>中国队进球数：{{ team.china }}</span>
            <button @click="team.china++">点击中国队进一球</button>
        </div>
        <div>
            <span>韩国队进球数：{{ team.korea }}</span>
            <button @click="team.korea++">点击韩国队进一球</button>
        </div>
    </div>
</div>


let app = new Vue({
    el: &#39;#app&#39;,
    data () {
        return {
            time: 0,
            team: {
                china: 0,
                korea: 0
            },
            result: &#39;双方僵持&#39;
        }
    },
    created () {
        let time = setInterval(() => {
            this.time++
            if (this.time == 90) {
                clearInterval(time)
            }
        }, 1000)
    },
    wacth: {
        time (value, oldval) {
            if (value < 90) {
                if (this.team.china > this.team.korea) {
                    this.result = &#39;中国队领先&#39;
                } else if (this.team.china < this.team.korea) {
                    this.result = &#39;韩国队领先&#39;
                } else {
                    this.result = &#39;双方僵持&#39;
                }
            } else {
                if (this.team.china > this.team.korea) {
                    this.result = &#39;中国队赢&#39;
                } else if (this.team.chian < this.team.korea) {
                    this.result = &#39;韩国队赢&#39;
                } else {
                    this.result = &#39;平局&#39;
                }
            }
        },
        team (value, oldval) {
            if (this.time < 90) {
                if (value.china > value.korea) {
                    this.result = &#39;中国队领先&#39;
                } else if (value.china < value.korea) {
                    this.result = &#39;韩国队领先&#39;
                } else {
                    this.result = &#39;双方僵持&#39;
                }
            } else {
                if (value.china > value.korea) {
                    this.result = &#39;中国队赢&#39;
                } else if(value.chian < value.korea) {
                    this.result = &#39;韩国队赢&#39;
                } else {
                    this.result = &#39;平局&#39;
                }
            }
        }
    }
})

以上代码和computed产生的效果是一模一样，但是很明显，就像我对computed和watch阐述过了应用场景，这个场景只是维护了一个比赛状态，而不牵扯到逻辑操作。虽然也能完成，但无论从代码量的比对还是可读性，还是可维护性的都不胜于computed。但说到底谁更强大呢？我还是老实说watch更强大，哪里有然他有场景的局限性，但是他可以做牵扯到计算属性的一切操作，缺点是watch只能一个一个监听。

watch应用场景

我相信图片预加载大家肯定都有接触过，当图片量大的时候，为了保证页面图片都加载出来的时候，才渲染页面，再进行一些 Ajax请求，或者逻辑操作。那些时你用computed对这种监听一个数据然后进行一系列逻辑操作和Ajax请求，那watch再适合不过了，如果用computed的话，那是无法实现的。

<template>
    <div v-show=show>
        <img src="https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg" alt="">
        <img src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
        <img src="https://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg" alt="">
        <img src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
    </div>
</template>

<script>
    export default {
        mounted () {
            var _this = this
            let imgs = document.querySelectorAll(&#39;img&#39;)
            console.log(imgs)
            Array.from(imgs).forEach((item)=>{
                let img = new Image()
                img.onload = ()=>{
                    this.count++
                }
                img.src=item.getAttribute(&#39;src&#39;)
            })
        },
        data () {
            return {
                count : 0,
                show : false
            }
        },
        watch : {
            count (val,oldval) {
                if(val == 4){
                    this.show = true
                    alert("加载完毕")
                    //然后可以对后台发送一些ajax操作
                }
            }
        }
    }
</script>

我们可以发现四张图片都加载完毕的时候，页面才渲染出来。

Vue官方有一句话说得很重要：

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的watcher。这是为什么Vue提供一个更通用的方法，使用wacth来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

基于这个描述，我对computed和watch的总结：

• computed：监听多个数据或者一个数据来维护返回一个状态值，只要其中一个或多个数据发生了变化，则会重新计算整个函数体，重新返回状态值

• watch：只能一个一个监听数据，只要这个数据发生变化，就会返回两个参数，第一个是当前的值，第二个是变化前的值。每当变化的时候，则会触发函数体的逻辑行为，根据逻辑行为做后续的操作

其实，computed、watch这几个都不是有多难，如果从表层上来说都很易理解，但从深层面上看，很多时候还是会存在问题。比如说会滥用，混用。这篇文章通过一些示例来讲解Vue的计算属性，并且对其做了一定的分析。我想这些对学习Vue的初级人员或许会有一些帮助。

原文地址：https://www.w3cplus.com/vue/vue-computed.html

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Apakah yang boleh dilakukan oleh harta pengiraan Vue? Analisis ringkas senario aplikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!