watchEffect变化响应函数

watchEffect 是vue3中新增的一个函数，他的作用是：在这个函数内的变量，一旦值发生变化，该函数就会运行，前提是这个值是要被动态代理过的。

具体使用方法如下：

父组件

<template>
    <user-list :users="users"/>
</template>
<script lang="ts" setup>
import UserList from '@/components/user/List.vue';
import { ref } from 'vue';
//声明users，并转为动态代理模式
let users = ref([]);
function init() {
   list User().then(res => {
       //异步获取用户列表
       users.value = res.data;
   })
}
init();
</script>

子组件

<template>
   <ul>
       <li v-for="item in users">{{item.name}}</li>
   </ul>
</template>
<script lang="ts" setup>
import { ref,defineProps } from 'vue';

const props = defineProps({
  users: Array,
})

let users = ref([]);
//关键
watchEffect(() => {
  users.value = props.users || [];
})

</script>