计算属性 —> computed

  • 不需要重新渲染整个模板
  • 效率比methods快
  • 定义: 要用的属性不存在,要通过已有属性计算得来
  • 原理: 底层借助了Object.defineproperty方法提供的getter和setter
  • get函数执行事件
    • 初次读取会执行一次
    • 当依赖的数据发生变化时会被再次调用
  • 优势:与methods实现相比,内部有缓存机制(复用),效率高,调试方便

  • 备注:

    • 计算属性最终会出现在vm上,直接读取使用
    • 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化
      1. //写法一 
      2. computed:{
      3.  fullName:{
      4.      //当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
      5.    //get什么时候调用1,初次读取fullName时,2,所依赖的数据更新后 
      6.    get(){
      7.         console.log("fullName调用了")
      8.         console.log(this)
      9.         return this.firstName+this.lastName
      10.        }
      11.   },
      12.     set(e){
      13.         console.log("fullName开始修改")
      14.         console.log(e)
      15.  }
      16. }
      17. 写法二
      18. computed:{
      19.  fullName(){
      20.      console.log("fullName调用了")
      21.      console.log(this)
      22.      return this.firstName+this.lastName
      23.    }
      24. }
      25. }

      监听

  • 当被监视的属性变化时,回调函数自动调用,进行相关操作

  • 监视的属性必须存在,才能进行监控
  • 监视的两种写法
    • new Vue时传入watch配置
    • 通过vm.$watch监视
  • Vue中的watch默认不监视对象内部值的变化(一层)
  • 使用watch时根据数据的具体结构,决定是否采用深度监视 deep
  1. //监视方法一
  2. watch:{
  3.       //isHot可以是data也可以是计算属性
  4.     isHot:{
  5.     //handler 当isHot被修改时
  6.     handler(newValue,oldValue){
  7.           console.log(newValue,oldValue)
  8.           console.log("isHot修改了")
  9.          },
  10.     immediate:true //初始化就执行handler 默认false
  11.     },
  12.     //简写
  13.     isHot(newValue,oldValue){
  14.         ....
  15.     }
  16. }
  17. 监视方法二
  18. vm.$watch('isHot',{
  19.         //isHot可以是data也可以是计算属性
  20.     isHot:{
  21.     //handler 当isHot被修改时
  22.     handler(newValue,oldValue){
  23.           console.log(newValue,oldValue)
  24.           console.log("isHot修改了")    
  25.          },
  26.     immediate:true //初始化就执行handler 默认false
  27. })
  28. //多级监听
  29. watch:{
  30.       'a.b':{
  31.       ....
  32.         }
  33. }
  34. //深度监听
  35. watch:{
  36.     isObject:{
  37.       deep:true //默认false
  38.         handler(){
  39.         ...    
  40.         }        
  41.   }    
  42. }

计算属性和监听

  • 计算属性中不能开启异步任务 —定时器等等
  • 监听可以
  • 定时器不是vue管理，而是js引擎管理
  • computed能完成的功能，watch都可以完成
  • watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
  • 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
  • 所有不被Vue所管理的函数(定时器的回调函数，ajax的回调函数等),最好写成箭头函数，这样this的指向才是vm或组件实例对象