乐趣区

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

jiezi

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

退出移动版