vue基础_5.计算属性与监听属性

最新推荐文章于 2024-05-13 18:32:27 发布

前端小佩奇

最新推荐文章于 2024-05-13 18:32:27 发布

阅读量113

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_44761755/article/details/118884437

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.计算属性

关键字：computed

计算属性的值会缓存，只有当它所依赖的值发生改变时才会重新计算，所以它又属于响应式的。（在计算复杂逻辑时或数据更新时采用computed）

注意：
1.computed里属性是自定义的，不能与data里的属性重复
2. computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性

例：

<body>
    <div id="app">
        
        <div>count：{{count}}</div>
        <button @click="changeCount" >改变count</button>
        <div>resolut：{{resolut}}</div>
        
    </div>
      
    <script>
        var vm=new Vue({
           el:"#app",
           data:{
               count:2
           },
           computed:{
               resolut:function(){
                   return this.count*10;  //假如进行了复杂的运算，然后将值返回给resolut
               }
           },
           methods:{
               changeCount(){
                   this.count=4;
               }
           }
        
        })
    </script>
</body>

网页显示结果:
在这里插入图片描述
当改变count值后：

2.监听属性

关键字：watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动。（当需要在数据变化时执行异步或开销较大的操作时采用watch）

*注意：
1. watch里的属性名不是自定义的，是data里的或 computed计算出来的或 props组件传值里的
2. 监听又分为（浅度监听）与（深度监听）
浅度监听：数组，字符串
深度监听：对象，复杂数组。举例：

      watch:{
           person:{
              handler(val){
              ........
              },
              deep:true
           }
      }

例 : 1 . 浅度监听

<body>
    <div id="app">

    <div>{{msg}}</div>
    <button @click="getMsg">获取数据</button>
    </div>
      
    <script>
        var vm=new Vue({
           el:"#app",
           data:{
               msg:"我是前端小佩琪",  //浅度监听 字符串
               sign:"",    
               person:{        //深度监听对象
                   name:'前端小佩琪',
                   age:13,
               }
           },
           watch:{
               sign:function(){            //当sign的值改变时触发,并改变msg的值
                   this.msg="今天真高兴"; 
               },
               person:{
                   handler(value){
                        alert(value);
                   },
                   deep:true
               }
           },
           methods:{
                getMsg(){
                    //利用延迟函数，模拟从后台获取数据并产生异步操作
                    setTimeout(()=>{
                        this.sign="数据来了";  //注意this指向
                        this.person.age=14;
                    },3000);   
                },
           }
        })
    </script>
</body>

网页显示结果：
在这里插入图片描述
延迟获取数据后结果：

在这里插入图片描述

前端小佩奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础_5.计算属性与监听属性

1.计算属性关键字：computed计算属性的值会缓存，只有当它所依赖的值发生改变时才会重新计算，所以它又属于响应式的。（在计算复杂逻辑时或数据更新时采用computed）注意：1.computed里属性是自定义的，不能与data里的属性重复2. computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性例：<body> <div id="app"> <div>count：
复制链接

扫一扫

专栏目录