【mini-vue学习笔记】reactivity部分

最新推荐文章于 2024-06-14 10:39:01 发布
最新推荐文章于 2024-06-14 10:39:01 发布
阅读量165 收藏
点赞数
文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44296846/article/details/131766015
版权

mini-vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GbHL7vMa-1689576017084)(https://hexo-img.obs.cn-east-3.myhuaweicloud.com/llf/%E6%9C%AA%E5%91%BD%E5%90%8D%E7%BB%98%E5%9B%BE.drawio.png)]

TDD开发流程

TDD（Test-Drive Development）

TDD的开发流程通常包括以下几个步骤：

  1. 编写测试用例：根据需求编写测试用例，测试用例应该覆盖尽可能多的场景，包括正常情况和异常情况。
  2. 运行测试用例：运行测试用例，所有测试用例都应该失败，因为此时还没有编写相关的代码。
  3. 编写代码：编写代码来满足测试用例的要求，代码应该尽可能简单、清晰、可读、可维护，同时也要考虑性能和安全等方面。
  4. 运行测试用例：运行测试用例，所有测试用例都应该通过，否则需要继续修改代码。
  5. 重构代码：对代码进行重构，使其更加简洁、优雅、可读、可维护，同时保证测试用例依然能够通过。
  6. 重复以上步骤：重复以上步骤，直到所有需求都被满足，测试用例覆盖的场景足够多，代码质量达到了预期的要求。

目录

  • 1-16：reactivity
  • 17-？：runtime-core

1.Jest单元测试环境配置

配置jest

添加好开发环境下的tsc支持

yarn add typescript --dev
npx tsc --init

添加测试依赖

yarn add jest --dev
yarn add @type/jest --dev

测试

it('init', () => {
  expect(true).toBe(true);
})

在package.json中添加命令"test":"jest"
yarn test

配置jest的ts支持和babel支持

https://www.jestjs.cn/docs/getting-started

2. effect的实现

什么是effect？

在Vue3中，effect是一个全新的响应式API，用于追踪响应式数据的变化并触发副作用。effect函数接受一个函数作为参数，并返回一个响应式的函数。在effect函数内部可以访问和操作响应式数据，在响应式数据发生变化时，effect会自动重新运行，以触发相应的副作用。

effect函数的基本用法如下：

import { effect } from 'vue';

const count = ref(0);

const stop = effect(() => {
  console.log(count.value);
});

count.value = 1; // 输出：1
count.value = 2; // 输出：2

stop(); // 停止effect函数的运行

在上面的例子中，我们使用effect函数创建了一个响应式函数，当count的值发生变化时，effect函数会自动重新运行，并输出最新的count值。我们还可以通过调用stop函数来停止effect函数的运行。

effect函数还支持配置选项，例如lazy、scheduler、onTrack和onTrigger等，可以用于优化性能或实现高级的响应式功能。例如，lazy选项可以延迟effect函数的运行直到它被访问，scheduler选项可以用于控制effect函数的运行时机，onTrack和onTrigger选项可以用于在effect函数运行前和运行后触发钩子函数。

目标测试

import { reactive } from "../reactive";
import { effect } from "../effect";

describe('effect', () => {
  it('happy path', () => {
    const user = reactive({
      age: 10
    })
    let nextAge;
    effect(() => {
      nextAge = user.age + 1;
    })
    expect(nextAge).toBe(11);

    //update
    user.age++;
    expect(nextAge).toBe(12);
  })
})

需要reactive和effect的实现才能通过这个单元测试，因此需要先实现reactive

代码实现

effect.ts

class ReactiveEffect {
  private _fn: Function
  constructor(fn: Function) {
    this._fn = fn
  }
  run() {
    activeEffect = this;
    this._fn();
  }
}

//track方法用于依赖收集
const targetMap = new Map()
export function track(target: any, key: any) {
  //target -> key -> dep
  let depsMap = targetMap.get(target)
  // 初始化时，depsMap是没有的
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key)
  // 初始化时，dep也是没有的
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep)
  }
  // 将fn存入，因为使用的是set，在多次进行get时，fn不会重复
  dep.add(activeEffect)
}

// trigger方法用于依赖相关的effect触发
export function trigger(target: any, key: any) {
  let depsMap = targetMap.get(target)
  let dep = depsMap.get(key)
  for (const effect of dep) {
    effect.run();
  }
}

// 用于记录当前run的effect，以便track进行获取
let activeEffect: any;

// 接收到这个fn需要进行封装，不能丢掉
export function effect(fn: Function) {
  const _effect = new ReactiveEffect(fn)
  _effect.run();
}

将effect相关的track和trigger放在reactive的get和set方法中，即使有些reactive对象不使用effect，也会不断地调用track和trigger方法，这样的调用是浪费资源的，可能可以改进。

3.reactive的实现

什么是reactive？

在Vue3中，reactive是一个全新的响应式API，用于将一个普通的JavaScript对象转换为响应式的对象。reactive函数接受一个普通的JavaScript对象作为参数，并返回一个响应式的Proxy对象。在响应式对象的属性被读取或修改时，Vue会追踪这些属性的依赖关系，并在发生变化时自动触发更新。

reactive函数的基本用法如下：

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

console.log(state.count); // 输出：0

state.count++;

console.log(state.count); // 输出：1

在上面的例子中，我们使用reactive函数创建了一个响应式对象state，该对象包含一个属性count，初始值为0。我们可以像使用普通对象一样访问和修改state对象的属性，但是Vue会追踪这些属性的依赖关系，并在属性发生变化时自动触发更新。

reactive函数还支持嵌套对象和数组，可以创建复杂的响应式数据结构。

const state = reactive({
  todos: [
    { id: 1, text: 'Learn Vue', done: true },
    { id: 2, text: 'Build an app', done: false }
  ],
  filter: 'all'
});

console.log(state.todos[0].text); // 输出：Learn Vue

state.todos.push({ id: 3, text: 'Test app', done: false });

