共计 1559 个字符,预计需要花费 4 分钟才能阅读完成。
vue
vue3 的组合 API 模式中,用 ref 函数使任何响应式变量在任何中央起作用
ref 的应用
import {ref} from 'vue'
const counter = ref(0)
ref
承受参数并返回它包装在具备 value
property 的对象中,而后能够应用该 property 拜访或更改响应式变量的值
import {ref} from 'vue'
const counter = ref(0)
console.log(counter) // {value: 0}
console.log(counter.value) // 0
counter.value++
console.log(counter.value) // 1
在对象中包装值仿佛不必要,但在 JavaScript 中放弃不同数据类型的行为对立是必须的。这是因为在 JavaScript 中,Number
或 String
等根本类型是通过值传递的,而不是通过援用传递的。
在任何值四周都有一个包装器对象,这样咱们就能够在整个应用程序中平安地传递它,而不用放心在某个中央失去它的响应性。
提醒
换句话说,
ref
对咱们的值创立了一个 响应式援用 。应用 援用 的概念将在整个组合式 API 中常常应用。
回到咱们的例子,让咱们创立一个响应式的 repositories
变量
// src/components/UserRepositories.vue
import {fetchUserRepositories} from '@/api/repositories'
import {ref} from 'vue'
export default {components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList},
props: {user: { type: String}
},
setup (props) {const repositories = ref([])
const getUserRepositories = async () => {repositories.value = await fetchUserRepositories(props.user)
}
onMounted(getUserRepositories)
return {
repositories,
getUserRepositories
}
},
data () {
return {filters: { ...}, // 3
searchQuery: '' // 2
}
}
}
WARNING
然而,因为
props
是响应式的,你 不能应用 ES6 解构,因为它会打消 prop 的响应性。
如果须要解构 prop,能够通过应用 setup
函数中的 toRefs
来平安地实现此操作。
// MyBook.vue
import {toRefs} from 'vue'
setup(props) {const { title} = toRefs(props)
console.log(title.value)
}
react
形式 1: string 类型绑定
相似于 vue 中的 ref 绑定形式,能够通过 this.refs. 绑定的 ref 的名字获取到节点 dom
留神的是 这种形式曾经不被最新版的 react 举荐应用,有可能会在将来版本中遗弃
形式 2: react.CreateRef()
通过在 class 中应用 React.createRef()办法创立一些变量,能够将这些变量绑定到标签的 ref 中
那么该变量的 current 则指向绑定的标签 dom
形式 3: 函数模式
在 class 中申明函数,在函数中绑定 ref
应用这种办法能够将子组件裸露给父组件以使得父组件可能调用子组件的办法
通过函数的办法绑定 ref 能够将整个子组件裸露给父组件
留神: react 并不举荐适度应用 ref,如果能通过 state 做到的事件,就不应该应用 refs 在你的 app 中“让事件产生”。
适度应用 ref 并不合乎数据驱动的思维