Vue setup 组合式 API ​

import {ref,onMounted,watch,toRefs,computed} from 'vue'
setup(props) {

 console.log(props); // 父传子接收的参数

 let { user } = toRefs(props); // 创建对 user 的响应式引用
 let arr = ref([]); // 创建响应式引
 let getArr = async () => {  // 异步调用 api
  arr.value = await Promise.resolve([user.value.name,Math.random() + '','asdf','qwesax','ervhf','dfdaw']);
 }

 onMounted(getArr); // 在mounted时期调用此方
 watch(user,getArr); // 当user变化调用方法
 let search = ref(''); // 创建响应式引用
 let arrSearch = computed(() =>// 计算属性 过滤
  arr.value.filter(item => item.includes(search.value))
 ); 

 return { // 返回的对象可以在模板当中直接使用
  arr:arrSearch, // 只需要搜索过滤的结果
  getArr,
  search,
 }
}