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就是响应式的数据
相关推荐
明月醉窗台8 分钟前
Qt 入门 1 之第一个程序 Hello World
开发语言·c++·qt
ElasticPDF-新国产PDF编辑器9 分钟前
Vue PDF Annotation plugin library online API examples
javascript·vue.js·pdf
鱼樱前端12 分钟前
Vite 工程化深度解析与最佳实践
前端·javascript
鱼樱前端19 分钟前
Webpack 在前端工程化中的核心应用解析-构建老大
前端·javascript
Moment19 分钟前
多人协同编辑算法 —— CRDT 算法 🐂🐂🐂
前端·javascript·面试
Craaaayon21 分钟前
Java八股文-List集合
java·开发语言·数据结构·list
小付同学呀24 分钟前
前端快速入门学习4——CSS盒子模型、浮动、定位
前端·css·学习
幻想趾于现实27 分钟前
C# Winform 入门(11)之制作酷炫灯光效果
开发语言·c#·winform
hy____12331 分钟前
类与对象(中)(详解)
开发语言·c++
wen__xvn36 分钟前
c++STL入门
开发语言·c++·算法