关于vue.js:vue3的ref和react的ref比较

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并不合乎数据驱动的思维