监听器和计算属性

监听器：

作用：

监听vue实例上的数据变化

怎么用

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

监听路由的变化

new Vue({
  watch:{
    $route(变化后的值,变化之前的值){
      // 路由一发生改变就会执行这里的方法
    }
  }

})

• 可以更改标题，根据不同的路由显示不同的标题
• 解决bug，当我们路由参数变化的时候，界面不会重新初始化的bug

 

监听对象

默认监听的是对象的引用

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

1. 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
      }
    }
  }
})

总结：

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

计算属性、函数和监听器

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