Vue3源码分析之compositionApi

TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。

目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。

团队倡导开源共建，拥有各种技术大牛，团队Github地址：https://github.com/tnfe

本文作者dravenwu

Vue3源码分析之compositionApi_第1张图片

本篇文章将会围绕Vue3的另外一个主要的文件夹reactivity来进行讲解，也就是Vue3中对外暴露的compositionApi的部分，，越来越有React Hooks的味道了。reactivity文件夹下面包含多个文件，主要功能在于computed、effect、reactive、ref；其他的文件是为其进行服务的，另外还有一个主入口文件index。reactivity下面对外暴露的所有api可见下图，我们本篇文件会结合使用对这些功能进行源码分析。

Vue3源码分析之compositionApi_第2张图片

正文

正文在这里，正式开始。

computed

computed的含义与Vue2中的含义是一样的，计算属性；使用方式也是和Vue2中差不多的，有两种使用方式：

computed使用

const {reactive, readonly, computed, ref} = Vue;

const app = Vue.createApp({});
app.component('TestComponent', {
    setup(props) {
        // reactive
        const state = reactive({
            count: 0,
            number: 10
        })
        // computed getter
        const computedCount = computed(() => {
            return state.count + 10
        })
        // computed set get
        const computedNumber = computed({
            get: () => {
                return state.number + 100
            },
            set: (value) => {
                state.number = value - 50
            }
        })

        const changeCount = function(){
            state.count++;
            computedNumber.value = 200
        }
        return {
            state,
            changeCount,
            computedCount,
            computedNumber
        }
    },
    template: `
        

            
init count:{{state.count}}

            
computedCount:{{computedCount}}

            
computedNumber:{{computedNumber}}

            
        

    `
})

app.mount('#demo')

上面代码可以看到两次对computed的使用，第一次传递的是一个函数，第二次传递的是一个包含get和set的对象。

computed源码分析

接下来，咱们来看下computed的源码：

// @file packages/reactivity/src/computed.ts
export function computed(
  getterOrOptions: ComputedGetter | WritableComputedOptions
) {
  let getter: ComputedGetter
  let setter: ComputedSetter

  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }

  return new ComputedRefImpl(
    getter,
    setter,
    isFunction(getterOrOptions) || !getterOrOptions.set
  ) as any
}

上面是computed的入口的源码，此处和Vue2中的写法是一样的，都是对参数进行判断，生成getter和setter，这里最后调用的是ComputedRefImpl；

// packages/reactivity/src/computed.ts
class ComputedRefImpl {
  private _value!: T
  private _dirty = true

  public readonly effect: ReactiveEffect

  public readonly __v_isRef = true;
  public readonly [ReactiveFlags.IS_READONLY]: boolean

  constructor(
    getter: ComputedGetter,
    private readonly _setter: ComputedSetter,
    isReadonly: boolean
  ) {
    this.effect = effect(getter, {
      lazy: true,
      scheduler: () => {
        if (!this._dirty) {
          this._dirty = true
          trigger(toRaw(this), TriggerOpTypes.SET, 'value')
        }
      }
    })

    this[ReactiveFlags.IS_READONLY] = isReadonly
  }

  get value() {
    if (this._dirty) {
      this._value = this.effect()
      this._dirty = false
    }
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
  }

  set value(newValue: T) {
    this._setter(newValue)
  }
}

如上，是ComputedRefImpl的源码。ComputedRefImpl是一个class，内部包含_value、_dirty、effect、__v_isRef、ReactiveFlags.IS_READONLY等属性，还包括constructor和get、set等函数。了解的同学都知道，会首先调用构造函数也就是constructor；调用effect为effect属性赋值，把isReadonly赋值给ReactiveFlags.IS_READONLY属性，关于effect，咱们后面讲这块。此时ComputedRefImpl执行完成。

当获取当前computed的值的时候，如上面使用中computedCount在template中进行获取值的时候，会调用上面class内的get方法，get方法内部调用的是this.effect进行数据的获取，_dirty属性是为了数据的缓存，依赖未发生变化，则不会调用effect，使用之前的value进行返回。track是跟踪当前get调用的轨迹。

当为computed赋值的时候，如上面使用中computedNumber.value = 200的时候，，会调用上面class内的set方法，set内部还是调用了之前传递进来的函数。

reactive

接下来对reactive的讲解

reactive 使用

reactive官网给的解释是：返回对象的响应式副本。先来看下reactive的使用

const {reactive} = Vue;

const app = Vue.createApp({});
app.component('TestComponent', {
    setup(props) {
        // reactive
        const state = reactive({
            count: 0
        })
        const changeCount = function(){
            state.count++;
        }
        return {
            state,
            changeCount
        }
    },
    template: `
        

            
reactive count:{{state.count}}

            
        

    `
})
app.mount('#demo')

当点击changeCount的时候，state.count会++，同时映射到h2-dom。

reactive 源码解读

// @file packages/reactivity/src/reactive.ts
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers
  )
}

如上源码可以看到，如果target有值并且target的[ReactiveFlags.IS_READONLY]属性，也就是__v_isReadonly为true的话，会直接返回当前对象，不做任何处理，后面对state.count的改变也不会映射到dom当中。如果不满足上面条件，则会调用createReactiveObject函数，传递4个参数：

  • target为原始对象；
  • 第二个是isReadonly，为false；
  • 第三个参数mutableHandlers是reactive对应的处理函数；
  • 第四个参数是对于集合类型的对象进行处理的函数。

关于这个核心的函数，我们待会来进行讲解。

readonly 使用

现在我们来看下Vue3提供给我们的reactivity下面的第二个api：readonly。

官网给出的定义是:获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。只读代理是深层的：访问的任何嵌套 property 也是只读的

const {readonly} = Vue;

const app = Vue.createApp({});
app.component('TestComponent', {
    setup(props) {
        const read = readonly({count: 1})

        const changeRead = function(){
            read.count++;
        }
        return {
            read,
            changeRead
        }
    },
    template: `
        

            
readonly count:{{read.count}}

            
        

    `
})

app.mount('#demo')

上面代码，是readonly的使用，在此试验了一下对readonly返回后的结果read，进行了改变的尝试，发现是改变不了的，属于只读，同时还会打印警告Set operation on key "count" failed: target is readonly.

readonly 源码解读

// @file packages/reactivity/src/reactive.ts
export function readonly(
  target: T
): DeepReadonly> {
  return createReactiveObject(
    target,
    true,
    readonlyHandlers,
    readonlyCollectionHandlers
  )
}

上面就是readonly的源码入口，与reactive一样，都是调用的createReactiveObject函数：

  • 第一个参数还是target；
  • 第二个是isReadonly，为true；
  • 第三个参数readonlyHandlers是readonly对应的处理函数；
  • 第四个参数是对于集合类型的对象进行处理的readonly所对应的函数。

shallowReactive 使用

官网文档给的解释：创建一个响应式代理，该代理跟踪其自身 property 的响应性，但不执行嵌套对象的深度响应式转换 (暴露原始值)。来看下shallowReactive的使用

const {shallowReactive} = Vue;

const app = Vue.createApp({});
app.component('TestComponent', {
    setup(props) {
        const state = shallowReactive({
            foo: 1,
            nested: {
                bar: 2
            }
        })
        const change = function(){
            state.foo++
            state.nested.bar++
        }
        return {
            state,
            change
        }
    },
    template: `
        

            
foo:{{state.foo}}

            
bar:{{state.nested.bar}}

            
        

    `
})

app.mount('#demo')

上面代码基本是完全按照官网来写的，不过，试了下效果和官网上的效果不一样，并不是shallow类型，而是对内部的属性也进行了监听，bar的改变也会响应式的反映到dom当中去。也不知道是我姿势不对，还是Vue3的bug。

shallowReactive 源码解读