console.log(state.todos.length); // 输出：3

目标测试

import { reactive } from "../reactive";

describe('reactive', () => {
  it('happy path', () => {
    const original = { foo: 1 };
    const observed = reactive(original);
    expect(observed).not.toBe(original);
    expect(observed.foo).toBe(1);
  })
})

代码实现

reactive.ts

import { track, trigger } from "./effect";

// 核心是通过Proxy进行代理，最重要是知道什么时候该set，什么时候该get
// 依赖的收集和触发是effect的关键
// 使用Proxy记得在tsconfig.json中添加 lib": ["DOM"]
export function reactive(raw: any) {
  return new Proxy(raw, {
    // target指当前对象，key指用户访问的key
    // target:{foo:1},key:foo
    get(target, key) {
      const res = Reflect.get(target, key)
      // ***依赖收集***
      track(target, key)
      return res
    },
    set(target, key, value) {
      const res = Reflect.set(target, key, value);
      // ***触发依赖***
      trigger(target, key);
      return res
    }
  })
}

4. effect返回runner方法

什么是runner方法？

在Vue 3中，effect函数返回一个函数，通常称为“runner函数”。这个函数的作用是执行副作用代码并建立响应式依赖关系。

具体来说，effect函数接受一个函数作为参数，这个函数通常包含一些具有副作用的代码，例如对DOM进行操作、发起网络请求等。当调用effect函数时，它会立即执行这个函数，并收集所有响应式依赖关系，然后返回这个“runner函数”。

当响应式数据发生变化时，Vue会自动重新执行这个“runner函数”，并重新收集响应式依赖关系。这样就可以自动更新与响应式数据相关的DOM、计算属性等内容。

目标测试

it('should return runner when call effect', () => {
    // effect 返回runner
    let foo = 10
    const runner = effect(() => {
      foo++;
      return 'foo'
    })
    expect(foo).toBe(11)
    const r = runner()
    expect(foo).toBe(12)
    expect(r).toBe('foo')
  })

代码实现

effect.ts

class ReactiveEffect {
  private _fn: Function
  constructor(fn: Function) {
    this._fn = fn
  }
  run() {
    activeEffect = this;
    return this._fn();
  }
}

//track方法用于依赖收集
const targetMap = new Map()
export function track(target: any, key: any) {
  //target -> key -> dep
  let depsMap = targetMap.get(target)
  // 初始化时，depsMap是没有的
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key)
  // 初始化时，dep也是没有的
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep)
  }
  // 将fn存入，因为使用的是set，在多次进行get时，fn不会重复
  dep.add(activeEffect)
}

// trigger方法用于依赖相关的effect触发
export function trigger(target: any, key: any) {
  let depsMap = targetMap.get(target)
  let dep = depsMap.get(key)
  for (const effect of dep) {
    effect.run();
  }
}

// 用于记录当前run的effect，以便track进行获取
let activeEffect: any;

// 接收到这个fn需要进行封装，不能丢掉
export function effect(fn: Function) {
  const _effect = new ReactiveEffect(fn)
  _effect.run();
  // 返回run方法作为runner方法，同时bind当前effect处理run方法中this的指向问题
  return _effect.run.bind(_effect)
}

5.effect中scheduler功能的实现

什么是scheduler？

在Vue 3中，effect函数接受一个可选的scheduler函数作为第二个参数。这个scheduler函数的作用是控制何时运行effect函数。

具体来说，**当effect函数中的响应式数据发生变化时，Vue会先调用这个scheduler函数，而不是立即执行effect函数。**要注意的是，effect函数初始化时不会调用scheduler函数。scheduler函数接受一个job函数作为参数，这个job函数就是effect函数中包含副作用代码的函数。scheduler函数可以自由地决定何时运行job函数，例如可以将它放入队列中，以便在下一次事件循环中运行。

通过scheduler函数，我们可以控制effect函数何时运行，以及如何处理响应式更新。这可以帮助我们优化性能，减少不必要的更新操作。

需要注意的是，如果scheduler函数返回一个函数，那么这个函数将会在effect函数被停止时执行。这可以用来执行一些清理操作，例如取消定时器或清除事件监听器等。

需要注意的是，scheduler函数不是必须的，如果不传入scheduler函数，则默认使用Vue内置的scheduler函数来执行effect函数。这个内置scheduler函数会立即执行effect函数，不会延迟到下一次事件循环中。

目标测试

it("scheduler", () => {
    // 1. 通过effect的第二个参数给定的一个scheduler的fn
    // 2. effect方法第一次执行时，还会执行fn
    // 3. 当响应式对象set update不会执行fn而是执行scheduler
    // 4. 当执行runner的时候，会再次执行fn
    let dummy;
    let run: any;
    const scheduler = jest.fn(() => {
      run = runner;
    })
    const obj = reactive({ foo: 1 })
    const runner = effect(() => {
      dummy = obj.foo
    }, { scheduler })
    expect(scheduler).not.toHaveBeenCalled();
    expect(dummy).toBe(1)
    // should be called on first trigger
    obj.foo++
    expect(scheduler).toHaveBeenCalledTimes(1);
    // should not run fn yet
    expect(dummy).toBe(1)
    // manually run
    run();
    // should have run
    expect(dummy).toBe(2)
  })

代码实现

effect.ts

class ReactiveEffect {
  private _fn: Function
  constructor(fn: Function, public scheduler?: any) {
    this._fn = fn
  }
  run() {
    activeEffect = this;
    return this._fn();
  }
}

//track方法用于依赖收集
const targetMap = new Map()
export function track(target: any, key: any) {
  //target -> key -> dep
  let depsMap = targetMap.get(target)
  // 初始化时，depsMap是没有的
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key)
  // 初始化时，dep也是没有的
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep)
  }
  // 将fn存入，因为使用的是set，在多次进行get时，fn不会重复
  dep.add(activeEffect)
}

