Vue3 常用功能及问题

Vue3路由跳转方式

vue3.x中路由跳转不能使用 this.$router 。引入 ctx，使用ctx.$router.push()的话，打包后会出现各种各样的报错问题。要这样来：

1.首先导入router.js

2.router.push实现跳转

Vue3使用 this（即ctx）

我们都知道在Vue2的任何一个组件中想要获取当前组件的实例可以通过this 来得到，而在Vue3中我们大量的代码都在 setup 函数中运行，并且在该函数中 this 指向的是 undefined，那么该如何获取到当前组件的实例呢？
这时可以用到另一个方法，即 getCurrentInstance

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.config.globalProperties.name = 'xiaoming'
app.mount('#app')

在HelloWorld.vue中

<script>
import {ref, getCurrentInstance,onMounted} from 'vue'
export default {
setup(){
	const { ctx } = getCurrentInstance();
	// 在ts中直接使用 const { ctx }=getCurrentInstance().可能会报 Property 'ctx' does not exist on type 'ComponentInternalInstance | null'. 的错误. 可以这样解决： const { ctx } = (getCurrentInstance() as any);
	onMounted(()=>{
		console.log('ctx',ctx.name); // xiaoming
	})
}}
</script>

vue3中使用全局变量(vue2x中的Vue.prototype)

既 provide/inject

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.provide('name','小明')
app.mount('#app')

在HelloWorld.vue中

import {onMounted,inject} from 'vue'
setup(){
	const name = inject('name')
	onMounted(()=>{
		console.log('name',name); // 小明
	})
}

vue3文件里使用 Vuex（useStore）

在Vue2中使用 Vuex，我们都是通过 this.$store 来与获取到Vuex实例，但上一部分说了原本Vue2中的 this 的获取方式不一样了，并且我们在Vue3的 getCurrentInstance().ctx 中也没有发现 $store 这个属性，那么如何获取到Vuex实例呢？这就要通过 vuex 中的一个方法了，即 useStore
在store.ts中 定义

import { createStore } from 'vuex'
interface State {
  loadding: boolean;
  [propName: string]: any;
}
export default createStore({
  state : {
    loadding: false as boolean,
    name:'小明'
  },
  mutations: {
    showloadding(state, load) {
      state.loadding = load
    }
  },
  actions: {
    setloadding(context,load){
      context.commit("showloadding",load);
    }
  },
  getters: {
    isloading:(state)=>{
      return state.loadding
    }
  },
})

在HelloWorld.vue中

<script>
// 从 vuex 中导入 useStore 方法
import {useStore} from 'vuex'
export default {
    setup() {	
        // 获取 vuex 实例
        const store = useStore()
        console.log(store)//打印结果如下
    }
}
</script>

vue3 获取标签元素

在Vue2中，我们获取元素都是通过给元素一个 ref 属性，然后通过 this.$refs.xx 来访问的，但这在Vue3中已经不再适用了。vue3 可以使用 ref 另外的作用，那就是可以获取到标签元素或组件。

<template>
  <div>
    <div ref="el">div元素1</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
      // 创建一个DOM引用，名称必须与元素的ref属性名相同
      const el = ref(null)

      // 在挂载后才能通过 el 获取到目标元素
      onMounted(() => {
        el.value.innerHTML = '内容被修改'
      })

      // 把创建的引用 return 出去
      return {el}
  }
}
</script>

获取元素的操作一共分为以下几个步骤：

1.先给目标元素的 ref 属性设置一个值，假设为 el。
2.然后在 setup 函数中调用 ref 函数，值为 null，并赋值给变量 el，这里要注意，该变量名必须与我们给元素设置的 ref 属性名相同。
3.把对元素的引用变量 el 返回（return）出去

补充：设置的元素引用变量只有在组件挂载后才能访问到，因此在挂载前对元素进行操作都是无效的