vue3的api解读-VUE Reactivity

news2024/10/6 22:28:12

响应式

命令式程序 vs 响应式程序

Be Reactive：将响应式的值绑定到UI

代理模式（CODING）

/src/App.tsx

/src/main.ts

/vite.config.ts

/src/demo/ProxyExample.ts

Reactivity是Vue3新加的一个库，新的package

响应式

命令式程序 vs 响应式程序

// 命令式程序
function add(a, b) {
    return a + b
}
// 每一步都是赋值
let x = 1
let y = 2
let c = add(x, y)
x = 100
// c 不变，这就是命令式程序

// 响应式程序
// 每一步都是声明
let x = ref(1)
let y = ref(2)
let c = computed(
    () => x.value + y.value
)
x.value = 100
// c.value 102 ，响应式程序，c变了

响应式程序是一种声明

命令式程序赋值，赋值的本质是内存的拷贝
响应式程序是一种绑定（bind），绑定的本质是一种声明。
- 比如数学公式a=b+1并不是计算过程，而是一种绑定

Be Reactive：将响应式的值绑定到UI

观察者模式

Get Value
- Track(追踪用到的组件)
Value Changed
- Trigger(触发通知所有用到的组件刷新)

代理模式（CODING）

// 创建项目
npm create vite
vue
vue-ts
cd ***
npm install

删除App.vue

/src/App.tsx

export default () => {
  return <div>hello world vue3 + ts</div>
}

/src/main.ts

import { createApp } from 'vue'
import App from './App' // 去掉了.vue
createApp(App).mount('#app')
// 此时运行报错 React is not defined
// 解析出问题了
// 安装依赖
// npm add -D @vitejs/plugin-vue-jsx

/vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 安装依赖
// npm add -D @vitejs/plugin-vue-jsx
import jsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), jsx()]
})

/src/demo/ProxyExample.ts

// vue原理 一个值的代理
function createRef<T>(val: T) { // T 泛型
  const obj = {
    get value() {
      // 追踪
      // track()
      return val
    },
    set value(v: T) {
      // 通知
      // trigger()
      console.log('set ... trigger')
      val = v
    }
  }
  return obj
}
// 创建的是一个值的代理
const count = createRef(0)
count.value = 1
// vue原理 一个对象的代理
function reactive<T extends object>(obj: T) {
  // MDN
  const proxy = new Proxy(obj, {
    // obj === target
    get(target, key) {
      // 一个标准，是JavaScript的反射，
      // 可以帮我们在原对象obj中拿到属性key
      // return () => { }// 返回一个函数也是可以的
      return Reflect.get(target, key)
    },
    set(target, key, value) {
      // 设置obj的值为value
      Reflect.set(target, key, value)
      return true
    }
  })
  return proxy
}
const state = reactive({ a: 1, b: 2 })
console.log(state.a)
state.b = 3