在Vue 3中,ref
有两个不同的用法:一个是用于模板中引用DOM元素或组件实例的ref
属性,另一个是用于创建响应式数据的ref
函数
1.DOM引用:在模板中使用ref
属性,随后可以在mounted
生命周期钩子中访问DOM节点。(vue2和vue3都有)是一种直接在模板中使用的指令。
- <template>
- <div ref="myDiv">Hello, World!div>
- template>
-
- <script>
- export default {
- mounted() {
- const myDiv = this.$refs.myDiv;
- console.log(myDiv); // 输出 Hello, World!
-
- // 改变内容
- myDiv.innerText = "Hello, Vue!";
-
- // 改变样式
- myDiv.style.color = "blue";
- }
- }
- script>
响应式引用:通过ref
函数创建一个响应式引用,当其值变化时,视图会自动更新(vue3引入),是用于创建响应式数据的工具。
- <template>
- <div>{{ count.value }}div>
- <button @click="increment">Incrementbutton>
- template>
-
- <script>
- import { ref } from 'vue';
-
- export default {
- setup() {
- const count = ref(0);
-
- function increment() {
- count.value++;
- }
-
- return { count, increment };
- }
- }
- script>
reactive
reactive
用于创建一个响应式对象。当对象的属性变化时,视图会自动更新。
- <template>
- <div>{{ state.count }}div>
- <button @click="increment">Incrementbutton>
- template>
-
- <script>
- import { reactive } from 'vue';
-
- export default {
- setup() {
- const state = reactive({
- count: 0
- });
-
- function increment() {
- state.count++;
- }
-
- return { state, increment };
- }
- }
- script>
ref
用于创建一个单一的响应式值。它可以是基本类型(如数字、字符串)或对象,基本类型需要通过.value
访问和修改
- const user = ref({ name: 'John', age: 30 });
- console.log(user.value.name);
reactive
用于创建一个深度响应式对象,直接访问和修改属性
- const state = reactive({
- count: 0,
- user: {
- name: 'John',
- age: 30
- }
- });
- console.log(state.count,state.user.name);
ref
主要用于引用DOM元素或组件实例,通常使用useRef
钩子来创建。它的主要用途是直接操作DOM元素,获取DOM节点或保持某些可变的值(这值的变化不会触发组件重新渲染)。
1.创建和使用ref
来引用DOM元素
- import React, { useRef, useEffect } from 'react';
-
- function MyComponent() {
- const myDivRef = useRef(null);
-
- useEffect(() => {
- console.log(myDivRef.current); // 输出 Hello, World!
- myDivRef.current.style.backgroundColor = 'yellow'; // 修改样式
- }, []);
-
- return <div ref={myDivRef}>Hello, World!div>;
- }
2.保持不需要触发重新渲染的可变值
- import React, { useRef } from 'react';
-
- function Timer() {
- const count = useRef(0);
-
- const increment = () => {
- count.current++;
- console.log(count.current);
- };
-
- return <button onClick={increment}>Incrementbutton>;
- }
尽管useRef
不会引发组件重新渲染,但它在处理以下情况时非常有用:
1、回调函数形式的ref
- import React, { Component } from 'react';
-
- class SearchComponent extends Component {
- handleSearch = () => {
- const keyword = this.keyWordElement.value;
- console.log('搜索关键词:', keyword);
- // 你可以在这里使用keyword进行搜索操作
- };
-
- render() {
- return (
- <div>
- <input
- ref={c => this.keyWordElement = c}
- type="text"
- placeholder="输入关键词点击搜索"
- />
- <button onClick={this.handleSearch}>搜索button>
- div>
- );
- }
- }
-
- export default SearchComponent;
回调函数形式的ref
:
ref
属性接受一个回调函数,该函数在组件挂载或更新时执行。回调函数会传递当前的DOM元素作为参数c
是当前的DOM元素。通过将c
赋值给this.keyWordElement
,你在组件实例上创建了一个引用,指向这个DOM元素。这样做的结果是,可以在类组件的其他方法中通过this.keyWordElement
来访问和操作这个DOM元素。2. React.createRef()
- import React, { Component } from 'react';
-
- class SearchComponent extends Component {
- constructor(props) {
- super(props);
- //创建ref
- this.keyWordElement = React.createRef();
- }
-
- handleSearch = () => {
- //访问ref:通过this.refName.current来访问DOM元素或组件实例
- const keyword = this.keyWordElement.current.value;
- };
-
- render() {
- return (
- <div>
- {*分配ref:在render方法中,将创建的ref对象赋值给JSX元素的ref属性*}
- <input
- ref={this.keyWordElement}
- type="text"
- placeholder="输入关键词点击搜索"
- />
- <button onClick={this.handleSearch}>搜索button>
- div>
- );
- }
- }
- export default SearchComponent;
useState
:用于创建和管理组件的局部状态
- import React, { useState } from 'react';
-
- function Counter() {
- const [count, setCount] = useState(0);
-
- return (
- <div>
- <p>{count}p>
- <button onClick={() => setCount(count + 1)}>Incrementbutton>
- div>
- );
- }
useReducer
:用于管理复杂的状态逻辑,类似于Redux的reducer概念。
- import React, { useReducer } from 'react';
-
- const initialState = { count: 0 };
-
- function reducer(state, action) {
- switch (action.type) {
- case 'increment':
- return { count: state.count + 1 };
- default:
- throw new Error();
- }
- }
-
- function Counter() {
- const [state, dispatch] = useReducer(reducer, initialState);
-
- return (
- <div>
- <p>{state.count}p>
- <button onClick={() => dispatch({ type: 'increment' })}>Incrementbutton>
- div>
- );
- }
使用useState
或useReducer
修改状态会触发组件重新渲染
关注我,不迷路!!!