vue中计算属性(computed)和监听属性(watch)的异步操作

香彩

已于 2023-03-17 14:36:27 修改

阅读量1.5w

点赞数 12

分类专栏： vue.js 前端开发文章标签： javascript 前端 vue.js

于 2022-05-06 11:19:08 首次发布

本文链接：https://blog.csdn.net/qq_64209130/article/details/124589032

版权

前端开发同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

vue.js

13 篇文章 0 订阅

订阅专栏

计算属性能(computed)完成的功能监听属性都能完成

比如计算两个数的和


<body>
    <div id="app">
        <p>总和{{adden}}</p>
        输入的值1<input type="text" v-model:value="a" >
        输入的值2<input type="text" v-model:value="b">
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a:"",
                b:"",
                adden:"",
            },
            //监听属性实现
            watch:{
               a(val){
                   this.adden=this.b*1+val*1
               },
               b(val){
                   this.adden=this.a*1+val*1
               }
            },
            // 计算属性实现
            // computed: {
            //  adden(){
            //      console.log(this);
            //     return this.a*1+this.b*1
                   
            //  }
            // },
        })
    </script>
</body>

计算属性(computed)不能进行异步操作

因为计算属性(computed)是通过return返回值传递参数异步操作的时候return是没有意义的

以定时器(setTimeout)举例

很明显58行打印的并不是setTimeout中return的值,而是对应的setTimtout()的 ID

详情可以看

setTimeout（） - 简书 (jianshu.com)https://www.jianshu.com/p/9b389c99d97b异步函数的返回值都不是用return返回的

所以vue中的计算属性(computed)不能使用异步函数

如果想让两个数的和隔一秒在出现计算函数是不行的


<body>
    <div id="app">
        <p>总和{{adden}}</p>
        输入的值1<input type="text" v-model:value="a" >
        输入的值2<input type="text" v-model:value="b">
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a:"",
                b:"",
                // adden:"",
            },
            //监听属性
            // watch:{
            //    a(val){
            //        this.adden=this.b*1+val*1
            //    },
            //    b(val){
            //        this.adden=this.a*1+val*1
            //    }
            // },
<**  这是错误的 **>
            computed: {
             adden(){
                 console.log(this);
                return setTimeout(()=>{
                     console.log(this.a);
                     return this.a*1 + this.b*1
                 },1000)
                   
             }
            },
        })
    </script>
</body>

此时adden返回的是setTimeout的Id

监听属性(watch)

当被监听的属性变化时会自动调用预定义函数

watch可以进行异步操作

<body>
    <div id="app">
        <p>总和{{adden}}</p>
        输入的值1<input type="text" v-model:value="a" >
        输入的值2<input type="text" v-model:value="b">
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a:"",
                b:"",
                adden:0,
            },
            //监听属性
            watch:{
               a(val){
                   setTimeout(()=>{
                       this.adden=this.b*1+val*1
                   },1000)
                   
               },
               b(val){
                   this.adden=this.a*1+val*1
               }
            },
            // computed: {
            //  adden(){
            //      console.log(this);
            //     return setTimeout(()=>{
            //          console.log(this.a);
            //          return this.a*1 + this.b*1
            //      },1000)
                   
            //  }
            // },
        })
    </script>
</body>

以定时器为例

所有不被vue管理的函数(定时器的回调,ajax的回调函数等)最好写成箭头函数这样this的指向才是vm或者组件实例对象,被vue管理的函数最好不要使用箭头函数,this会指向为被定义(箭头函数绑定的是父级作用域的上下文)

深入了解可以看

【ES6】箭头函数this指向问题【看这一篇就够啦！】_Milk595的博客-CSDN博客_箭头函数this指向

在methods中也可以进行异步操作但是 methods中配置的都是函数需要自己调用

当你需要监听数据的时候就需要 computed 和 watch 当需要进行异步操作还要监听数据的时候就可以使用watch

具体的使用情况可以看

计算属性（computed）和监听器（watch）的区别_长沙黑马程序员前端与移动开发学科的博客-CSDN博客_监听属性和计算属性的区别

香彩

关注

12
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
vue中计算属性(computed)和监听属性(watch)的异步操作

计算属性能(computed)完成的功能监听属性都能完成比如计算两个数的和<body> <div id="app"> <p>总和{{adden}}</p> 输入的值1<input type="text" v-model:value="a" > 输入的值2<input type="text" v-model:value="b"> </div>
复制链接

扫一扫