202.9.26（vue3）

一：

import { useRoute, useRouter } from 'vue-router'

useRouter 相当于vue2的this.$router全局的路由实例，是router构造方法的实例；

useRoute 相当于vue2的this.$route表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route路由记录；

二：

vue3之全局变量app.config.globalProperties的使用

在main.js里面配置config

const app = createApp(App);
app.config.globalProperties.$user = {
    name: '梅长苏',
    weapons: '长剑',
    title: '刺客'
}

在template模板中使用

<p>姓名：{{$user.name}} </p>

在setup中使用

const cns = getCurrentInstance()
console.log(cns.appContext.config.globalProperties.$user)

 // or
 const {proxy} = getCurrentInstance()
 console.log(proxy.$user)

globalProperties和provide的使用区别：globalProperties是挂载在vue实例上面的，所以可以直接在template里面访问；provide/inject 是为vue组件通讯设计的一对方法，需要显示的声明之后才能使用，并且当前组件的provide指向其父组件的provides对象，父级provide会覆盖祖父级的同名参数，具体实现可以参考vue源码. 使用如下:

在app.vue里面注入：
provide() {
return {
call: '我去',
test: '试试就试试'
}
}

在parent.vue里面注入：
provide() {
return {
call: '你好'
}
}

在child.vue里面获取：
inject: ['call' , 'test']
得到： ’你好' '试试就试试'

 

三：getCurrentInstance()的proxy

  import {  getCurrentInstance } from 'vue';
  setup(){
     // 获取当前组件实例
     const instance = getCurrentInstance();
     // 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
     const { ctx }  = getCurrentInstance();  //  方式一，这种方式只能在开发环境下使用，生产环境 下的ctx将访问不到
     const { proxy }  = getCurrentInstance();  //  方式二，此方法在开发环境以及生产环境下都能到组件上下文对象（推荐）
     // ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
     proxy.$attrs
     proxy.$data
     proxy.$el
     proxy.$emit
     proxy.$forceUpdate
     proxy.$nextTick
     proxy.$options
     proxy.$parent
     proxy.$props
     proxy.$refs
     proxy.$root
     proxy.$slots
     proxy.$watch
  }