vue3的api解读之ref和reactive示例详解

更新时间：2023年05月30日 08:47:43 作者：路人i++

这篇文章主要介绍了vue3的api解读之ref和reactive详解，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

构造一个演示框架（VUE3）

vue-router
rollup-context

/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}`)    
    }
}

区别在于函数式

什么是Observable? 可以被观察的东西每个 ref()的值
Reactive === Observable ?

Reactive【响应式，这个组件，这个值，在任何时候，像人一样，有主动思维，知道怎么响应外部的环境，知道怎么去做】

Observable【设计模式，架构手段，就是去观察可以被观察的东西】

到此这篇关于vue3的api解读-ref和reactive的文章就介绍到这了,更多相关vue3 ref和reactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue数据变化但页面刷新问题
这篇文章主要介绍了vue数据变化但页面刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue视图响应式更新详细介绍
这篇文章主要介绍了Vue响应式原理，响应式就是当对象本身（对象的增删值）或者对象属性（重新赋值）发生了改变的时候，就会运行一些函数，最常见的示render函数
2022-09-09
基于Vue3实现组件封装的技巧分享
这篇文章主要介绍了基于Vue3实现组件封装的技巧,本文在Vue3的基础上针对一些常见UI组件库组件进行二次封装,旨在追求更好的个性化,更灵活的拓展,感兴趣的小伙伴跟着小编一起来看看吧
2024-09-09
关于Ant-Design-Vue快速上手指南+排坑
这篇文章主要介绍了关于Ant-Design-Vue快速上手指南+排坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue.js仿hover效果的实现方法示例
这篇文章主要介绍了vue.js仿hover效果的实现方法,结合实例形式分析了vue.js事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-01-01
详解基于mpvue的小程序markdown适配解决方案
本篇文章主要介绍了详解基于mpvue的小程序markdown适配解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue中$router.back()和$router.go()的用法
这篇文章主要介绍了vue中$router.back()和$router.go()的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue安装与使用
Vue是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！下面来看看其得安装及使用方法吧
2021-10-10
vue中动态修改animation效果无效问题详情
这篇文章主要介绍了vue中动态修改animation效果无效问题详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-06-06
VUE的数据代理与事件详解
这篇文章主要为大家介绍了VUE的数据代理与事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
2021-11-11