zoukankan      html  css  js  c++  java
  • 监听事件,计算函数

    监听器和计算属性

    监听器:

    作用:

    监听vue实例上的数据变化

     

    怎么用

    new Vue({
        watch:{
        要监听的变量(变化后的值,变化之前的值){
            // 监听的变量一发生改变就会执行这里的方法
        }
      }
    
    })

     

     

    监听路由的变化

    new Vue({
        watch:{
        $route(变化后的值,变化之前的值){
            // 路由一发生改变就会执行这里的方法
        }
      }
    
    })
    • 可以更改标题,根据不同的路由显示不同的标题
    • 解决bug,当我们路由参数变化的时候,界面不会重新初始化的bug

     

    监听对象

    默认监听的是对象的引用

    当对象属性变化的时候,没有检测到对象的变化,如何解决

    1. 对对象进行深拷贝
    2. 监听对象的属性的变化
    3. 开启深度监听
    new Vue({
        watch:{
        // 监听对象的属性的变化
        "obj.name"(变化后的值,变化之前的值){
            // 对象name一发生改变就会执行这里的方法
        },
        //深度监听
        obj:{
            handler(){
            对象一发生改变就会执行这里的方法
          },
          deep:true
        }
      }
    
    })

     

     

    计算属性

    当某个属性的值,是依赖于别的属性生成,这个属性就可以设置为计算属性。

     

    怎么声明:

    new Vue({
        computed:{
        // 声明的时候,声名成了函数的形式
        fullName(){
          // 当他依赖的属性变化的时候,会重新计算
            return 返回值就是计算的属性的值
        }
      }
    })

    用的时候当做普通的属性使用即可

     

    计算属性的赋值

    计算属性绝大多数是不需要的赋值的

    new Vue({
        computed:{
        // 声明的时候,声名成了函数的形式
        fullName:{
          get(){
            // 获取数据的时候会执行get
            return       },
          set(value){
            // 设置数据的时候会执行set
          }
        }
      }
    })

     

     

    总结:

    • 他是依赖于其他属性的,是其它属性的一个派生。
    • 声明的时候声明成函数的,但是使用的时候当做属性使用的
    • 计算属性会缓存,只有它依赖的属性变化的时候才会重新计算

     

     

     

     

    计算属性、函数和监听器

    • 计算属性: 本质上是一个属性,它别的属性的一个派生。 计算属性会进行缓存,只有它依赖的属性发生的时候才会重新计算(不能写异步操作的)
    • 函数: 一般是写业务逻辑的地方
    • 监听器: 当我们需要在某写属性变化的时候做一些业务处理的时候,需要用到监听器。(可以添加异步操作)

     

  • 相关阅读:
    Java异常的分类
    Java SE 6 新特性: Java DB 和 JDBC 4.0
    Java SE 6 新特性: 对脚本语言的支持
    面向对象开发方法优点
    RocketMQ之八:水平扩展及负载均衡详解
    Bluetooth 4.0之Android 解说
    iOS截取视频缩略图的两种方法
    Java NIO Buffer
    spark 启动job的流程分析
    C语言堆内存管理上出现的问题,内存泄露,野指针使用,非法释放指针
  • 原文地址:https://www.cnblogs.com/wenaq/p/13663876.html
Copyright © 2011-2022 走看看