响应式ref

Ref()

接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。
如果将一个对象赋值给 ref,那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref,它们将被深层地解包

import { ref, Ref } from "vue";
const count:Ref<number> = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1
const count:Ref<any> = ref({}) // 会自动调用toReactive()

shallowRef()

浅层次响应式

  import { ref, Ref, shallowRef, triggerRef } from "vue";
  const job:string = ref('web开发')
  const person:Ref<string> = shallowRef({name: 'lisi'})
  person.value.name  = 'wangwu' // 视图不会更新,但值已经 改变
  person.value = {name: 'wangwu'} // 视图更新
  // 注意: 别和ref一起使用
  const change = () => {
    job.value = 'java开发'
    person.value.name = 'wangwu' // 和ref数据一起使用的时候,会更新依赖,是shallowRef强制更新,ref底层调用triggerRef
  }
  const change1 = ()=> {
    person.value.name = 'wangwu'
    triggerRef(person) // 强制更新依赖,使视图更新
  }

customRef 自定义ref

import { customRef } from "vue";
function MyRef<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 收集依赖
        return value;
      },
      set(newValue) {
        value = newValue;
        trigger(); // 触发依赖更新
      },
    };
  });
}
const age = MyRef(18);
const change = () => {
  age.value = 30;
};

isRef

判断是不是一个ref对象

import { ref, Ref,isRef } from 'vue'
let message: Ref<string | number> = ref("我是message")
let notRef:number = 123
const changeMsg = () => {3
  message.value = "change msg"
  console.log(isRef(message)); //true
  console.log(isRef(notRef)); //false 
}

toRef

基于响应式对象上的一个属性,创建一个对应的 ref。这样创建的 ref 与其源属性保持同步:改变源属性的值将更新 ref 的值

posted @   前端之旅  阅读(228)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示