特点和区别

vue的computed选项主要用于同步对数据的处理, 而watch选项主要用于事件的派发,可异步。
这两者都能达到同样的效果,但是基于它们各自的特点使用场最会有一些区分，
computed拥有缓存属性，只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景.

watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行，

计算属性

抽象的概念不容易理解,用多了高频的场景自然就熟悉了,计算属性表现为同步处理数据.
-金融领域的分期付款,-P2P年化收益,带有计算性质的,都可以优先考虑computed.
不需要关注点击事件或者其他数据，只要将计算规则写在属性里,就能实时获取对应的数据.

电商领域的购物车统计, -个数据依赖于-个或者多个数据.

当购物车数量和产品变化时,自动计算出（价格cheng数量)的总和
如果有优惠券或者折扣,自动减去优惠和计算折扣金额即可,同上实时计算，
只要购买数量,购买价格,优惠券,折扣券等任意-个发生变化,总价都会自动跟踪变化.

侦听器

watch侦听器能做到的计算属性computed也能做到什么时候适合用侦听器呢?
主要适用于与事件和交互有关的场景,数据变化为条件,适用于-个数据同时触发多个事物.
如当借款额度大于可借额度时弹出toast提示,并将当前借款额度调整到最大额度,
可以看到,数据的变化为触发弹框提示,有且仅在- -定金额条件下才触发,而不是实时触发,

抽象概念

弹框提示等事件交互的，适用于watch,

    <div id="app">
        <input type="text" v-model="Amount">
    </div>
    <script>
        // 一个金额输入框, 监听金额数值大小, 达到条件时给出温馨提示
        export default {
            name: ' #app',
            data: {
                Amount: 100,
            },
            watch: {
                Amount: function (newVal, oldval) {
                    if (newva1 > 5000) {
                        alert("最大额度可借5000元")
                        this.Amount = 5000
                    }
                }
            }
        }
    </script>
复制代码

数据计算和字符处理的适用于computed

   {{fullName}}
    <script>
        //一个姓输入框,-一个名输入框,实时展示全名.

        export default {
            name: 'test',
            data: {
                firstNameI: 'da',
                lastName: ' shixiong',
            },
            computed: {
                fullName: function () {
                    return this.firstName + '' + this.lastName
                }
            }
        }
复制代码

watch侦听案例，

vue相关的js引入，请自己动手

<body>
    <div id="app">
        <p>
            你的问题是：
            <input type="text" v-model="question">
        </p>
    </div>
    <script src="https://juejin.cn/post/js/vue.min.js"></script>
    <!-- -因为AJAX库和通用工具的生态已经相当丰富，Vue核心代码没有重复 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://juejin.cn/post/dist/axios.min.js">
    </script>
    <script src="https://juejin.cn/post/lodash.min.js">
    </script>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                question: '',
                answer: 'sb，你不问，我怎么给回复'
            },
            watch: {
                question: function () {
                    // 防抖函数，_.debounce,封装的防抖函数
                    this.answer = '等你停止输入'
                    this.debounceGetAnswer()
                }
            },
            created: function () {
                this.debounceGetAnswer = _.debounce(this.getAnswer, 500)
            },
            methods: {
                getAnswer: function () {
                    if (this.question.indexOf('?') === -1) {
                        this.answer = 'sb，问问题都不带问好？？没得礼貌？？'
                        return
                    }
                    this.answer = '莫挨老子，老子在思考'
                    var that = this
                    axios.get('https://yesno.wtf/api').then(function (res) {
                        this.answer = _.capitalize(res.data.answer)
                    })
                }
            }
        })
    </script>

</body>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端