vue3的api解读-ref和reactive网站首页 技术杂谈

vue3的api解读-ref和reactive

路人i++ 2024-07-04 11:17:55

简介vue3的api解读-ref和reactive

构造一个演示框架（VUE3）

/src/examples/Helloworld.tsx

/src/examples/RefExample.tsx

/src/examples/ReactiveExample.tsx

思考

Vue提供的Reactive模式和vue.observable有什么区别？

构造一个演示框架（VUE3）

vue-router
rollup-context

Reactivity API: Core | Vue.js

/src/examples/Helloworld.tsx

// import { createVNode, h } from "vue"
export const HelloWorld = () => {
  // return h("h1", ["Hello world!!!"])
  return <h1>Hello world!!!</h1>
}

/src/mytypes.d.ts

// import type只引入type，不会执行
import type { RouteRecordRaw } from "vue-router";
// 路由类型
type MyRouteType = RouteRecordRaw & {
  key: string
}

/src/main.ts

import { createApp } from 'vue'
import { createWebHashHistory, createRouter } from 'vue-router'
import App from './App'
import { MyRouteType } from './mytypes'
// rollup-context能力，webpack是没有的
// 框架是vite3
// 获取去所有的/examples下的.tsx【typescript + jsx】文件
const examples = import.meta.glob("./examples/**/*.tsx")
// 安一个vue-router@next
// npm add vue-router@next
const routes: MyRouteType[] = []
const examplePromises = Object.keys(examples)
  .map(x => examples[x])
  .map(f => f())
// examplePromises全部解析好
Promise.all(examplePromises)
  .then(list => {
    for (let module of list) {
      for (let key in module) {
        const Component = module[key]
        routes.push({
          path: "/" + key.toLocaleLowerCase(),
          key,
          component: Component
        })
      }
    }
    const router = createRouter({
      history: createWebHashHistory(),
      routes
    })
    // 把routes作为App的属性传过去
    const app = createApp(App, { routes })
    app.use(router)
    app.mount('#app')
  })

/src/App.tsx

import { RouterLink, RouterView } from "vue-router"
import { MyRouteType } from "./mytypes"
import "./layout.css"
export default (props: {
  routes: MyRouteType[]
}) => {
  return <>
    <header><h2>项目实战例子哟</h2></header>
    <div class="body">
      <ul class="menu">
        {props.routes.map(x => {
          return <li key={x.key}>
            <RouterLink to={x.path}>{x.key}</RouterLink>
          </li>
        })}
      </ul>
      <div class="content">
        <RouterView />
      </div>
    </div>
  </>
}

/src/layout.css

* {
  margin : 0;
}
html, body {
  height : 100%;
}
#app {
  height: 100%;
}
header {
  height : 60px;
  line-height: 60px;
  padding-left: 20px;
  width : 100%;
  background-color: black;
  color : white;
}
.body {
  display: flex;
  width : 100%;
  height : 100%;
}
.menu {
  padding-top : 20px;
  width : 200px;
  border-right:  1px solid #f2f3f4;
  min-height: 100%;
}
.menu li a{
  text-decoration: none;
  color : #2377de;
}
.menu li a:visited {
  text-decoration: none;
  color : #2377de;
}
.menu li {
  list-style: none;
}
.content {
  margin : 10px;
  position: relative;
}

/src/examples/RefExample.tsx

import { defineComponent, PropType, Ref, ref } from "vue";
// 使用响应式的值,通过defineComponent创建,
// 不用响应式的值的话 RefExample01 = ()= { return <div>2233</div> }
// 不使用defineComponent就没有setup()可以用
export const RefExample01 = defineComponent({
  setup() {
    // ref是个代理，通过.value获取值
    const count = ref(0)
    console.log('setup函数只执行一次')
    // 渲染函数
    return () => {
      console.log('render函数每次都执行')
      return (
        <div>
          <button onClick={() => {
            count.value++
          }}>+</button>
          {count.value}
        </div>
      )
    }
  }
})
export const RefExample02 = defineComponent({
  setup() {
    // ref是个代理，通过.value获取值
    const count = ref(0)
    console.log('setup函数只执行一次')
    // 渲染函数
    return () => {
      console.log('render函数每次都执行')
      return (
        <div>
          <button onClick={() => {
            count.value++
          }}>+</button>
        </div>
      )
    }
  }
})
export const RefExample03 = defineComponent({
  setup() {
    // ref是个代理，通过.value获取值
    const count = ref(0)
    console.log('setup函数只执行一次')
    // 渲染函数
    return () => {
      return (
        <div>
          <button onClick={() => {
            count.value++
          }}>+</button>
          <Count1 count={count} />
          <Counter count={count} />
        </div>
      )
    }
  }
})
const Counter = ({ count }: {
  count: Ref<number>
}) => {
  return <div>{count.value}</div>
}
const Count1 = defineComponent({
  props: { // 需要映射属性
    count: {
      type: Object as PropType<Ref<number>>, // 给一个别名type
      required: true // 写上这个，vue可以让你在render里拿到值
    }
  },
  setup(props) {
    return (
      // 这样写也能拿到值
      // props: {
      //   count: Ref<number>
      // }
    ) => {
      return <div>{props.count.value}</div>
    }
  }
})

/src/examples/ReactiveExample.tsx

import {
  customRef,
  defineComponent,
  reactive,
  toRefs,
  unref,
  isRef,
} from "vue";
// https://v3.vuejs.org/api/refs-api.html
export const ReactiveExample01 = defineComponent({
  setup() {
    const state = reactive({
      a: "123",
      b: 2
    })
    setTimeout(() => {
      state.a = "456"
    }, 1000)
    setTimeout(() => {
      state.b = 100
    }, 2000)
    return () => {
      return <div>
        <div>{state.a}</div>
        <div>{state.b}</div>
      </div>
    }
  }
})
function getState() {
  const state = reactive({
    a: "123",
    b: 2
  })
  return toRefs(state)
}
export const ReactiveExample02 = defineComponent({
  setup() {
    const { a, b } = getState()
    // const { a, b } = toRefs(state) // 批量ref
    setTimeout(() => {
      // state.a = "456" // reactive使用法
      a.value = "456" // ref使用法
    }, 1000)
    setTimeout(() => {
      // state.b = 100
      b.value = 100
    }, 2000)
    return () => {
      return <div>
        <div>{a.value}</div>
        <div>{b.value}</div>
      </div>
    }
  }
})
// 防抖的customRef
function useDebouncedRef(value: string, delay = 200) {
  let timeout: number | undefined
  return customRef((track: () => void, trigger: () => void) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: any) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}
export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}

思考

是什么依赖Reactive值？是我们的渲染在依赖它们
为什么不显式指定Reactive值的依赖？

拥抱函数式，没有办法显式的提供依赖，我们不确定值，setup时候知道，但是render渲染时候，没有办法给它依赖了

Vue提供的Reactive模式和vue.observable有什么区别？

const state = Vue.observable({ count: 0 })
const Demo = {
    render(h) {
        return h('button', {
            on: { click: () => { state.count++ }}        
        }, `count is: ${state.count}`)    
    }
}

区别在于函数式