// @file packages/reactivity/src/reactive.ts
export function shallowReactive(target: T): T {
  return createReactiveObject(
    target,
    false,
    shallowReactiveHandlers,
    shallowCollectionHandlers
  )
}

上面就是shallowReactive的源码入口，与reactive和readonly一样，都是调用的createReactiveObject函数：

  • 第一个参数还是target；
  • 第二个是isReadonly，为false；
  • 第三个参数shallowReactiveHandlers是shallowReactive对应的处理函数；

  • 第四个参数是对于集合类型的对象进行处理的shallowReactive所对应的函数。

    shallowReadonly 使用

    官网给出的解释：创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换 (暴露原始值)。来看下使用：

    const {shallowReadonly} = Vue;

const app = Vue.createApp({});
app.component('TestComponent', {
  setup(props) {
      const state = shallowReadonly({
          foo: 1,
          nested: {
              bar: 2
          }
      })
      const change = function(){
          state.foo++
          state.nested.bar++
      }
      return {
          state,
          change
      }
  },
  template: `
      
    
          
    foo:{{state.foo}}
    
          
    bar:{{state.nested.bar}}
    
          
      
    
  `
})

app.mount('#demo')

    上面代码基本是完全按照官网来写的，foo的改变不被允许，按照官网说明state.nested.bar是允许被改变的，在上面例子中，发现state.nested.bar的值是会改变的，但是不会响应到dom上。

    shallowReadonly 源码解读

    // @file packages/reactivity/src/reactive.ts
export function shallowReadonly(
target: T
): Readonly<{ [K in keyof T]: UnwrapNestedRefs }> {
return createReactiveObject(
  target,
  true,
  shallowReadonlyHandlers,
  readonlyCollectionHandlers
)
}

    上面就是shallowReadonly的源码入口，与reactive和readonly一样，都是调用的createReactiveObject函数：

  • 第一个参数还是target；
  • 第二个是isReadonly，为true；
  • 第三个参数shallowReadonlyHandlers是shallowReadonly对应的处理函数；
  • 第四个参数是对于集合类型的对象进行处理的shallowReadonly所对应的函数。

isReadonly

isReadonly:检查对象是否是由readonly创建的只读代理。

使用如下：

const only = readonly({
    count: 1
})
isOnly = isReadonly(only) // true

源码如下：

export function isReadonly(value: unknown): boolean {
  return !!(value && (value as Target)[ReactiveFlags.IS_READONLY])
}

ReactiveFlags.IS_READONLY是一个字符串，值为：__v_isReadonly，挂到对象上面就是属性，判断当前对象的__v_isReadonly属性是否是true，并返回。

isReactive

isReadonly:检查对象是否是 reactive创建的响应式 proxy。

使用如下：

const tive = reactive({
    count: 1
})
isOnly = isReactive(tive) // true

源码如下：

export function isReactive(value: unknown): boolean {
  if (isReadonly(value)) {
    return isReactive((value as Target)[ReactiveFlags.RAW])
  }
  return !!(value && (value as Target)[ReactiveFlags.IS_REACTIVE])
}

首先调用了上面提到的isReadonly方法判断是否是readonly创建的对象；如果是的话，则进一步使用当前对象的RAW属性调用isReactive来判断；如果不是则判断__v_isReactive是否为true；返回判断的结果。

ReactiveFlags.RAW是一个字符串，值为：__v_raw，挂到对象上面就是属性，也就是原始对象，判断是否是reactive代理的原始对象；
ReactiveFlags.IS_READONLY也是一个字符串，值为：__v_isReactive，挂到对象上面就是属性

isProxy

isProxy:检查对象是否是reactive 或 readonly创建的代理。

使用如下：

const tive = reactive({
    count: 1
})
const only = readonly({
    count: 1
})
is1 = isProxy(tive) // true
is2 = isProxy(only) // true

源码如下：

export function isProxy(value: unknown): boolean {
  return isReactive(value) || isReadonly(value)
}

调用上面提到的isReadonly方法和isReactive判断是否是proxy的对象。

markRaw

markRaw：标记一个对象，使其永远不会转换为代理。返回对象本身。

使用如下：

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

const bar = reactive({ foo })
console.log(isReactive(bar)) // true
console.log(isReactive(bar.foo)) // false

从上面使用中可以看到，markRaw只对当前对象本身有效，被标记的对象作为属性的时候，大对象bar还是可以进行响应式处理的，但是bar里面的当前被标记的对象foo，还是一个非响应式对象，永远是foo对象本身。

export function markRaw(value: T): T {
  def(value, ReactiveFlags.SKIP, true)
  return value
}
export const def = (obj: object, key: string | symbol, value: any) => {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: false,
    value
  })
}

上面可以看到markRaw的源码，就是给要标记的对象增加了一个属性(ReactiveFlags.SKIP, 也就是__v_skip)，并赋值true，所有要给当前对象进行响应式处理的时候，都会被忽略。

toRaw

toRaw：返回 reactive 或 readonly 代理的原始对象。这是一个转义口，可用于临时读取而不会引起代理访问/跟踪开销，也可用于写入而不会触发更改。不建议保留对原始对象的持久引用。请谨慎使用。

既然Vue让咱们谨慎使用，咱们还是在可以不使用的的时候不使用的好，这个就是把代理的原始对象进行返回。

const obj = {
    project: 'reactive'
}
const reactiveObj = reactive(obj)

console.log(toRaw(reactiveObj) === obj) // true

源码：

export function toRaw(observed: T): T {
    return (
        (observed && toRaw((observed as Target)[ReactiveFlags.RAW])) || observed
    )
}

返回当前对象的ReactiveFlags.RAW(也就是__v_raw)属性指向的对象，也就是对象本身，关于在什么地方给ReactiveFlags.RAW赋值的，后面会看到这部分。

createReactiveObject

上面的reactive、readonly、shallowReactive、shallowReadonly，都用到了createReactiveObject函数，现在咱们来看看这个函数的源码。

function createReactiveObject(target: Target, isReadonly: boolean, baseHandlers: ProxyHandler, collectionHandlers: ProxyHandler) {
    if (!isObject(target)) {
        if (__DEV__) {
            console.warn(`value cannot be made reactive: ${String(target)}`)
        }
        return target
    }
    if (target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS_REACTIVE])) {
        return target
    }
    const proxyMap = isReadonly ? readonlyMap : reactiveMap
    const existingProxy = proxyMap.get(target)
    if (existingProxy) {
        return existingProxy
    }
    const targetType = getTargetType(target)
    if (targetType === TargetType.INVALID) {
        return target
    }
    const proxy = new Proxy(
        target,
        targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
    )
    proxyMap.set(target, proxy)
    return proxy
}

源码解读：

  • 首先，target得是一个对象，不是对象的话，直接返回当前值；当然Vue3也提供了对值的响应式的方法：ref，后面讲。
  • 判断有原始对象且，不是只读或者不是响应式的对象，则返回当前对象，这个地方真TM绕。
  • 根据是否是isReadonly，获取到代理存储的map，，如果之前代理过，已经存在，则把之前代理过的proxy返回。
  • 判断target的类型，getTargetType内部会对target对象进行判断，返回是common、collection或者invalid；如果不可用类型(invalid)，则直接返回当前对象。此处会用到上面讲到的__v_skip。可用的类型就两个，一个是common，一个是collection；
  • 接下来就是没有代理过，获取代理的过程。new Proxy，如果是collection则使用传递进来的collectionHandlers，否则(也就是common)则使用baseHandlers；
  • 代理存储所使用的map，存储当前proxy；
  • 返回当前proxy。

通过上面reactive、readonly、shallowReactive、shallowReadonly的讲解，可以看到对于集合和common类型，提供了几种不同的处理对象，对象中所包含的内容也是不一样的，咱们在这里来对比着看下：

basehandler：

Vue3源码分析之compositionApi_第3张图片
如上图，可以看到，basehandler里面所提供的函数，我们一一来看下。

