【vue3.0学习】计算属性 侦听器

computed函数，是用来定义计算属性的，计算属性不能修改。

<template>
  <div id="app">
    <div>小李今年:{{ age }}岁</div>
    <br />
    <div>小李明年:{{ newAge }}岁</div>
  </div>
</template>

<script>
import { computed, ref } from "vue";
export default {
  name: "App",
  setup() {
    const age = ref(20);
    const newAge = computed(() => {
      return age.value + 2;
    });
    return {age,newAge}
  },
};
</script>

<style>
</style>

高级用法

<template>
  <div id="app">
    <div>小李今年:{{ age }}岁</div>
    <br />
    <div>小李明年:{{ newAge }}岁</div>
  </div>
</template>

<script>
import { computed, ref } from "vue";
export default {
  name: "App",
  setup() {
    const age = ref(20);
    // const newAge = computed(() => {
    //   return age.value + 2;
    // });
    const newAge = computed({
      // get函数，获取计算属性的值
      get() {
        return age.value + 2;
      },
      // set函数，当你给计算属性设置值的时候触发
      set(val) {
        age.value = value - 2;
      },
    });
    return { age, newAge };
  },
};
</script>

<style>
</style>

总结
给computed传入函数，返回值就是计算属性的值

给computed传入对象，get获取计算属性的值，set监听计算属性改变。

watch 侦听器

作用：

• 监听ref定义的响应式数据
• 监听多个响应式数据数据
• 监听reactive定义的响应式数据
• 监听reactive定义的响应式数据，某一个属性
• 深度监听
• 默认执行

<template>
  <div class="container">
    <div>
      <p>{{ obj.brand.name }}</p>
      <button @click="updateBrandName">改品牌名字</button>
    </div>
  </div>
</template>
<script>
import { reactive, ref, watch } from "vue";
export default {
  name: "App",
  setup() {
    const count = ref(0);
    const add = () => {
      count.value++;
    };
    // 当你需要监听数据的变化就可以使用watch
    // 1. 监听一个ref数据
    // 1.1 第一个参数  需要监听的目标
    // 1.2 第二个参数  改变后触发的函数
    const obj = reactive({
      brand: {
        id: 1,
        name: "宝马",
      },
    });
    const updateBrandName = () => {
      obj.brand.name = "奔驰";
    };
    // 2. 监听一个reactive数据
    watch(obj, () => {
      console.log("数据改变了");
    });

    watch(
      () => obj.brand,
      () => {
        console.log("brand数据改变了");
      },
      {
        // 5. 需要深度监听
        deep: true,
        // 6. 想默认触发
        immediate: true,
      }
    );

    return { obj, updateBrandName };
  },
};
</script>```