Vue——vue3.0 第三篇

1.toRef、toRefs、isRef、readonly

1.isRef：检测数据是否是由ref定义的响应式数据

let msg=ref("hello")

let mn="smg"

console.log(isRef("msg"))//true

console.log(isRef("mn"))//false

案例：

2.toRef、toRefs：把引用数据的属性值设置为变量 并且关联和设置为响应性变量

let obj={name:"karen",age:20}
//toRefs：多个赋值
//解构赋值
let {name,age}=toRefs(obj)
//toRef：单个赋值
let name=toRef(obj,name)

案例：

3.readonly

readonly方法接收一个对象（响应性或原始普通对象）或ref对象，返回这个对象的只读（但是具有响应性）代理对象。

import {isRef,reactive,toRef,toRefs,readonly} from "vue"
let obj=readonly({}) 

案例：

2.公共属性配置：globalProperties、 getCurrentInstance

1.在main.js文件中（配置公共属性）：

const app=createApp(App)
//在组件的原型上绑定公共属性
// 那么在任何组件上都可以使用公共属性
app.config.globalProperties.$设置的公共属性=公共数据
//将app挂载到页面上
app.mount('#app')

2.在组件文件中（获取公共属性，并使用公共属性的值）：

import {getCurrentInstance} from "vue"
// 获取实例对象(也就是组件对象)
let shuju=getCurrentInstance()
console.log(shuju)
// 获取公共属性应该用：获取到的数据.proxy.$公共属性
console.log(shuju.proxy.$公共属性)

注意：

1. getCurrentInstance函数必须在钩子函数中才能使用

2. 注意在setup钩子函数中，里面的一个函数内部再使用getCurrentInstance函数，结果打印为空（null）

案例：

3.网络配置

代理配置:

//vite环境:
export default defineConfig({
    plugins: [vue()],
    server: {
        // port:"8080",
        // host
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:7001', // 代理的目标地址
                rewrite: (path) => path.replace(/^/api/, '/'), // 路径重写
                changeOrigin: true,
                // secure: true, // target是否https接口
                // ws: true, // target是否代理websockets               
            }
        }
    }
})
    
    
    
​
//webpack环境不变:
module.exports={
    lintOnSave:false,
    devServer:{
        port:"10086",
        host:"localhost",
        proxy:{
            "/":{
                target:"http://127.0.0.1:7001",
                changeOrigin:true,
                pathRewrite:{"^/":""}
            }
        }
    }
}

网络配置:

//mian.js
import axios from "axios"
const app=createApp(App)
axios.defaults.baseURL="http://127.0.0.1:7001/api"
app.config.globalProperties.$axios=axios
app.mount('#app')
​
//组件.vue
<script setup>
    import {ref,reactive,computed,onBeforeMount,getCurrentInstance,effect} from "vue"   
    const { proxy } = getCurrentInstance();//注意在组件钩子中获取,不要在事件中
    let fn=()=>{
        proxy.$axios("/test")
    }
​

案例：

前端：

后端：

运行结果：

4. app.use插件配置

插件配置

同2.0一样use函数接受一个函数或者对象(对象有install函数) 然后会调用这个传入的回调函数 给它传参app对象,以此来实现第三方插件

//main.js文件
import { createApp} from 'vue'
import App from './App.vue'
const app=createApp(App)
​
​
import $hqyj from "./http/$hqyj.js"
app.use($hqyj)
​
​
import $axios from "./http/$axios.js"
app.use($axios)
​
​
app.mount('#app')
​
​
​
//$hqyj.js文件
function $hqyj(app){
    app.config.globalProperties.$hqyj="5000e"
}
export default $hqyj;
​
​
//$axios文件
import axios from "axios"
function $axios(app){
    axios.defaults.baseURL="http://127.0.0.1:5173/api"
    app.config.globalProperties.$axios=axios
}
export default $axios;
​
​
//组件中就可通过获取实例对象 来获取公共属性中的$hqyj的"5000e"  $axios的网络工具
//组件内:
//1.钩子函数中获取实例对象: 
//2.获取公共属性中的数据
<script setup>
    import {onMounted,getCurrentInstance} from "vue"
    // import axios from "axios"
    let {proxy}=getCurrentInstance()
    onMounted(async ()=>{
        //axios.defaults.baseURL="http://127.0.0.1:5173/api"        
        let res=await proxy.$axios('/test')//"http://127.0.0.1:5173/api/test"==>"http://127.0.0.1:7001/test"
        console.log(res,proxy.$hqyj,11111111111)
    })  
​

案例：

5.路由配置

使用思路跟之前差不多 语法略微有变化

• createWebHashHistory　　----路由模式路径带#号
• createWebHistory: history的路由，路径里面不含有#

//路由文件
//引入router模块
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
//注册路由
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue'),
      //独享守卫
    beforeEnter(to,from,next){
        next()
     }
  },
  {
    path: '/car',
    name: 'car',
    component: () => import('../views/Car.vue'),
    //注册子路由
    children:[
        {
        path: '/car/son1',
        name: 'son1',
        component: ()=>import("../views/Son1.vue")  
        }
    ]
  }
]
//创建路由，配置路由规则
//- createWebHashHistory　　----路由模式路径带#号
//- createWebHistory: history的路由，路径里面不含有#
const router = createRouter({
  history: createWebHistory(),
  routes
})
//全局守卫
router.beforeEach((to,from,next)=>{
    console.log()
    next()
})
​
router.beforeResolve((to,from,next)=>{
    next()
})
​
router.afterEach((to,from)=>{
    
})
​//导出路由
export default router
​
​
//main.js文件
import router from "./router/index.js"
app.use(router)//记得在mount之前调用
​
​
​
//组件内部的使用
import {onBeforeRouteLeave,useRouter,useRoute} from "vue-router"
    let router=useRouter()
​
    let fn=()=>{
    //route:路由信息对象
        let route=useRoute()    
         console.log(route.query)
         //跳转页面
        router.push({path:"/car/son1",query:{id:123}})
    }
    
    //组件内的守卫钩子
    onBeforeRouteLeave((to,from,next)=>{
        console.log(66666,"离开")
        next()
    })
​
router-view和router-link组件不变
​