Vue3笔记 - 计算函数与监视

7.计算属性与监视

1.computed函数

• 与Vue2.x中computed配置功能一致

• 写法

  import {computed} from 'vue'
  
  setup(){
      ...
  	//计算属性——简写
      let fullName = computed(()=>{
          return person.firstName + '-' + person.lastName
      })
      //计算属性——完整
      let fullName = computed({
          get(){
              return person.firstName + '-' + person.lastName
          },
          set(value){
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
          }
      })
  }
  

<template>
  姓： <input v-model="person.firstName" />
  <br />
  名：<input v-model="person.lastName" />
  <br />
  全名：<span>{{ person.fullName }}</span>
  <br />
  全名：<span>{{ fullName }}</span>
  <br />
  全名：<input v-model="person.fullName" />
</template> 

<script>
import { reactive, computed } from "vue";
export default {
  name: "App",
  components: {},
  // computed: {
  //   fullName() {
  //     return this.person.firstName + "-" + this.person.lastName;
  //   },
  // },
  setup() {
    let person = reactive({
      firstName: "张",
      lastName: "三",
    });

    // 计算属性-简写（没有考虑计算属性的修改形式）
    person.fullName = computed(() => {
      return person.firstName + "-" + person.lastName;
    });

    // 计算属性-完整写法（考虑计算属性的读写）
    // person.fullName = computed({
    //   get() {
    //     return person.firstName + "-" + person.lastName;
    //   },
    //   set(value) {
    //     const arr = value.split("-");
    //     person.firstName = arr[0];
    //     person.lastName = arr[1];
    //   },
    // });

    return {
      person,
    };
  },
};
</script>

2.watch函数

• 与Vue2.x中watch配置功能一致

• 两个小“坑”：

  • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
  • 监视reactive定义的响应式数据中某个属性时：deep配置有效

<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr />
  <h2>当前求和为：{{ msg }}</h2>
  <button @click="msg += '!'">{{ msg }}</button>
</template> 

<script>
import { reactive, ref, watch } from "vue";
export default {
  name: "App",
  components: {},
  // watch: {
  //   sum(newValue, oldValue) {
  //     console.log("sum变了", newValue, oldValue);
  //   },
  // },
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");

    // 情况一：监视ref所定义的一个响应式数据
    watch(
      sum,
      (newValue, oldValue) => {
        console.log("sum变了", newValue, oldValue);
      },
      {
        immediate: true,
      }
    );

    // 情况二：监视ref所定义的多个响应式数据
    // watch([sum, msg], (newValue, oldValue) => {
    //   console.log(`sum或msg改变了`, newValue, oldValue);
    // });
    return {
      sum,
      msg,
    };
  },
};
</script>