1.Vue计算属性-computed

• 数据可以进行逻辑处理
• 对计算属性中的数据进行监视
• 依赖固定的数据类型 语法

  computed: {
      "计算属性名" () {
          return "值"
      }
  }

<template>
  <div>
    <p>{{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a:10,
      b:20
    };
  },
  computed:{
    sum(){
      return this.a+this.b
    }
  }
};
</script>

注意:

• 计算属性也是vue变量,所以不能和data里面的变量重名
• 函数内变量变化, 会自动重新计算结果返回 计算属性和函数区别: 计算属性和函数都能达到相同的效果,但是计算属性有个缓存的效果,只要值还没有发生改变，多次访问 计算属性会立即返回之前的计算结果，不会再次执行函数。只要计算属性的值发生改变才会再次执行计算属性,函数是每调用一次都会执行一次

2.计算属性的 Setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

函数名:{
        get() {},
        set() {}
    }

• 函数是需要调用才会被执行:
  • get () 函数使用计算属性时 get函数就会被调用
  • set () 函数给计算属性赋值时 set函数就会被调用

<template>
    <div>
        <input type="text" v-model="uname">
    </div>
</template>

<script>
export default {
    computed:{
        uname:{
           get(){
                 return 'admin'
           },
           set(value){
               console.log(value);
           }
        }
    }
};
</script>

3.侦听器-普通箭头

语法:

watch: {
	"被侦听的属性名" (newVal, oldVal){
	
    }
}

<template>
    <div>
        <input type="text" v-model="uname">
    </div>
</template>

<script>
export default {
    data() {
        return {
            uname:'admin'
        };
    },
    watch:{
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
     }
    }
};
</script>

4.侦听器-深度侦听

语法: watch: {

    "要侦听的属性名": {
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

<template>
    <div>
        <input type="text" v-model="obj.uname">
    </div>
</template>

<script>
export default {
    data() {
        return {
         obj:{
                uname:'admin'
         }
        };
    },
    watch:{
     obj:{
         deep:true,
         handler(newVal){
             console.log(newVal.uname);
         }
     }
    }
};
</script>