ref和reactive的使用

ref和reactive的使用场景区别

  • ref可以包装基本类型、数组、对象;reactive只能用来包装引用类型。
  • ref包装的数组和对象可以整体赋值,reactive包装的引用类型不能整体被赋值
  • ref在script中需要'.value'出来;reactive不需要

常常这样用

复制代码
1、基本类型用ref
let n = ref(0);
n.value = 1;
2、数组用ref
let arr = ref([1,2]);
arr.value = [1,2,3];
3、对象用reactive
let obj = reactive({name: 'jim'});
Object.assign(obj,{age: 18});  -> {name:'jim', age:18}

使用ref获取dom

复制代码
<div ref="xx">
API选项中:
this.$refs.xx
setup中:
const xx = ref(),在onMounted中使用

customRef(costomRef可以理解为被拦截的ref)

复制代码
const myRef = (value) => {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        if(newValue < 10) {
          value = newValue
          // 延迟渲染
          setTimeout(() => {
            trigger()
          }, 2000);
        }
      }
    }
  })
}

从reactive对象中解构出属性作为响应式数据使用

复制代码
let obj = reactive({
 name: 'jim',
 age: 18
})
let {name, age} = toRefs(obj) // 此时name和age就是响应式的数据
相关推荐
斯~内克2 分钟前
前端浏览器窗口交互完全指南:从基础操作到高级控制
前端
我真的不会C10 分钟前
QT中的事件及其属性
开发语言·qt
Mike_jia38 分钟前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话39 分钟前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby40 分钟前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云43 分钟前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo43 分钟前
前端获取环境变量方式区分(Vite)
前端·vite
一千柯橘1 小时前
Nestjs 解决 request entity too large
javascript·后端
土豆骑士1 小时前
monorepo 实战练习
前端
土豆骑士1 小时前
monorepo最佳实践
前端