Vue04/计算属性完整写法 get() set( )、Vue侦听器 watch

一. 计算属性完整写法

语法:

computed: {
  自定义计算属性名: {
    get() { return 结果 },
    set(val) {}
  }
}

1. 如果要访问计算属性 会自动执行get

2. 如果要修改计算属性 会自动执行set

说明:

• get函数就等同于简单写法的函数 计算属性必须要有 get 而且需要返回结果

• set方法第一个参数 可以监听用户输入 新值 与 旧值 

注意:

1.  修改计算属性时需要用完整写法

2. 修改时会自动执行get函数

3. 获取数据时会自动化执行get函数

二.Vue侦听器

普通侦听器

语法: 

watch: {
  data属性名(newVal,oldVal) {}
}

作用: 侦听data中某一个数据的变化

注意: 只能侦听值类型

说明: 默认情况下 watch 只能监听到简单类型的数据变化 如果侦听的是复杂类型 只会侦听地址是都发生变化 不会侦听对象内部属性的变化

深度侦听器

语法:

watch:{
     data属性名:{
         deep:true,

        immediate: true
         handler(newVal,oldVal){
      
         }
     }
   }

注意: 可以侦听引用类型

属性说明:

handler        数据发生变化 需要执行的处理程序

deep             如果是true 代表深度侦听 不仅会侦听地址的变化 ， 还会在侦听对象内部的属性变化

immediate   立即 立刻是否立即侦听 默认是false 如果是 true 代表页面一加载 会先执行一次处理程序