Vue2.7 实战体验踩坑

前言

最近项目升级了vue到 2.7.8，发现相关的文章很少，文档可以说几乎没有，对此把业务开发中遇到的坑记录一下。

正文

1. 一个vue3 和 vue2.7 共性的问题，props解构会丢失响应式

const { source, visible } = defineProps(['source', 'visible']);

上面的source和visible会丢失响应式，父组件变了之后子组件不会响应变化

要这样写

const props = defineProps(['source', 'visible']);

用props.visible这样的方式才能保留响应式

2. router和store用法还得靠原本的vue实例去获取

// 获取实例
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

console.log(proxy.$router)
console.log(proxy.$route)
console.log(proxy.$store)

3. 需要注意语法虽然无限趋近vue3，但是实际上的内部实现还是vue2的原理，数据双向绑定依旧是依赖Object.definePropety

• 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength
• 由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除

对于上述的情况依旧依赖$set方法，写多了vue3语法差点都不知道怎么解决上述的情况，幸好可以通过

import { getCurrentInstance, set } from 'vue';

// 用法一
const { proxy } = getCurrentInstance();
proxy.$set(...)

// 用法二
set(...)

调用vue2本身的方法去给上述情况添加双向绑定

4.组件内如何使用路由守卫

没找到文档，谁找到可以评论下，但是摸索出了可用的方法

<script lang="ts">
  let isSave: boolean = false;
  export default {
    beforeRouteLeave(to, from, next) {
      if (!isSave) {
        const answer = window.confirm('确定离开本页吗？系统不会保存您所做的更改。');
        if (answer) {
          next();
        } else {
          next(false);
        }
      } else {
        next();
      }
    },
  };
</script>

<script lang="ts" setup>
...
</script>

---

目前就总结这些，之后再新增。