# 源码结构

源码位置是在packages文件件内，实际上源码主要分为两部分，编译器和运行时环境

1. 编译器

compiler-core 核心编译逻辑
compiler-dom 针对浏览器平台编译逻辑
compiler-sfc 针对单文件组件编译逻辑
compiler-ssr 针对服务端渲染编译逻辑

2. 运行时环境

runtime-core 运行时核心
runtime-dom 运行时针对浏览器的逻辑
runtime-test 浏览器外完成测试环境仿真

reactivity 响应式逻辑
template-explorer 模板浏览器
vue 代码入口，整合编译器和运行时
server-renderer 服务器端渲染
share 公用方法

# Vue 3初探

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hello vue3</title>
<script src="../dist/vue.global.js"></script>
</head>
<body>
    <div id='app'><h1>{{message}}</h1></div>
    <script>
Vue.createApp({
data: { message: 'Hello Vue 3!' }
}).mount('#app') </script>
</body>
</html>

@前端进阶之旅: 代码已经复制到剪贴板

# Composition API

Composition API字面意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的

# 1. 数据响应式

<div>count: {{ state.count }}</div>
<script>
    const {
      createApp,
      reactive
} = Vue;
// 声明组件 const App = {
// setup是一个新的组件选项，它是组件内使用Composition API的入口 // 调用时刻是初始化属性确定后，beforeCreate之前
setup() {
// 响应化:接收一个对象，返回一个响应式的代理对象 const state = reactive({ count: 0 })
// 返回对象将和渲染函数上下文合并
        return { state }
      }
}
createApp(App).mount('#app') </script>

@前端进阶之旅: 代码已经复制到剪贴板

# 2. 计算属性

<div>doubleCount: {{doubleCount}}</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 3. 事件处理

<div @click="add">count: {{ state.count }}</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 4. 侦听器

# 5. 引用对象:单个原始值响应化

<div>counter: {{ counter }}</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 6. 体验逻辑组合

const { createApp, reactive, onMounted, onUnmounted, toRefs } = Vue

// 鼠标位置侦听 
function useMouse() {
      // 数据响应化
      const state = reactive({ x: 0, y: 0 })

      const update = e => {
            state.x = e.pageX
            state.y = e.pageY 
      }
      onMounted(() => { 
              window.addEventListener('mousemove', update)
      })

      onUnmounted(() => {
         window.removeEventListener('mousemove', update) 
      })

     // 转换所有key为响应式数据
    return toRefs(state)
}

// 事件监测
function useTime() {
    const state = reactive({ time: new Date() })
    onMounted(() => {
          setInterval(() => { state.time = new Date()
     }, 1000) })
    return toRefs(state)
}

// 逻辑组合
const MyComp = {
      template: `
      <div>x: {{ x }} y: {{ y }}</div> <p>time: {{time}}</p>
      `, setup() {
      // 使用鼠标逻辑
      const { x, y } = useMouse() // 使用时间逻辑
      const { time } = useTime() // 返回使用
      return { x, y, time }
   } 
}
createApp().mount(MyComp, '#app')

@前端进阶之旅: 代码已经复制到剪贴板

对比mixins，好处显而易见:

x,y,time来源清晰
不会与data、props等命名冲突

# Vue3响应式原理

# Vue2响应式原理回顾

// 1.对象响应化:遍历每个key，定义getter、setter
// 2.数组响应化:覆盖数组原型方法，额外增加通知逻辑 
const originalProto = Array.prototype
const arrayProto = Object.create(originalProto)

;['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
    arrayProto[method] = function() {
       originalProto[method].apply(this, arguments)
      notifyUpdate()
    }
} )

function observe(obj) {
  if (typeof obj !== 'object' || obj == null) {
return
}
// 增加数组类型判断，若是数组则覆盖其原型 
if (Array.isArray(obj)) {
    Object.setPrototypeOf(obj, arrayProto) 
} else {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      defineReactive(obj, key, obj[key])
    }
  } 
}

function defineReactive(obj, key, val) { 
   observe(val) // 解决嵌套对象问题
   Object.defineProperty(obj, key, { 
     get() {
        return val 
    },
    set(newVal) {
      if (newVal !== val) {
         observe(newVal) // 新值是对象的情况 val = newVal
         notifyUpdate()
      } 
   }
}) 
}

function notifyUpdate() { 
    console.log('页面更新!')
}

@前端进阶之旅: 代码已经复制到剪贴板

vue2响应式弊端:

响应化过程需要递归遍历，消耗较大
新加或删除属性无法监听
数组响应化需要额外实现
Map、Set、Class等无法响应式
修改语法有限制

# Vue3响应式原理剖析

vue3使用ES6的Proxy特性来解决这些问题。

function reactive(obj) {
  if (typeof obj !== 'object' && obj != null) {
      return obj 
}

// Proxy相当于在对象外层加拦截
// http://es6.ruanyifeng.com/#docs/proxy 
const observed = new Proxy(obj, {
   get(target, key, receiver) {
   // Reflect用于执行对象默认操作，更规范、更友好
   // Proxy和Object的方法Reflect都有对应
   // http://es6.ruanyifeng.com/#docs/reflect 
    const res = Reflect.get(target, key, receiver) console.log(`获取${key}:${res}`)
      return res
    },
    set(target, key, value, receiver) {
      const res = Reflect.set(target, key, value, receiver) console.log(`设置${key}:${value}`)
      return res
    },
    deleteProperty(target, key) {
      const res = Reflect.deleteProperty(target, key) 
      console.log(`删除${key}:${res}`)
      return res
   } 
  })
  return observed
}

@前端进阶之旅: 代码已经复制到剪贴板

测试代码

const state = reactive({
    foo: 'foo',
    bar: { a: 1 } 
})
// 1.获取
state.foo // ok
// 2.设置已存在属性
state.foo = 'fooooooo' // ok // 3.设置不存在属性
state.dong = 'dong' // ok // 4.删除属性
delete state.dong // ok

@前端进阶之旅: 代码已经复制到剪贴板

1. 嵌套对象响应式

测试:嵌套对象不能响应

// 4.设置嵌套对象属性
react.bar.a = 10 // no ok

@前端进阶之旅: 代码已经复制到剪贴板

添加对象类型递归

2. 避免重复代理

重复代理，比如

reactive(data) // 已代理过的纯对象 
reactive(react) // 代理对象

@前端进阶之旅: 代码已经复制到剪贴板

解决方式:将之前代理结果缓存，get时直接使用

const toProxy = new WeakMap() // 形如obj:observed const toRaw = new WeakMap() // 形如observed:obj
function reactive(obj) {
  //...
  // 查找缓存，避免重复代理
  if (toProxy.has(obj)) {
  return toProxy.get(obj) 
}
if (toRaw.has(obj)) { 
  return obj
}
 const observed = new Proxy(...)
  // 缓存代理结果 toProxy.set(obj, observed) toRaw.set(observed, obj) return observed
 }
 // 测试效果
 console.log(reactive(data) === state) console.log(reactive(state) === state)

@前端进阶之旅: 代码已经复制到剪贴板

3. 依赖收集

建立响应数据key和更新函数之间的对应关系。

设计

target,key和响应函数映射关系

实现

设置响应函数，创建effect函数

依赖收集和触发

Vue3初探响应式原理|原理篇

Vue3初探响应式原理|原理篇