deleteProperty

// @file packages/reactivity/src/baseHandlers.ts
function deleteProperty(target: object, key: string | symbol): boolean {
  const hadKey = hasOwn(target, key)
  const oldValue = (target as any)[key]
  const result = Reflect.deleteProperty(target, key)
  if (result && hadKey) {
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}
  • 获取当前对象是否有当前key => hadKey；
  • 获取到当前的value存储为oldValue；
  • 调用Reflect.deleteProperty进行对当前对象target删除当前key的操作，返回结果为是否删除成功->result;
  • 删除成功，并且有当前key，则调用trigger，触发effect。

  • 返回删除是否成功的结果。

    ownKeys

    // @file packages/reactivity/src/baseHandlers.ts
function ownKeys(target: object): (string | number | symbol)[] {
track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
return Reflect.ownKeys(target)
}

    这个函数很简单了就，获取target对象自己的属性key；跟踪获取的轨迹，然后调用Reflect.ownKeys获取结果。

    has

    // @file packages/reactivity/src/baseHandlers.ts
function has(target: object, key: string | symbol): boolean {
const result = Reflect.has(target, key)
if (!isSymbol(key) || !builtInSymbols.has(key)) {
  track(target, TrackOpTypes.HAS, key)
}
return result
}
  • 调用Reflect.has获取当前对象是否有当前key；
  • 不是Symbol类型的key，或者不是Symbol本身的属性，调用track跟踪has调用的轨迹。

  • 返回结果，result。

    createSetter

    function createSetter(shallow = false) {
return function set(
  target: object,
  key: string | symbol,
  value: unknown,
  receiver: object
): boolean {
  const oldValue = (target as any)[key]
  if (!shallow) {
    value = toRaw(value)
    if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
      oldValue.value = value
      return true
    }
  } else {}

  const hadKey = isArray(target) && isIntegerKey(key)
      ? Number(key) < target.length
      : hasOwn(target, key)
  const result = Reflect.set(target, key, value, receiver)
  if (target === toRaw(receiver)) {
    if (!hadKey) {
      trigger(target, TriggerOpTypes.ADD, key, value)
    } else if (hasChanged(value, oldValue)) {
      trigger(target, TriggerOpTypes.SET, key, value, oldValue)
    }
  }
  return result
}
}

    函数工厂，根据shallow生成set函数。set函数接受4个参数：target为目标对象；key为设置的属性；value为设置的值；receiver为Reflect的额外参数(如果遇到 setter，receiver则为setter调用时的this值)。

  • 首先获取到oldValue；
  • 如果非浅响应式，也就是正式情况的时候，获取到value的原始对象并赋值给value，如果target对象不是数组且oldValue是ref类型的响应式类型，并且新value不是ref类型的响应式，为oldValue赋值(ref类型的响应式对象，需要为对象的value赋值)。
  • 下面也就是深度响应式的代码逻辑了。
  • 如果是数组并且key是数字类型的，则直接判断下标，否则调用hasOwn获取，是否包含当前key => hadKey;
  • 调用Reflect.set进行设置值；
  • 如果目标对象和receiver的原始对象相等，则hadKey，调用trigger触发add操作；否则，调用trigger触发set操作。

  • 把set处理的结果返回，result。

    createGetter

    function createGetter(isReadonly = false, shallow = false) {
return function get(target: Target, key: string | symbol, receiver: object) {
  if (key === ReactiveFlags.IS_REACTIVE) {
    return !isReadonly
  } else if (key === ReactiveFlags.IS_READONLY) {
    return isReadonly
  } else if (
    key === ReactiveFlags.RAW &&
    receiver === (isReadonly ? readonlyMap : reactiveMap).get(target)
  ) {
    return target
  }

  const targetIsArray = isArray(target)
  if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
    return Reflect.get(arrayInstrumentations, key, receiver)
  }

  const res = Reflect.get(target, key, receiver)

  const keyIsSymbol = isSymbol(key)
  if (
    keyIsSymbol
      ? builtInSymbols.has(key as symbol)
      : key === `__proto__` || key === `__v_isRef`
  ) {
    return res
  }

  if (!isReadonly) {
    track(target, TrackOpTypes.GET, key)
  }

  if (shallow) {
    return res
  }

  if (isRef(res)) {
    const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
    return shouldUnwrap ? res.value : res
  }

  if (isObject(res)) {
    return isReadonly ? readonly(res) : reactive(res)
  }

  return res
}
}

    函数工厂，根据shallow生成get函数。get函数接受3个参数：target为目标对象；key为设置的属性；receiver为Reflect的额外参数(如果遇到 setter，receiver则为setter调用时的this值)。

  • 如果key是__v_isReactive，则直接返回!isReadonly，通过上面的图可得知，reactive相关的调用createGetter，传递的是false，也就是会直接返回true；
  • 如果key是__v_isReadonly，则直接返回isReadonly，同样的通过上面的图可以得知，readonly相关的调用createGetter，传递的是true，也就是会直接返回true；
  • 如果key是__v_raw并且receiver等于proxyMap存储的target对象的proxy，也就是获取原始对象，则直接返回target；
  • 如果是数组的话，则会走自定义的方法，arrayInstrumentations；arrayInstrumentations是和Vue2中对数组的改写是一样的逻辑；
  • 下面会对key进行判断，如果Symbol对象并且是Set里面自定义的方法；或者key为__proto__或__v_isRef，则直接把Reflect.get(target, key, receiver)获取到的值直接返回；
  • 如果非只读情况下，调用track跟踪get轨迹；
  • 如果是shallow，非深度响应式，也是直接把上面获取到的res直接返回；
  • 如果是ref对象，则会调用.value获取值进行返回；
  • 剩下的情况下，如果得到的res是个对象，则根据isReadonly调用readonly或reactive获取值，进行返回；

  • 最后有一个res保底返回；

    collectionHandler：

    Vue3源码分析之compositionApi_第4张图片
    来看下createInstrumentationGetter的源码，上面图中三个都是调用此方法生成对应的处理对象。

    function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
const instrumentations = shallow
  ? shallowInstrumentations
  : isReadonly
    ? readonlyInstrumentations
    : mutableInstrumentations

return (
  target: CollectionTypes,
  key: string | symbol,
  receiver: CollectionTypes
) => {
  if (key === ReactiveFlags.IS_REACTIVE) {
    return !isReadonly
  } else if (key === ReactiveFlags.IS_READONLY) {
    return isReadonly
  } else if (key === ReactiveFlags.RAW) {
    return target
  }

  return Reflect.get(
    hasOwn(instrumentations, key) && key in target
      ? instrumentations
      : target,
    key,
    receiver
  )
}
}

    上面createInstrumentationGetter函数根据isReadonly和shallow返回一个函数；

  • 根据isReadonly和shallow，获取到对应的instrumentations；此对象包含了对集合操作的所有方法；
  • 然后就把下面的函数进行了返回，createInstrumentationGetter相当于是一个闭包；
  • 返回的函数里面在执行调用的时候，会先对key进行判断，如果访问的是Vue的私有变量，也就是上面的__v_isReactive、__v_isReadonly、__v_raw等，会直接给出不同的返回；
  • 如果不是Vue的上面的三个私有变量，则会调用Reflect.get来获取对象的值；instrumentations，也就是重写的方法集合，不在此集合里面的，则会直接调用target自己的方法。

reactive完结

至此，reactive文件里面的这些方法咱们都梳理了一遍，简单的做了源码的分析和解读，感兴趣的读者可以深入源码研究下Vue中为何这样实现。

Refs

接下来我们将开始对ref及其附属方法的使用和讲解。

ref

首先，咱们对ref进行讲解，官网给出的解释是：接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。

先来看下ref的使用。

const {ref} = Vue;

