首页 > 其他分享 >watch 和 computed

watch 和 computed

时间:2022-11-22 11:55:09浏览次数:20  
标签:异步 缓存 false computed watch 监听

 1. computed 的特点和用法

   特点:

    (1)支持缓存:默认走缓存,多次调用,只会执行一次计算。只有依赖的数据发生改变,才会重新计算;

    (2)不支持异步,如果有异步操作,无法监听

    (3)属性值为函数,默认使用get方法,当数据改变时,会调用set方法

    (4)主要解决模版中放入过多的逻辑导致不好维护的问题

  computed: {
    crontabValueString: function() {
      console.log(555) // 多次调用,只会执行一次
      let str = this.queryParams.memberName
      return str;
    },
  },

 

2. watch 的特点和用法

   特点:

    (1)不支持缓存:只要数据发生变化,就会触发相应的操作;

    (2)支持异步监听

    (3)接收两个参数,第一个是最新值,第二个是之前的值

    (4)监听 data 或者 props 的数据,发生变化时会触发操作,还有两个其他参数:

      deep:默认false,深度监听,发现数据内部变化,在复杂的数据内部使用,默认false无法监听到数组和对象内部的变化,为true时,能监听数据变化,但是参数新值和旧值都是新值

      immediate:默认false,初始化时执行回调函数

  watch: {
    'queryParams.memberName': { // 监听的数据字段
      handler: (n,o) => { // 数据改变调用的事件
        console.log('-----')
        console.log('n::::',n)
        console.log('o::::',o)
      },
      deep: false, // 深度监听
      immediate: false // 初始化立即执行
    }
  }

 

3. 区别总结

  computed计算属性,他依赖其他属性值,有缓存,只有依赖的值发生变化才会去重新计算,但是不能异步

  watch监听,监听数据的变化,无缓存,数据变化就会执行回调,可以异步,默认false无法监听到数组和对象内部的变化,为true时,能监听数据变化,但是参数新值和旧值都是新值

 

标签:异步,缓存,false,computed,watch,监听
From: https://www.cnblogs.com/liql/p/16914454.html

相关文章

  • vue2 计算属性9 watch immediate
    watch:监听数据发生的变化 newVal是变化后的新值,oldVal是变化前的旧值 一般都是带着接口查询的watch:{username(newVal){if(newVal==='')return$get('https:......
  • Vue3笔记 - Vue3中的计算属性、监视属性和watchEffect函数
    计算属性与监视属性目录计算属性与监视属性1.计算属性2.监视属性3.watchEffect函数1.计算属性Vue3中的计算属性仅在书写方式上与Vue2略有不同,功能上基本一致Vue2......
  • ue3中的watch的用法
    watch函数收三个参数:需要进行监听的数据的数组,监听的数据发生改变时的回调配置项一、监听基础类型二、监听复杂类型复杂类型的监听有很多种情况,具体的内容如......
  • 使用Stopwatch统计程序执行时间
    编程时,常常需要统计某段程序执行的时长,可以使用以下方法:Stopwatchsw=Stopwatch.StartNew();sw.Start();//需要执行的程序片段sw.Stop();Console.WriteLine("运行时......
  • Vue笔记 - 计算属性(computed)和监视属性(watch)
    计算属性和监视属性目录计算属性和监视属性1.计算属性2.监视属性2.1深度监视3.computed和watch对比1.计算属性定义:使用的属性起初并不存在,要通过已有属性计算得......
  • vue3 基础-API-computed
    API-computed基本使用前些章节讲了一些常用的api如setup,ref,reactive,toRef...等,并以一个todoList的小案例来体现在vue3中如何进行......
  • vue3 基础-API-watch 和 watchEffect
    watch和watchEffect前篇对computed属性如何在api中基本使用,即从vue中引入,然后通过直接传函数或者传对象的方式,开箱即用,非常清晰易......
  • 如何使用C# Stopwatch 测量微秒级精确度
    跟同事讨论到-用C#Stopwatch取得效能数值,Stopwatch.ElapsedMilliseconds只到毫秒(ms),如果需要更高的时间精确度(微秒μs,甚至奈秒ns),该怎么做?原以为要费番功夫,在Stacko......
  • CodeForces - 372C Watching Fireworks is Fun
    题意:有n个点,其中m个要放烟花。每个放烟花的点有属性b[i],放的时间t[i]和位置a[i]。假设放烟花的时候你在位置x,那么可以获得快乐b[i]-|x-a[i]|。你走来走去地看烟花,起始位置......
  • Vue 中 watch 监听器与 computed 计算属性的使用
    一、watch:监视单个属性,可做简单监视和深度监视。根据数据的具体结构,决定是否采用深度监视。配置deep:true可以监测对象内部值的改变,做深度监视时使用。1、简单监视:监视单......