【源码系列#05】Vue3响应式原理(Ref)

这篇具有很好参考价值的文章主要介绍了【源码系列#05】Vue3响应式原理(Ref)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ref & ShallowRef

ref:接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value

可以将 ref 看成 reactive 的一个变形版本,这是由于 reactive 内部采用 Proxy 来实现,而 Proxy 只接受对象作为入参,这才有了 ref 来解决值类型的数据响应,如果传入 ref 的是一个对象,内部也会调用 reactive 方法进行深层响应转换

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

shallowRef:ref() 的浅层作用形式。和 ref() 不同,浅层 ref 的内部值将会原样存储和暴露,并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。

const state = shallowRef({ count: 1 })

// 不会触发更改
state.value.count = 2

// 会触发更改
state.value = { count: 2 }

源码实现

  • @issue1 如果是对象和数组,则调用 reactive方法 转化为响应式对象(ref会转换,shallowRef不会转换)
  • @issue2 getter 取值的时候收集依赖
  • @issue3 setter 设置值的时候触发依赖
/**
 * @desc 如果是对象和数组,则转化为响应式对象
 */
function toReactive(value) {
  return isObject(value) ? reactive(value) : value
}

/**
 * @desc RefImpl
 * @issue1 如果是对象和数组,则转化为响应式对象
 */
class RefImpl {
  // ref标识
  public __v_isRef = true
  // 存储effect
  public dep = new Set()
  public _value
  constructor(public rawValue, public _shallow) {
    // @issue1
    this._value = _shallow ? rawValue : toReactive(rawValue)
  }
  get value() {
    // 取值的时候收集依赖
    trackEffects(this.dep)
    return this._value
  }
  set value(newValue) {
    // 新旧值不相等
    if (newValue !== this.rawValue) {
      // @issue1
      this._value = this._shallow ? newValue : toReactive(newValue)
      this.rawValue = newValue
      // 设置值的时候触发依赖
      triggerEffects(this.dep)
    }
  }
}


// 接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。
export function ref(value) {
  return new RefImpl(value)
}

测试代码

/**
 * 1. Ref
 **/
const person = ref({
  name: '柏成',
  age: 25,
})
effect(() => {
  app.innerHTML = person.value.name
})

setTimeout(() => {
  person.value.name = '柏成2号' // 会触发更改
}, 1000)

/**
 * 2. shallowRef
 */
const person = shallowRef({
  name: '柏成',
  age: 25,
})
effect(() => {
  app.innerHTML = person.value.name
})

setTimeout(() => {
  person.value.name = '柏成2号' // 不会触发更改
}, 1000)

setTimeout(() => {
  person.value = {
    name: '柏成9号' // 会触发更改
  }
}, 2000)

toRef & toRefs

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

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

toRefs:将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)

// 这个 ref 和源属性已经 “链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

源码实现

class ObjectRefImpl {
  // 只是将.value属性代理到原始类型上
  constructor(public object, public key) {}
  
  get value() {
    return this.object[this.key]
  }
  
  set value(newValue) {
    this.object[this.key] = newValue
  }
}

// 基于响应式对象上的一个属性,创建一个对应的 ref。这样创建的 ref 与其源属性保持同步:改变源属性的值将更新 ref 的值,反之亦然。
export function toRef(object, key) {
  return new ObjectRefImpl(object, key)
}

// 将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
export function toRefs(object) {
  const result = isArray(object) ? new Array(object.length) : {}

  for (let key in object) {
    result[key] = toRef(object, key)
  }

  return result
}

测试代码

// 对象
const person = reactive({
  name: '柏成',
  age: 18
})
// 数组
const numbers = reactive([1, 2, 3, 4, 5])

// 注意!直接解构后会丢失响应性的特点!!!
// let { name, age } = person

const {
  name,
  age
} = toRefs(person)
const [first] = toRefs(numbers)

effect(() => {
  app.innerHTML = `${name.value},${age.value}岁。第一个数字为${first.value}。`
})

setTimeout(() => {
  name.value = '柏成9号'
  first.value = 999
}, 1000)

自动脱ref

在js中访问ref时需要.value获取,但是在模版中却可以直接取值,不需要加.value!这里就用到了 proxyRefs 自动脱ref方法文章来源地址https://www.toymoban.com/news/detail-776637.html

源码实现

