Vue 一步之遥

标签

开发/前端/Vue

字数

512 字

阅读时间

3 分钟

How to be well-versed in Vue?

从普遍意义上来说，Vue 在现在应该指代 Vue3

I have NO IDEA about this question.

We should know WHY it happened rather than just know WHAT happened.

响应式系统 Reactive System

"Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。这让状态管理更加简单直观，但理解它是如何工作的也是很重要的，这可以帮助我们避免一些常见的陷阱。"

From Vue Doc.

简单地来说，响应式就是 要响应 在更新的时候同步更新关联的状态

Reactive 和 Ref

ref()

ref() 实际上是构建 RefImpl 的一个工厂函数，而RefImpl是

/* 简化版RefImpl源码 */

import { trackRefValue, triggerRefValue } from './effect'
import { toReactive } from './reactive'

// 一个标志，用来判断一个对象是不是 ref
export const isRef = (r: any): r is Ref => !!(r && r.__v_isRef === true)

// RefImpl
export class RefImpl<T> {
  private _value: T
  private _rawValue: T

  // 这是 isRef() 函数检查的标志
  public readonly __v_isRef = true

  constructor(value: T) {
    // _rawValue 存储原始值，用于 set 时的比较
    this._rawValue = value
    // _value 存储的是响应式的值。如果传入的是对象，会被 toReactive 包装
    this._value = toReactive(value)
  }

  // .value 属性的 getter
  get value() {
    // 关键步骤1：依赖收集
    // trackRefValue 会将当前激活的副作用（effect）与这个 ref 实例关联起来
    trackRefValue(this)
    return this._value
  }

  // .value 属性的 setter
  set value(newVal) {
    // 如果新值和原始旧值没有变化，则什么都不做
    if (Object.is(newVal, this._rawValue)) {
      return
    }

    // 更新原始值和响应式的值
    this._rawValue = newVal
    this._value = toReactive(newVal)

    // 关键步骤2：触发更新
    // triggerRefValue 会找到所有依赖这个 ref 的副作用，并让它们重新执行
    triggerRefValue(this)
  }
}

// ref() 函数就是创建 RefImpl 实例的工厂函数
export function ref(value?: unknown) {
  return new RefImpl(value)
}

贡献者

Kiracoon

页面历史

最后编辑于 3 个月前

查看完整历史

0ddcc12-Vue - basic knowledge