Vue 2.6 中使用 Composition Api 笔记

我的开发环境

我相关依赖的版本是

• "vue": "2.6.10",

想要使用 Composition Api 的话，需要安装一个依赖 "@vue/composition-api": "^1.7.2", 然后再 main 函数里使用

Vue2.6 + Composition Api 风格总结

• 这个 Vue 的版本，想要用 Composition Api，只能用这种方式写，

  export default {
    setup() {}
  };
  

• 我以为可以定义在 <script setup> 里呢，试过了，并不可以

• 变量的定义跟 Vue3 的用法差不多

• Route，Router 可以从 Vue 当前的实例中获取

获取当前组件的上下文

通过 setup(props, context) 的 context

获取路由

有以下几种方式

• main.js 函数中依赖注入
• main 中把方法挂到全局 vue ，然后通过 context 拿到根节点，但是这个并不是响应式的，所以你用 watch 监听它是拿不到变化的值

依赖注入（我的有问题）

不过这种方式并拿不到当前的路由

通过 Vue 上下文获取

打印一下 setup 的形参

export default {
  name: 'MyComponent',
  setup(props, context) {
  	console.log('props, context:>>', props, context)
  }
}

可以看到，通过 context.root.$route 可以获取到，当然，你的 $route 起码要挂在全局的 Vue 上

其他方法总结

• watch 同理
• nextTick() 同理
• onMounted 同理
• 其他的方法等我用到再说把

同理的意思是：跟 vue3 的写法差距不大

---

路由守卫

路由守卫的话是不能写在 setup 函数里的，得跟 setup 同级

参考

1. 迁移至 Vue 2.7