vue3+vite搭建项目（八）

上一节说了vue3怎么赋值
这一节说vue3如何使用计算属性和监听数据变化

一，首先计算属性，在之前讲vuex里面我们也用到了计算属性，使用场景：要用的值是要经过计算再赋值的（比如在vuex里面取值，比如在得到后端数据的值不能直接用需要经过计算或者转换格式的，比如要对已经声明的变量有一些改动的）这里不再一一举例，vue2怎么用在vue3依旧可以用，还是在上一节讲的组件中增加一些代码：

//views/variable
<script setup>
import { reactive, ref, toRefs, computed } from "vue";

let num = ref(0);
let msg = ref("我是信息");
let person = reactive({
  name: "little-fanta",
  age: 18,
  gender: "女",
});
const { name, age, gender } = toRefs(person);

const addNum = () => {
  num.value++;
};

const addMsg = () => {
  msg.value = msg.value + "!";
};

const changePerson = () => {
  person.name += "~";
  person.age++;
  age.value++;
};

const firstName = ref("hello");
const lastName = ref("world");
const fullName = computed(() => firstName.value + "------" + lastName.value);
</script>

<template>
  <h2>{{ num }}</h2>
  <button @click="addNum">num+1</button>
  <hr />

  <h2>{{ msg }}</h2>
  <button @click="addMsg">msg+!</button>
  <hr />

  <h4>{{ person }}</h4>
  <button @click="changePerson">改变person信息</button>
  <h5>{{ name }},{{ age }}</h5>
  <hr />

  <h2>{{ fullName }}</h2>
</template>

<style></style>

页面效果：

二，一般我们会把监听watch在computed之后讲，因为计算属性是对变量进行计算然后在页面中显示的（必须要有返回值，注重计算后的值），那么watch是监听变量改变并且及时更新页面数据的（不需要有返回值，注重数据更新的过程）
watch的两个属性，和vue2一样

immdiate: 默认情况下，侦听器需要 data 后面值改变了才会生效，若需要侦听器一进入页面就生效，那就需要使用 immediate。
deep: 默认情况下，侦听器只会监听数据本身的改变，若要进行深度监听，那就需要使用 deep。

<script setup>
import { reactive, ref, toRefs, computed, watch, onMounted } from "vue";

let num = ref(0);
let msg = ref("我是信息");
let person = reactive({
  name: "little-fanta",
  age: 18,
  gender: "女",
});
const { name, age, gender } = toRefs(person);

const addNum = () => {
  num.value++;
};

const addMsg = () => {
  msg.value = msg.value + "!";
};

const changePerson = () => {
  person.name += "~";
  person.age++;
  age.value++;
};

const firstName = ref("hello");
const lastName = ref("world");
const fullName = computed(() => firstName.value + "------" + lastName.value);

let num1 = ref(0);
let num2 = ref(10);
const num3 = computed(() => num1.value + "------" + num2.value);

onMounted(() => {
  setTimeout(() => {
    num1.value = num1.value + 20;
    num2.value = num2.value + 20;
  }, 2000);
});

//监听一个值
//watch(要监听的值,(新值,旧值)=>{......})
//监听对象数据时，第一个参数需要是函数
// watch(()=>person.name, (newValue, oldValue) => {
//   console.log(newValue, oldValue);
// });
watch(
  num1,
  (newValue, oldValue) => {
    console.log("num1", newValue, oldValue);
  },
  { immediate: false }
);

//监听多个值
//watch([监听值1，监听值2,...],([值1-新值，值2-新值,...],[值1-旧值,值2-旧值,...])=>{})
// watch(
//   [() => person.name, () => person.age],
//   ([newValue1, newValue2], [oldValue1, oldValue2]) => {
//     console.log(newValue1, oldValue1);
//     console.log(newValue2, oldValue2);
//   }
// );
watch([num1, num2], ([newValue1, newValue2], [oldValue1, oldValue2]) => {
  console.log("num1", newValue1, oldValue1);
  console.log("num2", newValue2, oldValue2);
});
</script>

<template>
  <h2>{{ num }}</h2>
  <button @click="addNum">num+1</button>
  <hr />

  <h2>{{ msg }}</h2>
  <button @click="addMsg">msg+!</button>
  <hr />

  <h4>{{ person }}</h4>
  <button @click="changePerson">改变person信息</button>
  <h5>{{ name }},{{ age }}</h5>
  <hr />

  <h2>{{ fullName }}</h2>
</template>

<style></style>

打印台：