vue3的组合API模式，使用ref函数让任何响应变量在任何地方都起作用refuseimport{ref}from'vue'constcounter=ref(0)ref取一个参数并返回包装在具有value属性的对象中，然后可用于访问或更改反应变量的值import{ref}from'vue'constcounter=ref(0)console.log(counter)//{value:0}console.log(counter.value)//0counter.value++console.log(counter.value)//1将值包装在对象中似乎没有必要，但在JavaScript中保持不同数据类型的行为Unity是必需的。这是因为在JavaScript中，像Number或String这样的基本类型是按值传递的，而不是按引用传递的。在任何值周围都有一个包装器对象允许我们在整个应用程序中安全地传递它，而不用担心在某处失去它的响应能力。提示换句话说，ref创建了一个对我们的值的反应性引用。使用引用的概念将在整个组合API中频繁使用。回到我们的示例，让我们创建一个响应式存储库变量//src/components/UserRepositories.vueimport{fetchUserRepositories}from'@/api/repositories'import{ref}from'vue'exportdefault{components:{RepositoriesFilters,RepositoriesSortBy,RepositoriesList},props:{user:{type:String}},setup(props){constrepositories=ref([])constgetUserRepositories=async()=>{repositories.value=awaitfetchUserRepositories(props.user)}onMounted(getUserRepositories)return{repositories,getUserRepositories}},data(){return{filters:{...},//3searchQuery:''//2}}}WARNING然而，由于props是反应性的，你不能使用ES6解构，因为它会删除道具的响应能力。如果一个prop需要被解构，这可以通过在setup函数中使用toRefs来安全地完成。//MyBook.vueimport{toRefs}from'vue'setup(props){const{title}=toRefs(props)console.log(title.value)}React方法一：string类型绑定类似于vue中的ref绑定你可以通过this.refs绑定的ref的名称获取节点dom。需要注意的是，最新版本的react已经不再推荐这种方式，未来的版本可能会放弃。方法二：react.CreateRef()通过在类中使用React.createRef()方法创建一些变量，可以将这些变量绑定到标签的ref上，然后变量的current指向绑定标签的dom方法3：函数形式在类中声明函数，在函数中绑定ref使用该方法将子组件暴露给父组件，使得父组件可以调用子组件的方法Bindingref通过函数的方法即可将整个子组件暴露给父组件注意：React不推荐过度使用refs，如果你可以通过state做事，你不应该在你的app中使用refs来“让事情发生”。过度使用ref不符合数据驱动的思维