// trigger方法用于依赖相关的effect触发
export function trigger(target: any, key: any) {
  let depsMap = targetMap.get(target)
  let dep = depsMap.get(key)
  for (const effect of dep) {
    // scheduler方法来控制触发，可以减少不必要的更新，提高性能
    if (effect.scheduler) {
      effect.scheduler()
    } else {
      effect.run();
    }
  }
}

// 用于记录当前run的effect，以便track进行获取
let activeEffect: any;

// 接收到这个fn需要进行封装
export function effect(fn: Function, options: any = {}) {
  const _effect = new ReactiveEffect(fn, options.scheduler)
  _effect.run();
  // 返回run方法作为runner方法，同时bind当前effect处理run方法中this的指向问题
  return _effect.run.bind(_effect)
}

6.effect中stop功能的实现

什么是stop？

在Vue 3中，effect函数返回一个函数，也就是我们通常称为“runner函数”。这个“runner函数”具有一个名为stop的方法，可以用于停止effect函数的响应式依赖关系的收集和更新。

调用stop方法后，与effect函数相关的响应式数据将不再被追踪，不会触发effect函数的更新操作。这可以用于手动停止与某个组件或某段代码相关的响应式依赖关系的更新，以避免不必要的性能损耗。

stop方法不会立即停止effect函数的响应式依赖关系的收集和更新，而是将其标记为“停止”。直到下一次响应式数据发生变化时，才会真正停止响应式依赖关系的更新。这是因为Vue 3的响应式系统是基于异步更新的，需要等待下一次事件循环才能更新。

此外，调用stop方法后，与effect函数相关的响应式数据仍然保持着响应式特性，可以继续被其他effect函数追踪和更新。只有与当前effect函数相关的响应式依赖关系被停止了。

目标测试

it('stop', () => {
  let dummy;
  const obj = reactive({ prop: 1 })
  const runner = effect(() => {
    dummy = obj.prop
  })
  obj.prop = 2
  expect(dummy).toBe(2)
  stop(runner)
  obj.prop = 3
  expect(dummy).toBe(2)
  //stopped effect should still be manually callable
  runner()
  expect(dummy).toBe(3)
})

it('onStop', () => {
  const obj = reactive({ foo: 1 })
  const onStop = jest.fn();
  let dummy;
  const runner = effect(() => {
    dummy = obj.foo
  }, { onStop, })
  stop(runner)
  expect(onStop).toBeCalledTimes(1);
})

代码实现

import { extend } from "../shared"

class ReactiveEffect {
  private _fn: Function
  public deps: Array<Object> = []
  public active: Boolean = true
  public onStop?: () => void
  public scheduler?: Function
  constructor(fn: Function) {
    this._fn = fn
  }
  run() {
    activeEffect = this;
    return this._fn();
  }
  stop() {
    if (this.active) {
      cleanupEffect(this)
      if (this.onStop) {
        this.onStop()
      }
      this.active = false
    }
  }
}

function cleanupEffect(effect: ReactiveEffect) {
  effect.deps.forEach((dep: any) => {
    dep.delete(effect)
  })
}

//track方法用于依赖收集
const targetMap = new Map()
export function track(target: any, key: any) {
  //target -> key -> dep
  let depsMap = targetMap.get(target)
  // 初始化时，depsMap是没有的
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key)
  // 初始化时，dep也是没有的
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep)
  }
  if (!activeEffect) return
  // 将fn存入，因为使用的是set，在多次进行get时，fn不会重复
  dep.add(activeEffect)
  activeEffect.deps.push(dep)
}

// trigger方法用于依赖相关的effect触发
export function trigger(target: any, key: any) {
  let depsMap = targetMap.get(target)
  let dep = depsMap.get(key)
  for (const effect of dep) {
    // scheduler方法来控制触发，可以减少不必要的更新，提高性能
    if (effect.scheduler) {
      effect.scheduler()
    } else {
      effect.run();
    }
  }
}

// 用于记录当前run的effect，以便track进行获取
let activeEffect: ReactiveEffect;

// 接收到这个fn需要进行封装
export function effect(fn: Function, options: any = {}) {
  const _effect = new ReactiveEffect(fn)
  // Object.assign()代替_effect.onStop = options.onStop等等，因为后续会有其他的参数,Object.assign()已经在shared中封装
  // 已有scheduler, onStop
  extend(_effect, options)

  _effect.run();

  const runner: any = _effect.run.bind(_effect)
  runner.effect = _effect
  // 返回run方法作为runner方法，同时bind当前effect处理run方法中this的指向问题
  return runner
}

export function stop(runner: any) {
  runner.effect.stop()
}

7.实现readonly功能

什么是readonly？

在Vue 3中，readonly是一个函数，可以用来创建一个只读的响应式对象。只读的响应式对象是指该对象的属性值不能被修改，仅能被访问和使用。

readonly函数接受一个对象作为参数，返回一个只读的响应式代理对象。这个只读的响应式代理对象具有与原对象相同的属性和方法，但是属性值不能被修改。

只读的响应式对象适用于那些需要保护数据不被修改的场景，例如在组件中使用props传递数据时，可以使用readonly来确保这些数据不被修改。

需要注意的是，只读的响应式对象并不适用于嵌套对象。如果只读的响应式对象中包含其他对象，那么这些对象的属性值仍然可以被修改。如果需要对嵌套对象进行只读保护，可以使用递归的方式对嵌套对象进行处理。

目标测试

import { readonly } from "../reactive"

describe("readonly", () => {
  it("happy path", () => {
    // not set
    const original = { foo: 1, bar: { baz: 2 } }
    const wrapped = readonly(original)
    expect(wrapped).not.toBe(original)
    expect(wrapped.foo).toBe(1)
  })
  it("warn when call set", () => {

    console.warn = jest.fn()

    const user = readonly({ age: 10 })

    user.age = 11

    expect(console.warn).toBeCalled()

  })
})

代码实现（已重构）

baseHandlers.ts

import { track, trigger } from "./effect"

const get = createGetter()
const set = createSetter()
const readonlyGet = createGetter(true)

function createGetter(isReadonly = false) {
  return function get(target: any, key: any) {
    const res = Reflect.get(target, key)
    if (!isReadonly) {
      track(target, key)
    }
    return res
  }
}

function createSetter() {
  return function get(target: any, key: any, value: any) {
    const res = Reflect.set(target, key, value)
    trigger(target, key)
    return res
  }
}

export const mutableHandlers = {
  get,
  set
}
export const readonlyHandlers = {
  get: readonlyGet,
  set(target: any, key: any, value: any) {
    console.warn(`key:${key} set failure, because target is readonly`, target)
    return true;
  }
}

reactive.ts

import { mutableHandlers, readonlyHandlers } from "./baseHandlers";

// 核心是通过Proxy进行代理，最重要是知道什么时候该set，什么时候该get
// 依赖的收集和触发是effect的关键
// 使用Proxy记得在tsconfig.json中添加 lib": ["DOM"]
// set和get已经重构至baseHandlers
export function reactive(raw: any) {
  return createActiveObject(raw, mutableHandlers)
}

// readonly
export function readonly(raw: any) {
  return createActiveObject(raw, readonlyHandlers)
}

function createActiveObject(raw: any, baseHandlers: any) {
  return new Proxy(raw, baseHandlers)
}

8.实现isReactive和isReadonly功能

什么是isReactive和isReadonly？

在Vue 3中，可以使用isReactive和isReadonly函数来判断一个对象是否是响应式对象和只读对象。

isReactive函数接受一个对象作为参数，返回一个布尔值，表示这个对象是否是响应式对象。如果对象是响应式对象，则返回true，否则返回false。

isReadonly函数接受一个对象作为参数，返回一个布尔值，表示这个对象是否是只读对象。如果对象是只读对象，则返回true，否则返回false。

目标测试

import { isReadonly, readonly } from "../reactive"

describe("readonly", () => {
  it("happy path", () => {
    // not set
    const original = { foo: 1, bar: { baz: 2 } }
    const wrapped = readonly(original)
    expect(wrapped).not.toBe(original)
    expect(wrapped.foo).toBe(1)
    // 测试isReadonly
    expect(isReadonly(wrapped)).toBe(true)
    expect(isReadonly(original)).toBe(false)
  })
  it("warn when call set", () => {

    console.warn = jest.fn()

    const user = readonly({ age: 10 })

    user.age = 11

    expect(console.warn).toBeCalled()

  })
})

import { reactive, isReactive } from "../reactive";

describe('reactive', () => {
  it('happy path', () => {
    const original = { foo: 1 };
    const observed = reactive(original);
    expect(observed).not.toBe(original);
    expect(observed.foo).toBe(1);
    // 测试isReactive
    expect(isReactive(observed)).toBe(true)
    expect(isReactive(original)).toBe(false)
  })
})

代码实现

reactive.ts

import { mutableHandlers, readonlyHandlers } from "./baseHandlers";

export const enum ReactiveFlags {
  IS_REACTIVE = "__v_isReactive",
  IS_READONLY = "__v_isReadonly"
}

// 核心是通过Proxy进行代理，最重要是知道什么时候该set，什么时候该get
// 依赖的收集和触发是effect的关键
// 使用Proxy记得在tsconfig.json中添加 lib": ["DOM"]
// set和get已经重构至baseHandlers
export function reactive(raw: any) {
  return createActiveObject(raw, mutableHandlers)
}

// readonly
export function readonly(raw: any) {
  return createActiveObject(raw, readonlyHandlers)
}

export function isReactive(value: any) {
  return !!value[ReactiveFlags.IS_REACTIVE]
}

export function isReadonly(value: any) {
  return !!value[ReactiveFlags.IS_READONLY]
}

function createActiveObject(raw: any, baseHandlers: any) {
  return new Proxy(raw, baseHandlers)
}

baseHandlers.ts

import { track, trigger } from "./effect"
import { ReactiveFlags } from "./reactive"

const get = createGetter()
const set = createSetter()
const readonlyGet = createGetter(true)

function createGetter(isReadonly = false) {
  return function get(target: any, key: any) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    }
    if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    }
    const res = Reflect.get(target, key)
    if (!isReadonly) {
      track(target, key)
    }
    return res
  }
}

function createSetter() {
  return function get(target: any, key: any, value: any) {
    const res = Reflect.set(target, key, value)
    trigger(target, key)
    return res
  }
}

export const mutableHandlers = {
  get,
  set
}
export const readonlyHandlers = {
  get: readonlyGet,
  set(target: any, key: any, value: any) {
    console.warn(`key:${key} set failure, because target is readonly`, target)
    return true;
  }
}

9.优化effect中的stop功能

当前问题

在stop(runner)之后，如果使用obj.prop++，即ob j.prop = obj.prop + 1。触发了get和set，触发get时又会重新收集依赖，从而导致stop方法无效。

目标测试

 it('stop', () => {
    let dummy;
    const obj = reactive({ prop: 1 })
    const runner = effect(() => {
      dummy = obj.prop
    })
    obj.prop = 2
    expect(dummy).toBe(2)
    stop(runner)
    obj.prop++
    expect(dummy).toBe(2)
    //stopped effect should still be manually callable
    runner()
    expect(dummy).toBe(3)
  })

代码实现

effect.ts

主要是添加了shouldTrack进行控制

import { extend } from "../shared"

// 用于记录当前run的effect，以便track进行获取
let activeEffect: ReactiveEffect;
//track方法用于依赖收集
const targetMap = new Map()
// 控制track
let shouldTrack = false;

class ReactiveEffect {
  private _fn: Function
  public deps: Array<Object> = []
  public active: Boolean = true
  public onStop?: () => void
  public scheduler?: Function
  constructor(fn: Function) {
    this._fn = fn
  }
  run() {
    if (!this.active) {
      return this._fn();
    }

    shouldTrack = true
    activeEffect = this;
    const result = this._fn()
    shouldTrack = false
    return result

  }
  stop() {
    if (this.active) {
      cleanupEffect(this)
      if (this.onStop) {
        this.onStop()
      }
      this.active = false
    }
  }
}

function cleanupEffect(effect: ReactiveEffect) {
  effect.deps.forEach((dep: any) => {
    dep.delete(effect)
  })
  effect.deps.length = 0
}


export function track(target: any, key: any) {
  // 如果是stop的对象，则不需要track
  if (!isTracking()) return
  //target -> key -> dep
  let depsMap = targetMap.get(target)
  // 初始化时，depsMap是没有的
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key)
  // 初始化时，dep也是没有的
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep)
  }
  // 将fn存入，因为使用的是set，在多次进行get时，fn不会重复
  if (dep.has(activeEffect)) return
  dep.add(activeEffect)
  activeEffect.deps.push(dep)
}

function isTracking() {
  return shouldTrack && activeEffect !== undefined
}

// trigger方法用于依赖相关的effect触发
export function trigger(target: any, key: any) {
  let depsMap = targetMap.get(target)
  let dep = depsMap.get(key)
  for (const effect of dep) {
    // scheduler方法来控制触发，可以减少不必要的更新，提高性能
    if (effect.scheduler) {
      effect.scheduler()
    } else {
      effect.run();
    }
  }
}

// 接收到这个fn需要进行封装
export function effect(fn: Function, options: any = {}) {
  const _effect = new ReactiveEffect(fn)
  // Object.assign()代替_effect.onStop = options.onStop等等，因为后续会有其他的参数,Object.assign()已经在shared中封装
  // 已有scheduler, onStop
  extend(_effect, options)

  _effect.run();

  const runner: any = _effect.run.bind(_effect)
  runner.effect = _effect
  // 返回run方法作为runner方法，同时bind当前effect处理run方法中this的指向问题
  return runner
}

export function stop(runner: any) {
  runner.effect.stop()
}

10.实现reactive和readonly嵌套对象转换功能

目标测试

test("nested reactive", () => {
    const original = {
      nested: {
        foo: 1
      },
      array: [{ bar: 2 }]
    }
    const observed = reactive(original)
    expect(isReactive(observed.nested)).toBe(true)
    expect(isReactive(observed.array)).toBe(true)
    expect(isReactive(observed.array[0])).toBe(true)
  })

it("happy path", () => {
    // not set
    const original = { foo: 1, bar: { baz: 2 } }
    const wrapped = readonly(original)
    expect(wrapped).not.toBe(original)
    expect(wrapped.foo).toBe(1)
    expect(isReadonly(wrapped)).toBe(true)
    expect(isReadonly(wrapped.bar)).toBe(true)
    expect(isReadonly(original)).toBe(false)
  })

代码实现

baseHandlers.ts

添加isObject(val)判断

function createGetter(isReadonly = false) {
  return function get(target: any, key: any) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    }
    if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    }
    const res = Reflect.get(target, key)
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res)
    }
    if (!isReadonly) {
      track(target, key)
    }
    return res
  }
}

export const isObject = (val: any) => {
  return val !== null && typeof val === "object"
}

11.实现shallowReadonly功能

什么是shallowReadonly？

在 Vue 3 中，shallowReadonly 是一个函数，可以将一个对象转换为只读的代理对象。与 readonly 不同的是，shallowReadonly 只会将对象的第一层属性转换为只读的代理对象，而不会递归转换嵌套对象的属性。这意味着，如果对象的属性仍然是对象，那么这些属性不会被转换为只读的代理对象。

const obj = {
  name: 'Vue',
  version: 3,
  author: {
    name: 'Evan You',
    company: 'Vue.js'
  }
}
//如果将 obj 转换为只读的代理对象，可以使用 shallowReadonly：
import { shallowReadonly } from 'vue'
const readonlyObj = shallowReadonly(obj)
//此时，readonlyObj 是一个只读的代理对象，可以访问 name 和 version 属性，但是 author 属性仍然是可写的对象。也就是说，以下代码是有效的：
readonlyObj.name // 'Vue'
readonlyObj.version // 3
readonlyObj.author.name = 'John Doe'
readonlyObj.author.name // 'John Doe'
//但是，以下代码是无效的：
readonlyObj.author = {} // 抛出 TypeError
//因为 author 属性仍然是原始对象的引用，而 readonlyObj 不能修改原始对象。

目标测试

import { isReadonly, shallowReadonly } from "../reactive"

describe("shallowReadonly", () => {
  test("should not make non-reactive properties reactive", () => {
    const props = shallowReadonly({ n: { foo: 1 } })
    expect(isReadonly(props)).toBe(true)
    expect(isReadonly(props.n)).toBe(false)
  })
})

代码实现

reactive.ts

export function shallowReadonly(raw: any) {
  return createActiveObject(raw, shallowReadonlyHandlers)
}

baseHandlers.ts

补充isShallow的判断以及shallowReadonlyGet的创建

import { extend, isObject } from "../shared"
import { track, trigger } from "./effect"
import { ReactiveFlags, reactive, readonly } from "./reactive"

const get = createGetter()
const set = createSetter()
const readonlyGet = createGetter(true)
const shallowReadonlyGet = createGetter(true, true)

function createGetter(isReadonly = false, isShallow = false) {
  return function get(target: any, key: any) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    }
    if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    }
    const res = Reflect.get(target, key)
    if (isShallow) {
      return res
    }

    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res)
    }
    if (!isReadonly) {
      track(target, key)
    }
    return res
  }
}

function createSetter() {
  return function get(target: any, key: any, value: any) {
    const res = Reflect.set(target, key, value)
    trigger(target, key)
    return res
  }
}

export const mutableHandlers = {
  get,
  set
}
export const readonlyHandlers = {
  get: readonlyGet,
  set(target: any, key: any, value: any) {
    console.warn(`key:${key} set failure, because target is readonly`, target)
    return true;
  }
}

export const shallowReadonlyHandlers = extend({}, readonlyHandlers, { get: shallowReadonlyGet })

12.实现isProxy功能

在 Vue 3 中，isProxy 是一个函数，用于检查一个对象是否是一个响应式代理对象。

import { reactive, isProxy } from 'vue'

const obj = reactive({
  name: 'Vue',
  version: 3
})

const proxyObj = new Proxy(obj, {})

console.log(isProxy(obj)) // true
console.log(isProxy(proxyObj)) // true
console.log(isProxy({})) // false

目标测试

import { isReadonly, readonly, isProxy } from "../reactive"

describe("readonly", () => {
  it("happy path", () => {
    // not set
    const original = { foo: 1, bar: { baz: 2 } }
    const wrapped = readonly(original)
    expect(wrapped).not.toBe(original)
    expect(wrapped.foo).toBe(1)
    expect(isReadonly(wrapped)).toBe(true)
    expect(isReadonly(wrapped.bar)).toBe(true)
    expect(isReadonly(original)).toBe(false)
    expect(isProxy(wrapped)).toBe(true)
    expect(isProxy(original)).toBe(false)
  })
  it("warn when call set", () => {

    console.warn = jest.fn()

    const user = readonly({ age: 10 })

    user.age = 11

    expect(console.warn).toBeCalled()

  })
})

import { reactive, isReactive, isProxy } from "../reactive";

describe('reactive', () => {
  it('happy path', () => {
    const original = { foo: 1 };
    const observed = reactive(original);
    expect(observed).not.toBe(original);
    expect(observed.foo).toBe(1);
    expect(isReactive(observed)).toBe(true)
    expect(isReactive(original)).toBe(false)
    expect(isProxy(observed)).toBe(true)
    expect(isProxy(original)).toBe(false)
  })

  test("nested reactive", () => {
    const original = {
      nested: {
        foo: 1
      },
      array: [{ bar: 2 }]
    }
    const observed = reactive(original)
    expect(isReactive(observed.nested)).toBe(true)
    expect(isReactive(observed.array)).toBe(true)
    expect(isReactive(observed.array[0])).toBe(true)
  })
})

代码实现

reactive.ts

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

无法判断原生Proxy对象是不是Proxy，但Proxy上也没有能直接判断的方法，这是个值得解决的问题

13.实现ref功能

在 Vue 3 中，ref 是一个函数，用于将一个普通的 JavaScript 值转换为响应式数据。如果要将一个对象转换为响应式数据，可以使用 reactive 函数。

目标测试

三个测试，可以分步逐一实现

import { effect } from '../effect';
import { ref } from '../ref'

describe("ref", () => {
  it("happy path", () => {
    const a = ref(1);
    expect(a.value).toBe(1)
  })
  it("should be reactive", () => {
    const a = ref(1)
    let dummy;
    let calls = 0;
    effect(() => {
      calls++;
      dummy = a.value
    })
    expect(calls).toBe(1)
    expect(dummy).toBe(1)
    a.value = 2
    expect(calls).toBe(2)
    expect(dummy).toBe(2)
    // same value should not trigger
    a.value = 2
    expect(calls).toBe(2)
    expect(dummy).toBe(2)
  })

  it("should make nested properties reactive", () => {
    const a = ref({
      count: 1
    })
    let dummy;
    effect(() => {
      dummy = a.value.count
    })
    expect(dummy).toBe(1)
    a.value.count = 2
    expect(dummy).toBe(2)
  })
})

代码实现

ref.ts

import { hasChanged, isObject } from "../shared";
import { trackEffects, triggerEffect, isTracking } from "./effect";
import { reactive } from "./reactive";

class RefImpl {
  private _value: any;
  private _rawValue: any;
  public dep;
  constructor(value: any) {
    this._rawValue = value
    this._value = convert(value)
    this.dep = new Set()
  }
  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newValue: any) {
    // 相等则直接返回
    if (!hasChanged(this._rawValue, newValue)) return
    this._value = convert(newValue)
    this._rawValue = newValue
    triggerEffect(this.dep)
  }

}

// ref处理的是单值，但传入的value是对象时，需要转换为reactive对象
function convert(value: any) {
  return isObject(value) ? reactive(value) : value;
}

function trackRefValue(ref: RefImpl) {
  if (isTracking()) {
    trackEffects(ref.dep)
  }
}

export function ref(value: any) {
  return new RefImpl(value)
}

effect.ts

重构以适用ref

import { extend } from "../shared"

// 用于记录当前run的effect，以便track进行获取
let activeEffect: ReactiveEffect;
//track方法用于依赖收集
const targetMap = new Map()
// 控制track
let shouldTrack = false;

class ReactiveEffect {
  private _fn: Function
  public deps: any = []
  public active: Boolean = true
  public onStop?: () => void
  public scheduler?: Function
  constructor(fn: Function) {
    this._fn = fn
  }
  run() {
    if (!this.active) {
      return this._fn();
    }

    shouldTrack = true
    activeEffect = this;
    const result = this._fn()
    shouldTrack = false
    return result

  }
  stop() {
    if (this.active) {
      cleanupEffect(this)
      if (this.onStop) {
        this.onStop()
      }
      this.active = false
    }
  }
}

function cleanupEffect(effect: ReactiveEffect) {
  effect.deps.forEach((dep: any) => {
    dep.delete(effect)
  })
  effect.deps.length = 0
}


export function track(target: any, key: any) {
  // 如果是stop的对象，则不需要track
  if (!isTracking()) return
  //target -> key -> dep
  let depsMap = targetMap.get(target)
  // 初始化时，depsMap是没有的
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key)
  // 初始化时，dep也是没有的
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep)
  }
  trackEffects(dep)
}

export function trackEffects(dep: any) {
  if (dep.has(activeEffect)) return
  dep.add(activeEffect)
  activeEffect.deps.push(dep)
}


export function isTracking() {
  return shouldTrack && activeEffect !== undefined
}

// trigger方法用于依赖相关的effect触发
export function trigger(target: any, key: any) {
  let depsMap = targetMap.get(target)
  let dep = depsMap.get(key)
  triggerEffect(dep)
}

export function triggerEffect(dep: any) {
  for (const effect of dep) {
    // scheduler方法来控制触发，可以减少不必要的更新，提高性能
    if (effect.scheduler) {
      effect.scheduler()
    } else {
      effect.run();
    }
  }
}

// 接收到这个fn需要进行封装
export function effect(fn: Function, options: any = {}) {
  const _effect = new ReactiveEffect(fn)
  // Object.assign()代替_effect.onStop = options.onStop等等，因为后续会有其他的参数,Object.assign()已经在shared中封装
  // 已有scheduler, onStop
  extend(_effect, options)

  _effect.run();

  const runner: any = _effect.run.bind(_effect)
  runner.effect = _effect
  // 返回run方法作为runner方法，同时bind当前effect处理run方法中this的指向问题
  return runner
}

export function stop(runner: any) {
  runner.effect.stop()
}

14.实现isRef和unRef功能

isRef 是一个函数，用于检查一个变量是否是 Ref 对象

unRef 是一个函数，用于获取 Ref 对象的值。如果传入的值不是 Ref 对象，则直接返回该值。

目标测试

it("isRef", () => {
  const a = ref(1)
  const user = reactive({
    age: 1
  })
  expect(isRef(a)).toBe(true);
  expect(isRef(1)).toBe(false);
  expect(isRef(user)).toBe(false)
})

it("unRef", () => {
  const a = ref(1)
  expect(unRef(a)).toBe(1);
  expect(unRef(1)).toBe(1);
})

代码实现

ref.ts

import { hasChanged, isObject } from "../shared";
import { trackEffects, triggerEffect, isTracking } from "./effect";
import { reactive } from "./reactive";

class RefImpl {
  private _value: any;
  private _rawValue: any;
  public dep;
  public __v_isRef = true;
  constructor(value: any) {
    this._rawValue = value
    this._value = convert(value)
    this.dep = new Set()
  }
  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newValue: any) {
    // 相等则直接返回
    if (!hasChanged(this._rawValue, newValue)) return
    this._value = convert(newValue)
    this._rawValue = newValue
    triggerEffect(this.dep)
  }

}

// ref处理的是单值，但传入的value是对象时，需要转换为reactive对象
function convert(value: any) {
  return isObject(value) ? reactive(value) : value;
}

function trackRefValue(ref: RefImpl) {
  if (isTracking()) {
    trackEffects(ref.dep)
  }
}

export function ref(value: any) {
  return new RefImpl(value)
}

export function isRef(ref: any) {
  return !!ref.__v_isRef
}

export function unRef(ref: any) {
  return isRef(ref) ? ref._value : ref
}

15.实现proxyRefs功能

什么是proxyRefs？

通常情况下，当你使用 ref、reactive、computed 等函数创建响应式对象时，会返回一个普通的 JavaScript 对象。这样的对象虽然拥有响应式能力，但是无法像普通对象一样直接访问属性和方法。例如ref对象需要使用.value来获取属性

proxyRefs 的作用就是将普通的响应式对象转换为一个响应式代理对象，这个代理对象具有以下特点：

  • 可以直接访问对象的属性和方法，就像访问普通的 JavaScript 对象一样。
  • 在访问属性和方法时，会自动进行依赖收集和触发更新。
  • 可以通过解构赋值等方式进行属性的提取和组合。

目标测试

it("proxyRef", () => {
  const user = {
    age: ref(10),
    name: "xiaoming"
  }
  const proxyUser = proxyRefs(user)
  // test get
  expect(user.age.value).toBe(10)
  expect(proxyUser.age).toBe(10)
  expect(proxyUser.name).toBe("xiaoming");
  // test set value
  proxyUser.age = 20;
  expect(proxyUser.age).toBe(20)
  expect(user.age.value).toBe(20)
  // test set ref
  proxyUser.age = ref(10)
  expect(proxyUser.age).toBe(10)
  expect(user.age.value).toBe(10)
})

代码实现

ref.ts

export function proxyRefs(objectWithRefs: any) {
  return new Proxy(objectWithRefs, {
    get(target, key) {
      return unRef(Reflect.get(target, key))
    },
    set(target, key, value) {
      if (isRef(target[key]) && !isRef(value)) {
        return (target[key].value = value)
      } else {
        return Reflect.set(target, key, value)
      }
    }
  })
}

16.实现computed计算属性

什么是computed计算属性？

使用 computed 函数可以将一个计算属性定义为一个函数，这个函数的返回值就是计算属性的值。当计算属性所依赖的数据发生变化时，计算属性的值也会自动更新。

计算属性的值是惰性求值的，也就是说，只有在访问计算属性时才会进行计算。如果计算属性所依赖的数据没有变化，那么计算属性的值也不会重新计算。

目标测试

import { computed } from "../computed"
import { reactive } from "../reactive"

describe("computed", () => {
  it("happy path", () => {
    const user = reactive({
      age: 1
    })
    const age = computed(() => {
      return user.age
    })
    expect(age.value).toBe(1)
  })

  it("should compute lazily", () => {
    const value = reactive({
      foo: 1
    })
    const getter = jest.fn(() => {
      return value.foo
    })
    const cValue = computed(getter)

    // lazy
    expect(getter).not.toHaveBeenCalled();
    expect(cValue.value).toBe(1)
    expect(getter).toHaveBeenCalledTimes(1)

    // should not compute again
    cValue.value;
    expect(getter).toHaveBeenCalledTimes(1)

    // should not compute until needed
    value.foo = 2;
    expect(getter).toHaveBeenCalledTimes(1)

    // now it should compute
    expect(cValue.value).toBe(2)
    expect(getter).toHaveBeenCalledTimes(2)

    // should not compute again
    cValue.value;
    expect(getter).toHaveBeenCalledTimes(2)
  })
})

代码实现

computed.ts

computed的实现很巧妙，结合了effect的用法，用一个dirty标识实现了缓存

import { ReactiveEffect } from "./effect";

class computedRefImpl {
  private _getter;
  private _dirty = true;
  private _value: any;
  private _effect: any;
  constructor(getter: any) {
    this._getter = getter
    this._effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true
      }
    })
  }
  get value() {
    if (this._dirty) {
      this._dirty = false
      this._value = this._effect.run()
    }
    return this._value;
  }
}

export function computed(getter: any) {
  return new computedRefImpl(getter)
}
路飞大魔王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
个人笔记 - vue3源码 - 手敲mini-vue
m0_64130892的博客
07-31 189
vue3源码学习笔记，仓库代码中详细注释笔记
Vue.js - 模拟Vue.js响应式原理（2/2）
xuanwuziyou的专栏
04-15 327
项目仓库： xxxxx 一. 类的说明 Vue类 ：保存传入的选项数据，把选项data中的成员注入vue实例（可用this.msg访问），调用observer对象监听数据变化，调用compiler对象解析指令和差值表达式。 Observer类：把data选项中属性转换成响应式数据（若data某个属性是对象，该对象的属性也具有响应式），数据变化发送通知。 Compiler类：负责编译模板并解析指令和差值表达式，负责页面视图首次渲染，以及数据变化后的重新渲染。 Dep类：观察者模式中的发布者，用
【mini-vue】DIFF算法学习笔记
qq_53512708的博客
08-29 279
对数组newIndexToOldIndexMap求最长递增子序列的结果为increasingNewIndexSequence: [1, 3] ([4, 3, 0, 5]最长递增子序列为[3, 5]，3的下标为1，5的下标为3)，（AB ABCD）与（AB CDAB），如果是添加到尾部直接添加即可，如果添加到首部，需要获取锚点，则个锚点的位置是e2+1，遍历[i, e2]添加新节点。[2, 1, 5, 3, 4]的最长递增子序列为[2, 3, 4]或[1, 3, 4]遍历[s1, e1]...
vue3源码实战 崔学社 实现mini-vue
11-13
vue3源码实战 崔学社 实现mini-vue
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
npm i vue-mini-weather --save // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <v></v> // 2. 局部引入 //a
Vue-router学习笔记
02-24
学习Vue的必备技能，必须熟练使用Vue-router，能够在实际项目中运用。VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 359
在vue.config.js中配置关闭Uncaught runtime errors显示。
Spring Boot、MongoDB、Vue 2和Nginx实现一个小说网站
iku_n的博客
06-08 1324
后端API：使用Spring Boot实现，负责处理数据和业务逻辑。数据库：使用MongoDB存储小说数据。前端页面：使用Vue 2实现，负责展示数据和用户交互。反向代理：使用Nginx进行前后端分离。
vue3如何定义一个组件
Java程序员专栏
06-09 551
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
关于element-plus中el-select自定义标签及样式的问题
最新发布
x_XDGS的博客
06-14 187
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 202
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 322
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue初使用实例之笔记本
m0_72168336的博客
06-11 778
vue初使用实例之笔记本
Vue3+Vite报错：vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?
weixin_47121832的博客
06-09 296
Vue3+Vite报错：vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?
Vue CLI 4与项目构建实战指南
06-09 935
Vue CLI的作用和优势Vue CLI（Vue.js Command Line Interface）是官方提供的一个标准工具，用于快速搭建Vue项目架构。标准化开发流程：Vue CLI提供了一套标准的开发流程和项目结构，有助于团队协作和项目维护。快速原型开发：通过Vue CLI可以快速创建项目原型，提高开发效率。丰富的插件生态：Vue CLI拥有丰富的插件，可以轻松集成各种功能，如路由、状态管理、打包优化等。易于定制和扩展：Vue CLI支持对构建配置的深度定制，满足不同项目的需求。
vue基础P7-17
weixin_43883584的博客
06-09 580
{{xxxx}}用在标签体中，也就是<>{{xxx}}</>xxx是js表达式，有返回值，如num+1、Date.now()。不是js代码。
Vue基础知识：插槽——默认插槽，插槽的后备内容，具名插槽，作用域插槽的认识与使用。（slot,#default,row的认识）
我就知道你会来，我们一起进步吧！
06-08 655
1.默认插槽（组件内只能定制一处结构）2.具名插槽（组件内可以定制多次结构）简单而言：就是你希望封装一个组件，这个组件会在多个地方使用，但是每个使用的地方其中的内容部分又是不同的，这个时候你希望自定义，就会运用到插槽。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1245
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
django-vue-admin 学习笔记 自定义插槽tooltip字符数据显示
02-02
最近我在学习django-vue-admin时遇到了一个问题，就是关于自定义插槽tooltip字符数据显示的。在默认情况下，tooltip只能显示简单的数据，无法满足我对复杂数据的显示需求。经过查阅文档和实践，我成功解决了这个问题。 首先，我在vue-admin中找到了tooltip的配置文件，并使用了自定义插槽的方式对tooltip进行了定制。接着，我在django后端数据库中设计了一张新的表格，用来存储需要显示的复杂数据。然后，我通过vue-admin的请求功能，将数据从后端获取到前端，在自定义的插槽中对tooltip进行了渲染。我使用了一些vue的组件和方法，使得tooltip可以显示并格式化复杂的数据，比如表格、图表等。 经过一番努力，我成功实现了对tooltip字符数据的自定义显示。这个经验让我对django-vue-admin有了更深入的理解，并且对前后端数据交互有了更深刻的认识。我会继续学习和探索，希望能够在将来的开发中运用这些技术，为项目增添更多的灵活性和美观性。感谢django-vue-admin给我提供了这次学习的机会，我对它的功能和扩展能力有了更高的认知和期待。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值