2023-02-18-vue-developer.elonehoo.me Open in urlscan Pro
76.76.21.93  Public Scan

Form analysis
0 forms found in the DOM

Text Content

VUE开发体验
WITH VUE

Elone Hoo
Work Talks
Mar. 18th 2023


ELONE HOO

JumpIDE, VueHooksForm, Pistachio, LogonTracer 等开源项目作者
任职于 Beneway

WIP of Elone Hoo

elonehoo

elonehoo

elonehoo.me

1 / 17

VUE开发体验
WITH VUE

Elone Hoo
Work Talks
Mar. 18th 2023
1


ELONE HOO

JumpIDE, VueHooksForm, Pistachio, LogonTracer 等开源项目作者
任职于 Beneway

WIP of Elone Hoo

elonehoo

elonehoo

elonehoo.me

2


开发者体验

3


响应能力

Vite
网页中的 HMR
vite-node
Node 中的 HRM
Spring DevTool
用于后端 API 重新加载
4


常见做法

 * TypeScript / ESM

 * SPA / SSR / Static / Hybrid

 * 布局、插件、路由中间件…

 * 组合实用程序 - useState、useAsyncData、useFetch…

 * Head/SEO - useHead, useSeoMeta…

 * 后端集成、serverless 等。

5


惯例

 * 基于文件的路由

 * 组件自动导入

 * Composition API 自动导入

 * 端到端类型

6


生态

 * 模块

 * 轻松整合

7


VUE中的 - 响应式

 * 自动收集依赖 & 更新

 * Vue 3 中新的 API
   
   * ref
   * reactive
   * effect
   * computed



8


响应式 - REACTIVE

 * 使用 Proxy 实现

 * track，trigger 进行响应式追踪

const reactive = target => new Proxy(target, {
  get(target, prop, receiver) {
    track(target, prop)
    return Reflect.get(...arguments) // get original data
  },
  set(target, key, value, receiver) {
    trigger(target, key)
    return Reflect.set(...arguments)
  }
})

const obj = reactive({
  hello: 'world'
})

console.log(obj.hello) // `track()` get called
obj.hello = 'vue' // `trigger()` get called

const reactive = target => new Proxy(target, {
  get(target, prop, receiver) {
    track(target, prop)
    return Reflect.get(...arguments) // get original data
  },
  set(target, key, value, receiver) {
    trigger(target, key)
    return Reflect.set(...arguments)
  }
})

const obj = reactive({
  hello: 'world'
})

console.log(obj.hello) // `track()` get called
obj.hello = 'vue' // `trigger()` get called

9


响应式 - EFFECT

 * track 追踪调用它的函数

 * trigger 出发绑定的更新

 * effect 调用函数并且触发收集依赖

const targetMap = new WeakMap()

export const track = (target, key) => {
  if (tacking && activeEffect)
    targetMap.get(target).key(key).push(activeEffect)
}

export const trigger = (target, key) => {
  targetMap.get(target).key(key).forEach(effect => effect())
}

export const effect = (fn) => {
  const effect = function () { fn() }
  enableTracking()
  activeEffect = effect
  fn()
  resetTracking()
  activeEffect = undefined
}

const targetMap = new WeakMap()

export const track = (target, key) => {
  if (tacking && activeEffect)
    targetMap.get(target).key(key).push(activeEffect)
}

export const trigger = (target, key) => {
  targetMap.get(target).key(key).forEach(effect => effect())
}

export const effect = (fn) => {
  const effect = function () { fn() }
  enableTracking()
  activeEffect = effect
  fn()
  resetTracking()
  activeEffect = undefined
}

10


更进一步

11
介绍

12

 * 多分支管理

 * 多版本控制

 * 最佳的 diff 展示

13


DEMO 时间!

14

查看 Demo

15


这就是我们在这个项目中是如何使用 GIT 的

16


THANK YOU!

Slides on elonehoo.me

17