const app = Vue.createApp({});
app.component('TestComponent', {
    setup(props) {
        const count = ref(0)
        const obj = ref({number: 10})
        const change = function(){
            count.value++;
            obj.value.number++
        }

        return {
            count,
            obj,
            change
        }
    },
    template: `
        

            
count:{{count}}

            
number:{{obj.number}}

            
        

    `
})
app.mount('#demo')

上面是ref的使用，可以看到ref接受的是一个普通类型的值或者是一个对象，Vue官网给出的例子是不包含传递对象的，其实这也就是Vue不提倡使用ref来响应式一个对象，如果是对对象的响应式，Vue还是提倡使用上面reactive来实现；第二个需要注意点在于template中对ref对象的引用是不需要加上value属性来获取值，如上ref对象count在js中需要count.value,但是在template种只需count即可；

来看下ref的源码实现

// @file packages/reactivity/src/ref.ts
export function ref(
  value: T
): T extends Ref ? T : Ref>
export function ref(value: T): Ref>
export function ref(): Ref
export function ref(value?: unknown) {
  return createRef(value)
}

function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

class RefImpl {
  private _value: T

  public readonly __v_isRef = true

  constructor(private _rawValue: T, private readonly _shallow = false) {
    this._value = _shallow ? _rawValue : convert(_rawValue)
  }

  get value() {
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
  }

  set value(newVal) {
    if (hasChanged(toRaw(newVal), this._rawValue)) {
      this._rawValue = newVal
      this._value = this._shallow ? newVal : convert(newVal)
      trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal)
    }
  }
}

const convert = (val: T): T =>
  isObject(val) ? reactive(val) : val
  
export const hasChanged = (value: any, oldValue: any): boolean =>
  value !== oldValue && (value === value || oldValue === oldValue)

上面是按照运行轨迹来看的Vue3中ref的源码部分；根据ref的声明可以看到ref接受任何参数，返回类型为Ref对象，内部调用的是createRef；

  • createRef函数内部会先对value进行判断，如果已经是ref对象的话，直接返回当前value，否则就调用new RefImpl来生成ref对象进行返回。
  • constructor里面会判断是否是浅响应_shallow，浅的话，直接返回_rawValue，否则调用convert来返回；可以看到除了私有属性_value外，还有一个__v_isRef的只读属性为true；
  • convert里面则会对val进行判断了，对象则调用reactive，否则直接返回val，此处也就可以看到上面ref也可以接受对象作为参数的缘由了。
  • get里面会跟踪调用轨迹，track；返回当前value；

  • set里面会调用hasChanged判断是否发生了改变，此处会对NaN进行check，因为NaN与啥都不相等；设置新的值，同时调用trigger触发set调用。

    isRef

    isRef很明显就是判断是否是ref对象的方法。使用如下：

    const count = ref(0)
const is = isRef(count)
const is2 = isRef(10)

    来看下源码，源码也很简单：

    export function isRef(r: Ref | unknown): r is Ref
export function isRef(r: any): r is Ref {
return Boolean(r && r.__v_isRef === true)
}

    此处就使用到了RefImpl里面那个只读属性了，判断__v_isRef是否为true就可以了。

    shallowRef

    官网给出的解释：创建一个 ref，它跟踪自己的 .value 更改，但不会使其值成为响应式的。
    shallowRef的源码如下：

    export function shallowRef(
value: T
): T extends Ref ? T : Ref
export function shallowRef(value: T): Ref
export function shallowRef(): Ref
export function shallowRef(value?: unknown) {
return createRef(value, true)
}

    shallowRef与ref的调用流程是一样的，不过是多了个参数，导致_shallow为true，就在RefImpl里面调用时，直接返回了当前value，而不会进行到convert函数。

    unRef

    官网解释：如果参数为 ref，则返回内部值，否则返回参数本身。 源码如下：

    export function unref(ref: T): T extends Ref ? V : T {
return isRef(ref) ? (ref.value as any) : ref
}

    确实如官网所说，就一行代码，ref对象则返回其value，否则直接返回ref。

    triggerRef

    官网给出的解释：手动执行与 shallowRef 关联的任何效果。 ，比较模糊，通俗点就是手动触发一次effect的调用；
    看下使用：

    const count = ref(0)
const change = function(){
  count.value++;
  triggerRef(count)
}
const shallow = shallowRef({
  greet: 'Hello, world'
})
watchEffect(() => {
  console.log(count.value)
  console.log(shallow.value.greet)
})
shallow.value.greet = 'Hello, universe'

    源码如下：

    export function triggerRef(ref: Ref) {
trigger(ref, TriggerOpTypes.SET, 'value', __DEV__ ? ref.value : void 0)
}

toRef

官网给出的解释是：可以用来为源响应式对象上的 property 属性创建一个 ref。然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接。 简单描述就是为对象的一个属性增加一个引用，这个引用可以随意使用，响应式不变。来看下源码：


export function toRef(
  object: T,
  key: K
): Ref {
  return isRef(object[key])
    ? object[key]
    : (new ObjectRefImpl(object, key) as any)
}

class ObjectRefImpl {
  public readonly __v_isRef = true

  constructor(private readonly _object: T, private readonly _key: K) {}

  get value() {
    return this._object[this._key]
  }

  set value(newVal) {
    this._object[this._key] = newVal
  }
}

这部分的代码比较简单，也比较容易读懂，和上面RefImpl一样的是都增加了一个只读的__v_isRef属性。

toRefs

官网对toRefs给出的解释是：将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref。 通俗点描述就是把响应式对象的每个属性，都变成ref对象。来看下源码：

export function toRefs(object: T): ToRefs {
  if (__DEV__ && !isProxy(object)) {
    console.warn(`toRefs() expects a reactive object but received a plain one.`)
  }
  const ret: any = isArray(object) ? new Array(object.length) : {}
  for (const key in object) {
    ret[key] = toRef(object, key)
  }
  return ret
}

这里尤为要求是一个响应式的对象，非响应式对象还会打印警告。for循环调用上面讲到的toRef函数，把对象里面的每个属性都变为ref对象。

customRef

官网给出的解释是：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数 来看下customRef的源码：

class CustomRefImpl {
  private readonly _get: ReturnType>['get']
  private readonly _set: ReturnType>['set']

  public readonly __v_isRef = true

  constructor(factory: CustomRefFactory) {
    const { get, set } = factory(
      () => track(this, TrackOpTypes.GET, 'value'),
      () => trigger(this, TriggerOpTypes.SET, 'value')
    )
    this._get = get
    this._set = set
  }

  get value() {
    return this._get()
  }

  set value(newVal) {
    this._set(newVal)
  }
}

export function customRef(factory: CustomRefFactory): Ref {
  return new CustomRefImpl(factory) as any
}

相对应的，使用的时候，接受的是一个factory，factory是一个函数，参数为track和trigger，同时factory的返回须包含两个函数，一个为get，一个为set。track就是effect的track，trigger也是effect的trigger；来看下使用：

const {customRef} = Vue;

const app = Vue.createApp({});
function useDebouncedRef(value, delay = 200) {
    let timeout
    return customRef((track, trigger) => {
        return {
            get() {
                track()
                return value
            },
            set(newValue) {
                clearTimeout(timeout)
                timeout = setTimeout(() => {
                    value = newValue
                    trigger()
                }, delay)
            }
        }
    })
}

app.component('TestComponent', {
    setup(props) {
        return {
            text: useDebouncedRef('hello')
        }
    },
    template: `
        

            
        

    `
})

app.mount('#demo')

上面是customRef的使用的例子，和官网的例子是一样的，能够实现防抖，同时也能够显式的控制什么时候调用track来跟踪和什么时候来调用trigger来触发改变。

Refs完结

上面我们对refs里面的几种方法做了源码的解读和部分的api是如何使用的，关于Vue3为何提供了两种响应式的方案：reactive和Refs，这其实就和代码风格有关系了，有的同学习惯使用对象，而有的同学习惯使用变量，Vue3为这两种方案都提供了，想用哪个用哪个。

effect

其实可以看到上面好多地方都用到了这个方法，包括effect、track、trigger等都是effect里面提供的方法，effect里面提供的方法属于Vue的内部方法，不对外暴露。下面我们挨个来看看这部分的源码，

isEffect

isEffect是为判断是否是有副作用的函数。来看下源码：

export function isEffect(fn: any): fn is ReactiveEffect {
  return fn && fn._isEffect === true
}

可以看到上面的判断，就是对函数的_isEffect进行判断，非常简单。

effect

effect作为Vue2和Vue3中核心的部分，都有这个的概念，重中之重，来看下这部分的源码：

export function effect(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect {
  if (isEffect(fn)) {
    fn = fn.raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
}

function createReactiveEffect(
  fn: () => T,
  options: ReactiveEffectOptions
): ReactiveEffect {
  const effect = function reactiveEffect(): unknown {
    if (!effect.active) {
      return options.scheduler ? undefined : fn()
    }
    if (!effectStack.includes(effect)) {
      cleanup(effect)
      try {
        enableTracking()
        effectStack.push(effect)
        activeEffect = effect
        return fn()
      } finally {
        effectStack.pop()
        resetTracking()
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  } as ReactiveEffect
  effect.id = uid++
  effect._isEffect = true
  effect.active = true
  effect.raw = fn
  effect.deps = []
  effect.options = options
  return effect
}

let shouldTrack = true
const trackStack: boolean[] = []

export function pauseTracking() {
  trackStack.push(shouldTrack)
  shouldTrack = false
}

export function enableTracking() {
  trackStack.push(shouldTrack)
  shouldTrack = true
}

export function resetTracking() {
  const last = trackStack.pop()
  shouldTrack = last === undefined ? true : last
}

如上，就是effect部分的源码。顺着执行顺序一步步走下来。

  • 调用方调用effect函数，参数为函数fn，options(默认为{})；
  • 判断是否已经是effect过的函数，如果是的话，则直接把原函数返回。
  • 调用createReactiveEffect生成当前fn对应的effect函数，把上面的参数fn和options直接传进去；
  • 判断options里面的lazy是否是false，如果不是懒处理，就直接调用下对应的effect函数；
  • 返回生成的effect函数。

接下来看下createReactiveEffect函数的调用过程。

  • 为effect函数赋值，暂时先不考虑reactiveEffect函数内部到底干了什么，只要明白创建了个函数，并赋值给了effect变量。
  • 然后为effect函数添加属性：id, _isEffect, active, raw, deps, options
  • 把effect返回了。

下面我们回到上面非lazy情况下，调用effect，此时就会执行reactiveEffect函数。

  • 首先判断了是否是active状态，如果不是，说明当前effect函数已经处于失效状态，直接返回return options.scheduler ? undefined : fn()。
  • 查看调用栈effectStack里面是否有当前effect，如果无当前effect，接着执行下面的代码。
  • 先调用cleanup，把当前所有依赖此effect的全部清掉，deps是个数组，元素为Set，Set里面放的则是ReactiveEffect，也就是effect；
  • 把当前effect入栈，并将当前effect置为当前活跃effect->activeEffect；后执行fn函数；
  • finally，把effect出栈，执行完成了，把activeEffect还原到之前的状态；
  • 其中涉及到调用轨迹栈的记录。和shouldTrack是否需要跟踪轨迹的处理。

stop

stop方法是用来停止当前effect的。属于Vue3内部方法，来看下源码：

export function stop(effect: ReactiveEffect) {
  if (effect.active) {
    cleanup(effect)
    if (effect.options.onStop) {
      effect.options.onStop()
    }
    effect.active = false
  }
}
  • 调用cleanup清空掉，和上面调用cleanup一样。
  • 执行当前effect.options.onnStop钩子函数。
  • 把当前effect的active状态置为false。

结言

本篇文章主要围绕reactivity文件夹里面提供给大家使用的compositionApi的部分进行了相对应的使用和源码解读，大家感兴趣的还是去读下这部分的源码，毕竟这是Vue3新出的功能，越来越react的一步......

欢迎大家一起来讨论Vue3，刚出的版本，带来了新的同时，肯定也会带着意想不到的惊喜(bug)，让我们发现它，解决掉它，也是一种进步，也是防止自己踩坑的好方法。

Vue3源码分析之compositionApi_第5张图片

你可能感兴趣的:(Vue3源码分析之compositionApi)

  • 《昼颜》里的日本女人：相遇要万种风情，分手要残忍绝情 迷影咖啡
    作者：迷之菌子神奇菇迷影咖啡：一本正经做烘焙，胡说八道聊电影漫天萤火虫消散之时良宵就将过去，人们也说含苞待放的花蕾总会开了又谢，因紧紧相拥而面红耳赤的躯体，便是我们经历过这热爱的证明。夫妻关系介绍《昼颜》是2014年电视剧《昼颜：工作日下午三点的恋人们》的续集，故事发在电视剧情节结束的三年后，讲述了已经恢复独身的纱和偶然与曾经的出轨对象北野重逢后再次陷入感情漩涡的故事。《昼颜》制作灵感源自利佳子在
  • 迎接2019 唯有杜康1994
    告别2018这一年是机遇与挑战，痛苦与喜悦，失去与收获的一年一月:收获了第一份爱情，开始真正想去了解一个人三月:对工作有了更深入的认识，靠自己的力量完成晋升五月:搬家，住进了自己理想的公寓，一间属于自己的屋子。满地的书六月:外调广州，升经理，有了自己的第一个团队。七月:怀着自我否定，第一次完成了部门任务八月:第一个员工流失，痛哭不已明白无不散之筵席九月:员工陆续离开，经济是一切的根本。十月:陪员工
  • 亲子日记之祝姑姥姥生日快乐（282） 冰心雨露_d504
    2021年7月18日，周日，晴周日上班的不上班，上学的不上学，全家都属于休息状态，洗衣做饭是上午的主要任务，中午休息一会儿，下午比较晚了出去给梦怡买了二年级上册的口算题卡，然后去参加姑姑的生日聚餐，本来姑姑应该是周一生日，因为周一都要上班，就提前到周日过了，说是过生日其实就是想借此机会一家人聚聚，毕竟平常都忙，没有时间聚在一起，梦怡还给姑姥姥做了生日贺卡，虽然长相一般，重在心意。生日快乐
  • android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android自定义曲线图
    个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化
  • 信任 饮冰伊乔
    随着社会的发展，微信和支付宝交易给人们带来了极大的方便，越来越多的人出门都只选择拿一部手机即可，方便安全，可昨天我就遇到了一件比较尴尬的事。昨天傍晚，我从公司出来，感觉有点饿，决定索性吃了饭再回去，来到去过几次的一个店里，如往常一样叫了餐，当时店里吃饭的不多，老板麻利的先去做了，正要扫微信付账的时候发现手机没电了，迷之尴尬，我只好跟老板说不用做了，手机没电了，我身上又没现金，付不了帐了。老板娘很热
  • Django之Debug篇 菜鸟之编程 Djangodjangopython后端
    一、DebugToolBar基本使用1.1、概述Django框架的调试工具栏使用django-debug-toolbar库，是一组可配置的面板，显示有关当前请求/响应的各种调试信息，点击时，显示有关面板内容的更多详细信息。官方文档：DjangoDebugToolbar—DjangoDebugToolbar4.3.0documentation1.2、安装pipinstalldjango-debug-
  • 以高质量调查研究助力组织工作提质增效 木同木同
    近日，中共中央办公厅印发了《关于在全党大兴调查研究的工作方案》(后简称《方案》），要求各地区各部门结合实际认真贯彻落实。调查研究是我们党的传家宝，是谋事之基、成事之道。组织部门作为党管干部的核心部门，肩负着管党员、管干部、管人才的重要职责，调查研究更是把握组织工作规律、破解组织工作难题的重要办法。要用好调查研究这一法宝，把准政治方向，贯穿问题导向，坚持实事求是，以高质量调查研究助力组织工作提质增效
  • 地低为海人低为王 缘梦草
    地低为海，人低为王。低，高之基，高，低之顶。谦虚才能收益，咄咄逼人会招损。高粱熟了，头会低下。受益反而会深藏不露。捧人之术，把人捧高，然后控制。受控之人，大都是虚荣心作祟。活成别人想象中的样子，像别人想象中那么有面子的活着是悲哀的。穷不可怕，怕的是虚荣心。当你好面子，你就会被控制。一旦受虚荣心控制，你不得不谨小慎微的维护面子，付出多余的能量，希望得到别人的一句赞。面子就是金子打造的牢笼，让你在赞美
  • 计划比盲目做重要 一祉微笑
    坚持分享第99天。一次次会议提醒着老师们假期余额不足，马上面临停机状态。50多天掐指而过，想想放假时的计划，对照如今的完成情况，感觉差太远。想着好好看书，如今50多天过去了第6本还处在未完待续状态；想着假期好好陪陪孩子，在玩中学一些知识，如今想想，孩子学的真不多；想着暑假坚持跑步，有时还是容易给自己找借口，休息三两天。给这个假期一个综合评价，只能说只完成了计划的百分之五六十。想想为什么临近开学没达
  • 081天 约柜失而复得 宁宁2018
    撒迦利亚书4:6他对我说：“这是耶和华指示所罗巴伯的。万军之耶和华说：‘不是倚靠势力，不是倚靠才能，乃是倚靠我的灵方能成事。’
  • 《金文成〈正蒙〉日记124。2020-11-9》 金吾生
    《金文成〈正蒙〉日记124。2020-11-9》今天是庚子丁亥丙子，九月廿四，2020年11月9日星期一。作者篇7【舜之孝，汤、武之武，虽顺逆不同，其为不幸均矣。】船山讲解说，顺，指的是舜的父亲最终受到感化，转变了态度，结局圆满之事；逆，指的是＂桀放、纣诛＂，即，商汤放桀，周武诛纣，都是采用暴力，不是感化方式，所以是逆。顺与逆，都是为了解决弊政，然其差异之大如此，然而，无论圆满还是遗憾，其实他们都
  • 如何把大象装进冰箱的思考 210624 大丁_初心生活
    央视春晚曾有个小品，宋丹丹问赵本山，如何把大象装进冰箱。赵本山说不知道。宋丹丹得意地说，第一步，把冰箱门打开。第二步，把大象装进去。第三步，把冰箱门关上。我相信很多人看了都是一笑了之，我们也从潜意识上给出了否定的答案。樊登老师给出了不一样的解读，他认为这其实是解决问题的经典方法。“把大象装冰箱”，目标十分明确，宋丹丹给出的执行步骤也十分清晰。可赵本山却不会？难道赵本山不知道这三个步骤吗？肯定知道。
  • 道德经第三十四章 套马地汉纸
    道德经第三十四章原文：大道泛兮，其可左右！万物恃之而生，而不辞，功成不名有。爱养万物而不为主，常无欲，可名于小；万物归焉而不为主，可名为大。是以圣人终不为大，故能成其大。译文：大道广泛流行，无所不到。万物依赖它生长而不推辞，有所成就而不自以为有功。养育万物而不自以为主，永远没有私欲，可以说是渺小得很，所以可称它为“小”；物归附于它而它不自以为主宰，可以说极其伟大，所以可称它为“大”。由于它不自以为
  • Linux学习系列之vim编辑器（一） llibertyll linux学习
    vi编辑器的操作模式输入模式—aio等—>命令模式<—：键—末行模式从输入/末行模式切换到命令模式都是需要按ESC键注:a光标后输入，i光标前输入，o直接向下加一行输入，O向上加一行输入在vi编辑器中光标的移动（命令行模式下）键组合（命令）光标的移动$光标移动到当前行的结尾0（零）光标移动到当前行的开始GG光标移动到最后一行gg光标移动到第一行在命令行模式下删除与复制的操作键组合（命令）含义dd删
  • 6/21 最后的编织之观后感 ChereAlicia
    今天看了7分钟震撼人心之短篇有种当局者迷旁观者清的感觉在外人眼里看来已经足够但自有人深陷其中无法自拔而那个人很有可能是自己超脱物质寻求自己真正想要的方能得到内心的平息和安宁图片发自App
  • 每天学点成语 余子烨
    1、口诀：功败垂成未成功，不以为然不赞同；火中取栗被利用，罚不当罪处罚重；2、解释：功败垂成：事情接近成功的时候却遭到了失败。出自：《三国志·杨阜传》：“弃垂成之功，陷不义之名，阜以死守之。”不以为然：不认为是对的。表示不同意或否定。出自：宋·苏轼《再乞罢详定役法状》：“右臣先曾奏论前衙一役，只当招募，不当定差，执政不以为然。”火中取栗：一只猴子和一只猫看见炉火中烤着栗子，猴子叫猫去偷，猫用爪子从
  • 2023-11-07 碎碎念念的每一天
    忽然开始自卑了，感觉自己无论各个方面都太平平，读书不多，家务做不好，体重控制的不好，早起也困难，起来又不知道该做什么，没有一个可以为之奋斗的目标，也没有很好的交际圈，感觉自己就像一只在笼子里的鸟，想飞也飞不高……我想改变这样的现状，可该如何呢？其实都是我不够努力，没有争分夺秒，没有自律，这些都是我未来跟人拉开差距的原因，所以，我不应该只是自卑，自卑过头会变成焦虑，我应该努力去改变，哪怕改变一小点，
  • stm32之GPIO寄存器 luofengmacheng 嵌入式stm32嵌入式硬件单片机
    文章目录1背景2GPIO寄存器的类型2.1端口配置寄存器2.2设置/清除寄存器和位清除寄存器3总结1背景C51单片机在进行数据的输入输出时，是直接操作与外部引脚关联的内部寄存器，例如，当设置P2_1为0时，就是将外部引脚的P21引脚设置为低电平，当读取P2_1时，就是读取P21的电平。与之类似，stm32芯片内部也有很多用于输入输出的寄存器，这些寄存器也是用于操作外部引脚，但是比C51单片机复杂很
  • 《老子》笔记19 2018-10-28 海上明月共
    第二十二章[原文]曲则全，枉则直，洼则盈，敝则新，少则得，多则惑。是以圣人抱一为天下式。不自见，故明；不自是，故彰，不自伐，故有功；不自矜，故长。夫唯不争，故天下莫能与之争。古之所谓"曲则全"者，岂虚言哉？诚全而归之。[译文]委曲便会保全，屈枉便会直伸；低洼便会充盈，陈旧便会更新；少取便会获得，贪多便会迷惑。所以有道的人坚守这一原则作为天下事理的范式，不自我表扬，反能显明；不自以为是，反能是非彰明
  • 爱心账户之存钱日记11.20 静_d595
    新沙发终于到了，满心欢喜，可旧沙发的处理又是个头疼的问题，免费送都没有人要。临时想起来公司那个收垃圾的，看看付费能不能拉走。对方说随便给点都行，我又拿不准，于是就想说88把。对方说给两包烟就行了，我说还是给钱吧，也不想欠人情。如果请专门搬东西的估计得200加了，还算是比较顺利，刚好想到他。选了12元存进我的爱心账户！
  • 大话设计模式之工厂模式 码农客栈 设计模式开发语言
    工厂模式（FactoryPattern）是一种创建型设计模式，它提供了一种创建对象的最佳方式，而无需指定将要创建的对象的确切类。通过使用工厂模式，我们可以将对象的创建和使用分离，从而使代码更具灵活性和可维护性。在工厂模式中，通常会有三种角色：工厂接口（FactoryInterface）：声明了一个用于创建对象的接口，这样所有具体工厂类都必须实现该接口。具体工厂（ConcreteFactory）：实
  • reactive和ref的异同、toRef和toRefs的使用 Niucode vue3vue.js前端javascript
    一、reactive和ref有了reactive为什么还要ref？ref处理起基本数据类型来更加的方便快捷，性能要更好。ref内部值的变化只会触发订阅它的副作用函数（effect）更新，而reactive（Proxy）内部对象的任何属性变化都会触发整个对象的重新渲染。相同点：都是Vue3提供的用于创建响应式数据的函数；在组件中都能够触发视图更新，实现数据的双向绑定。不同点：数据类型：reactiv
  • 大话设计模式之代理模式 码农客栈 设计模式代理模式
    代理模式（ProxyPattern）是一种结构型设计模式，它允许通过代理对象控制对另一个对象的访问。代理对象充当客户端和实际对象之间的中介，客户端通过代理对象间接访问实际对象，从而可以在访问控制、缓存、延迟加载等方面提供额外的功能。在代理模式中，通常会有三种角色：Subject（抽象主题）：声明了真实对象和代理对象的共同接口，这样在任何使用真实对象的地方都可以使用代理对象。RealSubject（
  • 【1.1 编程基础之输入输出】09. 字符菱形 青少年编程小助手_Python Openjudge题目解析算法青少年编程电子学会等级考试gesp
    09:字符菱形总时间限制:1000ms内存限制:65536kB描述给定一个字符，用它构造一个对角线长5个字符，倾斜放置的菱形。输入输入只有一行，包含一个字符。输出该字符构成的菱形。样例输入*样例输出*************参考程序（1）C语言#includeintmain(){charc;scanf("%c",&c);printf("%c\n",c);printf("%c%c%c\n",c,c,
  • 剩28天19年12月3日星期二 晴朗 岁月流转足迹可循
    图片发自App图片发自App图片发自App图片发自App昨天升完旗，去操场上走走，才发现霜是如此之重，脚踩上去，都有凝粒！天是越来越冷了！不过晴空净爽，空气清冽，一呼一吸之间很是舒服！中午写了几个大字，童爸说笔画还有些软，一语中的。需用心提升，贵在坚持坚持吧！下午做了张丽华的顺车，捎我到陈仓元，再坐了3路到西关，费时50分钟！晚上吃完饭送童去学校，到八点半下楼运动半小时，跳了500个绳，弯弯腰！感
  • 很久以前的故事 138 余间上古
    偶遇机械人大公子镇静下来继续说：“你可知所谓的拍卖会是要杀掉一些人，某些人斗不过一个映山城，天下虽大，从此后恐无容身之地。”他语气一缓：“如果你肯联手，我不但不计较你今日之举，杀手阁随时恭候大驾光临，从此多了一个方便之门。”“我只是寻找路彦而已......”薛莹笑道直呼其名：“剑二，用尽心思糊弄别人，独行者经常内斗再正常不过！你不过是一个道修，踏入神明之境而已，理解不到独行者的真谛……”薛莹言尽意
  • 因你 秋之枫520
    空气中，咖啡味弥散那是，一种我爱的香醇与你分别后，我的咖啡再没加过冰糖粉与牛奶品着苦涩，如同我生命的味道你若来了，倒给你半杯加糖加奶，空气多了两份香甜若你走了，我又会是一满杯一切如初，黑夜依旧宁静只有醇香陪着，久久不散因你，咖啡才会有苦有甜因你，我的小诗才有了主角因你，黑夜冲了杯喝不尽的咖啡因你，黑夜有了写不完的零碎小诗因你，我爱上了黑夜的这份宁静秋之枫。（原作）
  • 湘容儿成长日记第744天之只要不放弃，终究会遇见 墨mo晴
    2020年10月30号亲子共读地點：床边亲子共读时间：晚上亲子共读时长：35分钟亲子共读内容：芭比姐妹与小马、芭比之完美圣诞、三字经045-047今天收获还是很大，因为我解决了一个一直没有解决的问题。那就是我的手机内存。我的手机是64G的，界面上看到的软件又没有太多的东西被我删了，又删手机里面的图片，竟然没有50张。可就是经常的提醒我内存不足，内存不足。我和同事一起探讨过，我和我先生说过，可是终究
  • 零基础机器学习(5)之线性回归模型的性能评估 一只特立独行猪 机器学习机器学习线性回归人工智能
    文章目录线性回归模型的性能评估1.举例1-单一特征2.举例2-多特征线性回归模型的性能评估评估线性回归模型时，首先要建立评估的测试数据集（测试集不能与训练集相同），然后选择合适的评估方法，实现对线性回归模型的评估。回归任务中最常用的评估方法有均方误差、均方根误差和预测准确率（确定系数）。1.举例1-单一特征分别对两个模型进行评估，输入的测试集如表所示。面积/（m2）售价/（万元）面积/（m2）售价
  • 【设计模式】Java 设计模式之桥接模式（Bridge） 新手村长 Java设计模式设计模式java桥接模式
    桥接模式（BridgePattern）是结构型设计模式的一种，它主要解决的是抽象部分与实现部分的解耦问题，使得两者可以独立变化。这种类型的设计模式属于结构型模式，因为该模式涉及如何组合接口和它们的实现。将抽象部分与实现部分分离，使它们都可以独立地变化。一、桥接模式概述桥接模式的主要思想是将抽象与实现进行解耦，使得二者可以独立进行变化。在桥接模式中，抽象部分和实现部分被分离出来，抽象部分定义了一个抽
  • java短路运算符和逻辑运算符的区别 3213213333332132 java基础
    /* * 逻辑运算符——不论是什么条件都要执行左右两边代码 * 短路运算符——我认为在底层就是利用物理电路的“并联”和“串联”实现的 * 原理很简单，并联电路代表短路或（||），串联电路代表短路与（&&）。 * * 并联电路两个开关只要有一个开关闭合，电路就会通。 * 类似于短路或（||），只要有其中一个为true（开关闭合）是
  • Java异常那些不得不说的事 白糖_ javaexception
    一、在finally块中做数据回收操作 比如数据库连接都是很宝贵的，所以最好在finally中关闭连接。 JDBCAgent jdbc = new JDBCAgent(); try{ jdbc.excute("select * from ctp_log"); }catch(SQLException e){ ... }finally{ jdbc.close();
  • utf-8与utf-8(无BOM)的区别 dcj3sjt126com PHP
    BOM——Byte Order Mark，就是字节序标记   在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输 字符"ZERO WIDTH NO-BREAK SPACE"。这样如
  • JAVA Annotation之定义篇 周凡杨 java注解annotation入门注释
        Annotation: 译为注释或注解 An annotation, in the Java computer programming language, is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, pa
  • tomcat的多域名、虚拟主机配置 g21121 tomcat
    众所周知apache可以配置多域名和虚拟主机，而且配置起来比较简单，但是项目用到的是tomcat，配来配去总是不成功。查了些资料才总算可以，下面就跟大家分享下经验。 很多朋友搜索的内容基本是告诉我们这么配置： 在Engine标签下增面积Host标签，如下： <Host name="www.site1.com" appBase="webapps"
  • Linux SSH 错误解析（Capistrano 的cap 访问错误 Permission ） 510888780 linuxcapistrano
    1.ssh -v [email protected] 出现 Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password). 错误 运行状况如下： OpenSSH_5.3p1, OpenSSL 1.0.1e-fips 11 Feb 2013 debug1: Reading configuratio
  • log4j的用法 Harry642 javalog4j
    一、前言：     log4j 是一个开放源码项目，是广泛使用的以Java编写的日志记录包。由于log4j出色的表现，     当时在log4j完成时，log4j开发组织曾建议sun在jdk1.4中用log4j取代jdk1.4 的日志工具类，但当时jdk1.4已接近完成，所以sun拒绝使用log4j，当在java开发中
  • mysql、sqlserver、oracle分页，java分页统一接口实现 aijuans oraclejave
    定义：pageStart 起始页，pageEnd 终止页,pageSize页面容量 oracle分页： 　　　　select * from ( select mytable.*,rownum num from (实际传的SQL) where rownum<=pageEnd) where num>=pageStart sqlServer分页：  
  • Hessian 简单例子 antlove javaWebservicehessian
    hello.hessian.MyCar.java package hessian.pojo; import java.io.Serializable; public class MyCar implements Serializable { private static final long serialVersionUID = 473690540190845543
  • 数据库对象的同义词和序列 百合不是茶 sql序列同义词ORACLE权限
    回顾简单的数据库权限等命令; 解锁用户和锁定用户 alter user scott account lock/unlock; //system下查看系统中的用户 select * dba_users; //创建用户名和密码 create user wj identified by wj; identified by //授予连接权和建表权 grant connect to
  • 使用Powermock和mockito测试静态方法 bijian1013 持续集成单元测试mockitoPowermock
            实例： package com.bijian.study; import static org.junit.Assert.assertEquals; import java.io.IOException; import org.junit.Before; import org.junit.Test; import or
  • 精通Oracle10编程SQL(6)访问ORACLE bijian1013 oracle数据库plsql
    /* *访问ORACLE */ --检索单行数据 --使用标量变量接收数据 DECLARE v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; BEGIN select ename,sal into v_ename,v_sal from emp where empno=&no; dbms_output.pu
  • 【Nginx四】Nginx作为HTTP负载均衡服务器 bit1129 nginx
     Nginx的另一个常用的功能是作为负载均衡服务器。一个典型的web应用系统，通过负载均衡服务器，可以使得应用有多台后端服务器来响应客户端的请求。一个应用配置多台后端服务器，可以带来很多好处：   负载均衡的好处 增加可用资源 增加吞吐量 加快响应速度，降低延时 出错的重试验机制 Nginx主要支持三种均衡算法： round-robin l
  • jquery-validation备忘 白糖_ jquerycssF#Firebug
    留点学习jquery validation总结的代码：   function checkForm(){ validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID errorElement :"span",// 使用"div"标签标记错误， 默认:&
  • solr限制admin界面访问（端口限制和http授权限制） ronin47 限定Ip访问
    solr的管理界面可以帮助我们做很多事情，但是把solr程序放到公网之后就要限制对admin的访问了。 可以通过tomcat的http基本授权来做限制，也可以通过iptables防火墙来限制。 我们先看如何通过tomcat配置http授权限制。 第一步： 在tomcat的conf/tomcat-users.xml文件中添加管理用户，比如： <userusername="ad
  • 多线程-用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1 bylijinnan java多线程
    public class IncDecThread { private int j=10; /* * 题目:用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1 * 两个问题： * 1、线程同步--synchronized * 2、线程之间如何共享同一个j变量--内部类 */ public static
  • 买房历程 cfyme
        2015-06-21: 万科未来城，看房子   2015-06-26: 办理贷款手续，贷款73万，贷款利率5.65=5.3675   2015-06-27: 房子首付,签完合同   2015-06-28，央行宣布降息 0.25，就2天的时间差啊，没赶上。   首付，老婆找他的小姐妹接了5万，另外几个朋友借了1-
  • [军事与科技]制造大型太空战舰的前奏 comsci 制造
           天气热了........空调和电扇要准备好..........        最近,世界形势日趋复杂化,战争的阴影开始覆盖全世界..........        所以,我们不得不关
  • dateformat dai_lm DateFormat
    "Symbol Meaning Presentation Ex." "------ ------- ------------ ----" "G era designator (Text) AD" "y year
  • Hadoop如何实现关联计算 datamachine mapreducehadoop关联计算
        选择Hadoop，低成本和高扩展性是主要原因，但但它的开发效率实在无法让人满意。     以关联计算为例。     假设：HDFS上有2个文件，分别是客户信息和订单信息，customerID是它们之间的关联字段。如何进行关联计算，以便将客户名称添加到订单列表中？   &nbs
  • 用户模型中修改用户信息时，密码是如何处理的 dcj3sjt126com yii
    当我添加或修改用户记录的时候对于处理确认密码我遇到了一些麻烦，所有我想分享一下我是怎么处理的。 场景是使用的基本的那些(系统自带)，你需要有一个数据表(user)并且表中有一个密码字段(password),它使用 sha1、md5或其他加密方式加密用户密码。 面是它的工作流程: 当创建用户的时候密码需要加密并且保存，但当修改用户记录时如果使用同样的场景我们最终就会把用户加密过的密码再次加密，这
  • 中文 iOS/Mac 开发博客列表 dcj3sjt126com Blog
      本博客列表会不断更新维护，如果有推荐的博客，请到此处提交博客信息。 本博客列表涉及的文章内容支持 定制化Google搜索，特别感谢 JeOam 提供并帮助更新。 本博客列表也提供同步更新的OPML文件（下载OPML文件），可供导入到例如feedly等第三方定阅工具中，特别感谢 lcepy 提供自动转换脚本。这里有导入教程。
  • js去除空格，去除左右两端的空格 蕃薯耀 去除左右两端的空格js去掉所有空格js去除空格
    js去除空格，去除左右两端的空格 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g
  • SpringMVC4零配置--web.xml hanqunfeng springmvc4
    servlet3.0+规范后，允许servlet，filter，listener不必声明在web.xml中，而是以硬编码的方式存在，实现容器的零配置。 ServletContainerInitializer：启动容器时负责加载相关配置 package javax.servlet; import java.util.Set; public interface ServletContainer
  • 《开源框架那些事儿21》：巧借力与借巧力 j2eetop 框架UI
    同样做前端UI，为什么有人花了一点力气，就可以做好？而有的人费尽全力，仍然错误百出？我们可以先看看几个故事。 故事1：巧借力，乌鸦也可以吃核桃 有一个盛产核桃的村子，每年秋末冬初，成群的乌鸦总会来到这里，到果园里捡拾那些被果农们遗落的核桃。 核桃仁虽然美味，但是外壳那么坚硬，乌鸦怎么才能吃到呢？原来乌鸦先把核桃叼起，然后飞到高高的树枝上，再将核桃摔下去，核桃落到坚硬的地面上，被撞破了，于是，
  • JQuery EasyUI 验证扩展 可怜的猫 jqueryeasyui验证
      最近项目中用到了前端框架-- EasyUI，在做校验的时候会涉及到很多需要自定义的内容，现把常用的验证方式总结出来，留待后用。   以下内容只需要在公用js中添加即可。   使用类似于如下： <input class="easyui-textbox" name="mobile" id="mobile&
  • 架构师之httpurlconnection----------读取和发送(流读取效率通用类) nannan408
    1.前言.    如题. 2.代码. /* * Copyright (c) 2015, S.F. Express Inc. All rights reserved. */ package com.test.test.test.send; import java.io.IOException; import java.io.InputStream
  • Jquery性能优化 r361251 JavaScriptjquery
    一、注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery，所有javascript开发过程中，都需要注意，请一定不要定义成如下： $loading = $('#loading'); //这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的 二、请使用一个var来定义变量 如果你使用多个变量的话，请如下方式定义： . 代码如下: var page
  • 在eclipse项目中使用maven管理依赖 tjj006 eclipsemaven
    概览: 如何导入maven项目至eclipse中 建立自有Maven  Java类库服务器 建立符合maven代码库标准的自定义类库 Maven在管理Java类库方面有巨大的优势，像白衣所说就是非常“环保”。 我们平时用IDE开发都是把所需要的类库一股脑的全丢到项目目录下，然后全部添加到ide的构建路径中，如果用了SVN/CVS，这样会很容易就 把
  • 中国天气网省市级联页面 x125858805 级联
    1、页面及级联js <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> &l
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他