vue3学习 ref和reactive的使用

使用ref声明一个响应式对象并使用

html 复制代码
<script lang="ts" setup>
import { ref } from 'vue';
const message = ref("HelloWorld")
message.value="被修改了啊~~"
</script>
<template>
    {{ message }}
</template>

ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回,如果在js中使用需要XX.value来操作其内容,在模板中可以直接使用,因为已经自动解包了

为什么ref可以变成响应式

vue会在首次渲染的时候追踪所有的ref,将ref对象进行一次封装,如果是普通对象我们是没办法检测他的修改和访问的,所以我们将他封装成对象,然后通过getter和 setter方法拦截对象属性的get和set操作。

.value属性就是用来检测ref合适被访问和修改的,可以参考如下伪代码:

javascript 复制代码
// 伪代码,不是真正的实现
const myRef = {
  _value: 0,
  get value() {
    track()
    return this._value
  },
  set value(newValue) {
    this._value = newValue
    trigger() //用来做一些通知,
  }
}

使用reactive声明一个响应式对象并使用

javascript 复制代码
// 伪代码,不是真正的实现
const myRef = {
  _value: 0,
  get value() {
    track()
    return this._value
  },
  set value(newValue) {
    this._value = newValue
    trigger() //用来做一些通知,
  }
}
  1. reactive()将对象本身变的具有响应性,所以他只能用于对象类型,不支持string number boolean等原始类型。
  2. reactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的.
  3. reactive对结构操作不友好,如果我们对reactive进行结构,那他将失去响应性链接
javascript 复制代码
const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

在TS中如何使用 ref 和reactive

html 复制代码
<script lang="ts" setup>
import { ref, reactive } from 'vue';
const message = ref<string>("HelloWorld")
interface User {
    name: string,
    age: number
}
const user = reactive<User>({
    name: "三千",
    age: 18
})
user.name = "八百"
</script>
<template>
    {{ message }}
    {{ user.name }}
</template>

怎么选择

虽然没有严格的规则,但在某些情况下,使用一些特定的内容才是最佳实践,当然你也能够 ref 一把梭哈

如果你需要一个响应式原始值,那么使用 ref() 是正确的选择,要注意是原始值

如果你需要一个响应式对象,层级不深,那么使用 ref也可以

如果您需要一个响应式可变对象,并且对象层级较深,需要深度跟踪,那么使用 reactive

你可以把 reactive 看成 ref 的子集,ref 可以解决一切烦恼

相关推荐
zhangzuying10262 分钟前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
lichong9517 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
知识分享小能手17 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲7 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830949 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr