Vue3常用笔记

• ref reactive toRef toRefs

<script setup>
import { ref, reactive, toRef, toRefs} from "vue";

// 将简单数据定义为响应式
const count = ref(0);

// 将引用数据（对象）定义为响应式
const obj = reactive({
  name: "lidysun",
  age: 32,
  contact:{
    wx:'820262236',
    email:'820262236@qq.com'
  }
});

// 将对象内某个键单独定义为响应式
const name1 = toRef(obj,'name')

// 解耦原reactive对象所有键，并将每个键都设置为ref响应式
const {name,age,contact} = toRefs(obj)

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 计算属性computed

import { computed } from "vue";

const text = computed(() => {
  return count.value % 2 == 0 ? "偶数" : "奇数";
});
const text = computed({
  get() {
    return count.value % 2 == 0 ? "偶数" : "奇数";
  },
  set() {},
});
1
2
3
4
5
6
7
8
9
10
11

3. 监听器watch

import { watch } from "vue";

watch(
  count,
  newCount => {
    obj.age = age.value + newCount;
  },
  { immediate: true }
);

watch([() => obj.age, text], (newVal, oldVal) => {
  // 返回的newVal,oldVal是数组
  console.log("newVal", newVal, ";", "oldVal", oldVal);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15