VUE3.0项目实战（三）--API解读ref and Reactive

初始化学习项目

为了让学习项目更符合我们开发需求，我们需要加入路由去导航我们的每一个页面，但是我又不想写一个api就去创建一个route，那么我们就可以去利用rollup读文件的功能，并且自动生成我们需要的目录。

1. 安装route

   yarn add vue-router@next

2. main.js里面解析我们练习的文件夹。

   import { createApp } from 'vue'
   import {createRouter,createWebHashHistory} from 'vue-router'
   import './style.css'
   import App from './App'
   
   const ApiPage = import.meta.glob('./api/**/*.*sx')
   const ApiPagePromises = Object.keys(ApiPage)
   .map(x=>ApiPage[x])
   .map(f=>f())
   
   const routes = []
   
   Promise.all(ApiPagePromises)
   .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
       })
       const app = createApp(App,{routes})
       app.use(router)
       app.mount('#app')
   })

3. 在App里面使用路由。简单的项目就构建完成了,并书写css。

   import { RouterLink,RouterView } from "vue-router"
   
   export default (props)=>{
       console.log(props);
       return (
       <>
       <header>
           <h2>router</h2>
       </header>
       <div class='body'>
           <ul class='menu'>
               {
                   props.roters?.map((x)=>{
                       return (
                           <li key = {x.key}>
                               <RouterLink to= {x.path}></RouterLink>
                           </li>
                       )
                   })
               }
           </ul>
           <div class='content'>
               <RouterView/>
           </div>
       </div>
       </>
       )
   
   }

   如此这样我们，我们可以正式开始学api了。

Ref

Ref是vue响应式的核心

Ref官方文档

  在组合式 API 中，推荐使用 ref() 函数来声明响应式状态。

1.使用ref创建一个动态响应式的值。

export const RefApi01 = defineComponent({
    setup(){
        const count = ref(0)
        return ()=>{
            return(
            <div>
                <button onClick={()=>{
                    count.value++
                }}>+</button>
                {count.value}
            </div>
            )
            
        }
    }
})

简单使用响应式值，使用ref定义的变量，点击加号，动态改变数字。

这里setup的意思是安装，意思是这个只安装一次，而render函数是每一次都会执行。

• 如果这里没有用到那个value，那么就不会进行重绘，就不会进行跟踪，这样就不会重绘。

如果需要页面重绘，就需要使用ref的value，这样就会重绘页面了

组件里面使用ref

如果两个组件同时使用组件，那么当ref值改变，随之两个组件都会触发。

export const RefApi03 = defineComponent({
    setup(){
        return ()=>{
            const count = ref(0)
            return (
                <div>
                    <button onClick={()=>{
                        count.value++
                    }}> +
                    </button>
                    <div>{count.value}</div>
                    <Counter count = {count}/>
                </div>
            )
        }
    }
})

const Counter = ({count})=>{
    return <div>{count.value}</div>
}

效果就是，当count改变则两个组件内的count都会响应

在这里应该有部分同学疑惑为什么这里写组件可以不用defineComponent呢，其实这里是vue的一个能力写简单组件时可以不用直接写，那么什么是简单组件就是没有响应值，只是去展示数据的那部分组件。

Reactive

还有另一种声明响应式状态的方式，即使用 reactive() API

链接就在ref的下面。

与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性。

对多组数据进行一个代理

export const ReativeApi01 = defineComponent({
    setup(){
        const state = reactive({
            a:'123',
            b:2
        })
        setTimeout(()=>{
            state.a = '456'
        },1000)
        setTimeout(()=>{
            state.a ='789'
        },2000)
        return ()=>{
            return (
                <div>
                    <div>{state.a}</div>
                    <div>{state.b}</div>
                </div>
            )
        }
    }
})

其次我们还可以通过一个方法去把reactive转成ref。（toRefs)

总结

响应式是vue的基础也是vue的核心，虽然简单，但是在vue中几乎任何一个地方都可以见到他，然后呢，ref还有其他api,可以去官方文档了解一下。