二、Vue3基础[计算属性、侦听器]

一、计算属性

解释：在之前的内容里面说到过，{{}}可以简单写一点表达式，计算属性就是用来专门用函数return 那个返回值

语法：写在computed里面类似methods的写法，使用时，直接用{{函数名}}

	  computed: {
	    okko() {
	      return this.a ? 1 : 2
	    }
	  }

好处：

• 模板中写太多逻辑，会使得臃肿而不好维护，计算属性便于维护
• 如果模板调用多次，需要写重复的代码多次，计算属性写一次便于重复调用

缺点：

• 计算属性默认是只读的（可以通过添加set进行修改）
• 其仅为计算和返回该值，不要在 getter 中做异步请求或者更改 DOM

注意：

• 计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 绑定的值不改变，无论多少次访问，都会立即返回先前的计算结果

选项式：

<template>
  <div>
    {{okko}}
    <button @click="ok">click</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: true,
    }
  },
  methods: {
    ok() {
      this.a = !this.a;
    }
  },
  computed: {
    okko() {
      return this.a ? 1 : 2
    }
  }
}
</script>
<style>

</style>

组合式：

<template>
  <div>
    <p>原始价格: {{ price }}</p>
    <p>计算后价格: {{ finalPrice }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    // 响应式引用
    const price = ref(100);
    
    // 计算属性，自动计算含税价格
    const finalPrice = computed(() => {
      // 假设税率是 20%
      return price.value * 1.20;
    });
    
    return {
      price,
      finalPrice
    };
  }
};
</script>

二、侦听器

解释：我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态，此时需要使用侦听器

语法：写在watch里面，直接操作内容，其中watch里面函数名称是被侦听的data变量名称

选项式：

    data() {
	  return {
      name:true,
      her:{
        first:'0',
        second:'1'
      }
	 }
	},
	//oldData,newData默认两个值表示变化前与变化后
    watch:{
      name(oldData,newData){
        console.log(oldData,newData)
      }
    }
    或者（此表示对象结构使用）
    watch:{
      'her.first'(oldData,newData){
        console.log(oldData,newData)
      }
    }

组合式：

<template>
  <div>
    <p>价格: {{ price }}</p>
    <input v-model="price" type="number" placeholder="Change price" />
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const price = ref(100);

    // 侦听 price 的变化
    watch(price, (newValue, oldValue) => {
      alert(`价格从 ${oldValue} 变更到 ${newValue}`);
    });
    
    return {
      price
    };
  }
};
</script>

注意：

• 侦听器只会默认进行浅层监听
• 侦听器只会默认创建侦听器时，不立即执行一遍回调

属性：

• 深度监听
  • 内容：
    • 选项式

        watch:{
          her:{
            handler(oldData,newData){
              console.log(oldData,newData)
            },
            deep:true
          }
        }
    

    • 组合式

    watch(items, (newVal, oldVal) => {
      console.log('数组或其内部元素变化', newVal);
    }, { deep: true });
    

  • 注意：深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。
• 立即执行

  • 内容：watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。

        watch:{
          her:{
            handler(oldData,newData){
              console.log(oldData,newData)
            },
            immediate: true,
          }
        }