40 侦听器和计算属性的比较及不同应用场景（面试重点）

最新推荐文章于 2022-12-09 21:42:30 发布

weixin_50464014

最新推荐文章于 2022-12-09 21:42:30 发布

阅读量155

点赞数

分类专栏： javascript 文章标签： vue.js 面试 javascript

本文链接：https://blog.csdn.net/weixin_50464014/article/details/120687106

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

特点和区别

vue的computed选项主要用于同步对数据的处理，而watch选项主要用于事件的派发，可异步

这两者都能达到同样的效果，但是基于它们各自的特点，使用场景会有一些区分

computed拥有缓存属性，只有当依赖的数据发生变化时，关联的数据才会变化，适用于计算或者格式化数据的场景

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

计算属性

计算属性表现为同步处理数据

金融领域的分期付款，P2P年化收益，带有计算性质的，都可以优先考虑computed

不需要关注点击事件或者其他数据，只要将计算规则写在属性里，就能实时获取对应的数据

例如：

借款金额 6000//输入

分期期数 3期//输入

每期应还 2000.00元//自动计算

电商领域的购物车统计，一个数据依赖于一个或多个数据

- 当购物车数量和产品变化时，自动计算出价格*数量的总和

- 如果有优惠券或者折扣，自动减去优惠和计算折扣金额即可，同上实时计算

- 只要购买数量，购买价格，优惠券，折扣券等任意一个发生变化，总价都会自动跟踪变化

侦听器

- 主要适用于与事件和交互有关的场景，数据变化为条件，适用于一个数据同时触发多个事件

- 如当借款额度大于可借额度时，弹出toast提示，并将当前借款额度调整到最大额度

- 可以看到，数据的变化为触发弹窗提示，有且仅在一定金额条件下才触发，而不是实时触发

watch的例子

export default{
    name:'test',
    data:{
        Amount:100
    },
    watch:{
        Amount:function(newVal,oldVal){
            if(newVal>5000){
                alert('最大额度可借5000元')
                //此时还可以把提交按钮置灰
                this.Amount=5000
            }
        }
    }
}

侦听器的应用

<body>
    <div id="app">
        <p>
            你问的问题是：
            <input type="text" v-model="question">
        </p>
        <p>{{answer}}</p>
    </div>
//引入AJAX库等等，这儿不再写
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                question:'',
                answer:'在你没有提出问题之前，我是无法给你回复的'
            },
            methods:{
                getAnswer:function(){
                    if(this.question.indexOf('?')===-1){
                        this.answer='问题没有问号怎么问别人呢'
                        return
                    }
                    this.answer='我正在思考中,请稍后...'
                    var that=this
                    axios.get('https://yesno.wtf/api').then(function(res){
                        that.answer=_.capitalize(res.response.data.answer)
                    })
                }
            }
            watch:{
                question:function(){
                    //防抖处理
                    //_.debounce就是防抖的封装
                    this.answer='等待你停止输入'
                    this.debounceGetAnswer()
                }
            },
            created:function(){
                this.debounceGetAnswer=_.debounce(this.getAnswer,500)
            }
        })
    </script>
</body>

weixin_50464014

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
40 侦听器和计算属性的比较及不同应用场景（面试重点）

特点和区别vue的computed选项主要用于同步对数据的处理，而watch选项主要用于事件的派发，可异步这两者都能达到同样的效果，但是基于它们各自的特点，使用场景会有一些区分computed拥有缓存属性，只有当依赖的数据发生变化时，关联的数据才会变化，适用于计算或者格式化数据的场景watch监听数据，有关联但没有依赖，只要某个数据发生变化。就可以处理一些数据或者派发事件并同步/异步执行计算属性计算属性表现为同步处理数据金融领域的分期付款，P2P年化收益，带有计算性质的，都可以.
复制链接

扫一扫