vue3的api解读-VUE Reactivity

目录

响应式

命令式程序 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 + tsdiv>
}

/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(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 reactiveextends 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

• 代理模式： 代理对象是对原对象的包装（Wrapper）
• 观察代理模式的程序示例
• 思考：
  • 如何在get的时候track
  • 如何在set的时候trigger

小结：常见误区

思考1：

代理对象和原对象是一种怎样的关系？

1. 代理对象不一定遵循原对象的逻辑，
2. 代理对象可以有自己的逻辑，
3. 本质上代理对象是对原对象的一种包装
4. 因此代理模式也称为包装模式

思考2：

【vue2的数据绑定】Data binding和【vue3的响应式】Reactive的关系？

1. 响应式是一种数据的绑定
2. 响应式值和视图之间的关系是一种绑定关系,是声明式的绑定关系
3. Reactive是实现Data binding的一种方式【一种机制】