export function proxyRefs(object) {
  return new Proxy(object, {
    // 代理的思想,如果是ref 则取ref.value
    get(target, key, recevier) {
      let r = Reflect.get(target, key, recevier)
      return r.__v_isRef ? r.value : r
    },
    // 设置的时候如果是ref,则给ref.value赋值
    set(target, key, value, recevier) {
      let oldValue = target[key]
      if (oldValue.__v_isRef) {
        oldValue.value = value
        return true
      } else {
        return Reflect.set(target, key, value, recevier)
      }
    },
  })
}

测试代码

const name = ref('柏成')
const age = ref('24')

const person = proxyRefs({
  name,
  age,
  sex: '男'
})

effect(() => {
  app.innerHTML = `${person.name},${person.age}岁。性别${person.sex}。`
})

setTimeout(() => {
  name.value = '柏成9号'
}, 1000)

到了这里,关于【源码系列#05】Vue3响应式原理(Ref)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中的ref、isRef、shallowRef、triggerRef和customRef

    接受一个参数值并返回一个响应式且可改变的 ref 对象。 ref 对象拥有一个指向内部值的单一属性 .value property ,指向内部值。 例:此时,页面上的 str1 也跟着变化 使用 ref 获取 dom 元素:  结果: 检查一个对象是否为   ref   包装过的对象。 创建一个跟踪自身 .value 变化的

    2024年04月29日
    浏览(41)
  • Vue3 ref响应式变量详解

    在Vue 3中,ref是一个函数,用于创建响应式数据。它接受一个初始值作为参数,并返回一个可变的响应式对象。 使用ref创建的响应式对象可以直接在模板中使用,并且当其值发生变化时,相关的组件会自动重新渲染。与Vue 2中的data选项不同,Vue 3推荐使用ref来创建响应式数据

    2024年02月09日
    浏览(39)
  • vue3-响应式基础之ref

    ref() 在组合式 API 中,推荐使用 ref() 函数来声明响应式状态: ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回: 形式1 setup() 函数 要在组件模板中访问 ref,请从组件的 setup() 函数中声明并返回它们: 注意,在模板中使用 ref 时,我们不需要附加 .value。为了

    2024年01月18日
    浏览(40)
  • 【手撕源码】vue3响应式原理解析(文末抽奖)

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源

    2024年02月03日
    浏览(66)
  • 前端Vue篇之Vue3响应式:Ref和Reactive

    在Vue3中,响应式编程是非常重要的概念,其中 Ref 和 Reactive 是两个关键的API。 Ref : Ref 用于创建一个响应式的基本数据类型,比如数字、字符串等。它将普通的数据变成响应式数据,可以监听数据的变化。使用 Ref 时,我们可以通过 .value 来访问和修改数据的值。 Reactive :

    2024年04月25日
    浏览(50)
  • vue3 ref reactive响应式数据 赋值的问题

    doing 遇见就记录,最后更新时间23.8.30 错误示范:直接赋值 以数组为例,对象也是一样的操作。 ref 定义的属性等价于 reactive({value:xxx}) ,所以 reactive、ref 直接重新赋值丢失响应是因为引用地址变了 正确写法 方法1: ref.value ,代码中更为清晰地表明响应式数据 方法2:包一层

    2024年02月10日
    浏览(49)
  • 【Vue3】使用ref与reactive创建响应式对象

    💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互

    2024年02月21日
    浏览(53)
  • Vue3通透教程【五】Vue3中的响应式数据 reactive函数、ref函数

    专栏介绍: 凉哥作为 Vue 的忠实粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其他

    2024年01月24日
    浏览(45)
  • Vue3中的Ref与Reactive:深入理解响应式编程

    Vue 3是一个功能强大的前端框架,它引入了一些令人兴奋的新特性,其中最引人注目的是 ref 和 reactive 。这两个API是Vue 3中响应式编程的核心,本文将深入探讨它们的用法和差异。 在Vue中,响应式编程是一种使数据与UI保持同步的方式。当数据变化时,UI会自动更新,反之亦然

    2024年02月08日
    浏览(64)
  • 关于 Vue3 响应式 API 以及 reactive 和 ref 的用法

    这篇文章记录一下 Vue3 响应式的内容,其中还包括了 reactive 和 ref 的用法。响应式是一种允许以声明式的方式去适应变化的编程范例,接下来我们一起看看。 Vue 框架的特点之一就是响应式。 Vue 2.x 是基于 Object.defineProperty() 方法实现响应式。但是 Object.defineProperty() 方法有一定

    2024年02月12日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包