1、ref
const test = ref<number>(8)2、reactive
const testObj = reactive({
test001: '',
test002: ''
})3、props & defineEmits
defineProps({
icon: String,
});
const emit = defineEmits(['change', 'update:value', 'format-error']);
emit('update:value', v);4、watch
// 当count改变时触发
watch(count, (val, oldVal) => {
console.log(val, oldVal);
});
5、watchEffect
setup() {
const count = ref(0);
watchEffect(() => {
console.log(count.value); // 初始化时会执行一次
});
setTimeout(() => {
count.value += 1; // 值变化时又执行了一次
}, 1000);
}区别：
watchEffect会自动的收集依赖，而watch是明确的指定监听某个变量
watch可以获取到新值和旧值，watchEffect则只能取到最新的
watchEffect会在初始化的时候执行一次，类似computed
6、computed
const sayHello = computed(() => {
console.log('computed', count.value);
return `我是${name.value},${count.value}岁`;
});computed和watchEffect相同的地方是会自动收集依赖，在值更新时会触发回调，会初始化调用一次。
但是在触发初始化的时机是不一样的，如果computed的值没有被使用，是不会触发回调的，只有在该值被使用的时候才会触发回调，但watchEffect是在setup的时候就会初始化。
7、toRef & toRefs
<template>
<h2>姓名：{
{name}}</h2>
<h2>年龄：{
{age}}</h2>
<h2>地址：{
{addr.province}}-{
{addr.city}}</h2>
<button @click="name='zhangsan'">修改名字</button>
</template>
<script lang='ts'>
import { reactive, toRefs } from 'vue'
export default {
setup() {
const user = reactive<any>({
name: '张三',
age: 19,
addr: {
province: '河南',
city: '郑州'
}
})
return {
name: toRef(obj,"name"),
...toRefs(user)
}
}
}
</script>将响应式对象中的所有属性转换为单独的响应式数据，对象成为普通对象toRefs是toRef的批量操作