计算属性computed和属性检测watch

最新推荐文章于 2024-11-14 09:00:00 发布

原创最新推荐文章于 2024-11-14 09:00:00 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨Vue.js中计算属性(computed)与属性检测(watch)的使用场景与区别。计算属性适用于基于响应式依赖的筛选操作，而属性检测则适合在数据变化时执行异步或开销较大的任务。

计算属性和属性检测

计算属性: 是一个函数,所依赖的元数据变化时，会再次执行，平时会缓存，是响应式的，需要在模板中渲染才可调用

  computed:{
    计算属性: function(){return 返回值}		使用:	{{计算属性}}
  }

  与methods的区别:	方法会每次调用，计算属性不会，默认只调用一次
    计算属性的性能高: 适合做筛选，基于它们的响应式依赖进行缓存的（因为筛选功能就是随着数据的变化而会变化）
    方法：适合在列表渲染使用，强制渲染执行

  <div id="app">

    <div>倒转{{ str.split(' ').reverse().join(' ') }}</div>
    <!-- <div>倒转{{ cptStr }}</div> -->

    <hr>

  </div>

  <script>

    let vm = new Vue({
      el: '#app',
      data: {
        str:'i love you',
        num:110,
        bl:true,
        url:'/images/logo.png'
      },
      computed:{
        // 计算属性名:fn
        // cptStr:function(){
        cptStr(){
          console.log('计算属性运行了');
          //计算业务
          return this.str.split(' ').reverse().join(' ')
        }
      }
    })

  </script>

属性检测|数据观测： 需要在数据变化时执行异步或开销较大的操作时

  watch:{
    数据名:'methods函数名'    数据名==data的数据
    数据名:函数体(new,old)
    数据名:{
      handler:fn(new,old),
      deep: true 深度检测  默认 false
      immediate: true 首次运行  默认false
    }
  }

  <div id="app">

    <!-- /{{cptStr}}/ -->
    <br>
    {{str}}

  </div>

  <script>

    let vm = new Vue({
      
      el: '#app',
      
      data: {
        str:'i love you',
        json:{a:1,b:2}
      },
      
      methods:{
        fn(current,prev){
          console.log('数据观测触发的方法',current,prev);
          // console.log('this 默认全部指向',this);
        }
      },
      
      computed:{
        cptStr(){
          this.str;
          // this.json;
          // console.log('this 默认全部指向 vm',this)
          console.log('计算属性')
          setTimeout(()=>this.str+1,1000)
        }
      },
      
      watch:{
        str(current,prev){
          console.log('数据观测运行',current,prev);
          setTimeout(()=>this.str+=100,2000)
        }
        // json:'fn'
        // str:{
        /* json:{
          handler(current,prev){
            console.log('数据观测运行',current,prev);
          },
          immediate:true,//首次运行,默认false
          deep:true//深度观测，默认false
        } */
      }
      
    })

  </script>

计算属性 vs 属性检测

 计算属性computed: 	首次运行
    				调用时需要在模板中渲染，修改计算所依赖元数据	
    				默认深度依赖		
    				适合做筛选，不可异步
    				
 属性检测watch: 		首次不运行		
 					调用时只需修改元数据								
 					默认浅度观测		
 					适合做执行异步或开销较大的操作