jsx语法

1.render函数中有 this ，通过this可以访问到setUp里定义的数据和方法等。
2.{}内部可以使用动态变量以及js代码。
3.子组件的注册在setUp()之前。
4.//#region 和 //#endregion包裹的注释掉的代码，不会被展开。
5./*eslint disable */在代码顶部添加这句代码，跳过eslint检测。
6.引入新的svg图标：先在阿里图标库的项目中点击 font-class 模式，再点击下载至本地，解压后，将所有文件 替换 到项目中。

7. nvm 切换node版本时出现问题，以管理员身份打开cmd试试。

一、插槽

1.具名插槽

<Child v-slot:"插槽名" />
或者<Child #插槽名 />

2.作用域插槽

<Child v-slot:插槽名="scope" />
或者 <Child #插槽名="scope" />

二、emits

1.子组件触发父组件的自定义事件时，需要 提前声明emits事件，它可以是一个数组，也可以是一个对象。
2.如果是 数组，则数组元素是事件名称字符串。
3.如果是 对象，则可以配置是否校验emit事件。值为null的时候代表不校验；值为回调函数时，会把emit事件的参数会作为这个校验函数的参数进行传递。
4.当校验函数不通过的时候，控制台会输出一个警告，但是 emit事件会继续执行。

  // 子组件要声明emits事件
  // emits: ['childClick'],
  emits: {
    childClick: (value) => {
      if (typeof value === 'string') {
        return true;
      }
      console.log('无效的数据，请检查childClick事件');
      return false;
    },
  },

三、toRaw和markRaw

1.toRaw

将 reactive定义 的响应式数据，转换成 普通数据。

const obj= reactive({ })
const newObj = toRaw(obj)

四、vuex和vue-router

1.导入方法： import { useStore } from 'vuex';
2.将 store 引入到页面组件中：const store = useStore();
3.import { useRouter } from 'vue-router';
4.const router = useRouter()

五、keep alive使用

https://juejin.cn/post/6844903846901186574

1.路由占位符的配置

（1）对需要被缓存的列表页 所对应的 <router-view /> 进行修改。
（2）web端项目，通常是在Home组件中，因为Home组件包括了左侧菜单和 右侧路由页面。
（3）将路由占位符修改为：

          <router-view v-slot="{ Component }">
            <keep-alive :include="include">
              <component :is="Component" />
            </keep-alive>
          </router-view>

（4）这是vue3写法，其中include属性可以是 数组 或配置函数。
（5）在Home组件中 监听 $route 的路由变化，实时修改include数组的值，从而决定哪些组件被缓存。

    data() {
      return {
        include: [],
      };
    },
    watch: {
      $route: {
        handler: function (to, from) {
          // 如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
          if (to?.meta.keepAlive) {
            !this.include.includes(to.name) && this.include.push(to.name);
          }
          // 如果 要 form(离开) 的页面是 keepAlive缓存的，
          // 再根据 deepth 来判断是前进还是后退
          // 如果是后退
          if (from?.meta.keepAlive && to.meta.deepth <= from.meta.deepth) {
            const index = this.include.indexOf(from.name);
            index !== -1 && this.include.splice(index, 1);
          }
        },
        immediate: true,
      },
    },

2.路由对象的配置

（1）给每个 渲染到Home组件的路由对象，添加meta属性。
（2）需要被缓存的列表页路由，keepAlive设置为 true，deepth设置为 中间值。

{
    path: '/grabOverdue',
    name: 'GrabOverdue',
    title: '列表页',
    component: () => import('@/views/survey-web-grab//overdue/index.vue'),
    meta: {
      keepAlive: true,
      deepth: 1,
    },
  },

（3）详情页路由，keepAlive设置为 false，deepth设置为 最大值。

{
    path: '/surveyMySurvey/&detail/:id',
    name: 'SurveyMySurveyDetail',
    title: '详情页',
    component: () => import('@/views/web-data-survey/survey-follow/index.vue'),
    meta: {
      keepAlive: false,
      deepth: 2,
    },
  },

（4）其余同级别路由，keepAlive设置为 false,deepth设置为 最小值。

{
    path: '/grabTaskPool',
    name: 'GrabTaskPool',
    title: '其他页面',
    component: () => import('@/views/survey-web-grab/task-pool/index.vue'),
    meta: {
      keepAlive: false,
      deepth: 0,
    },
  },

（5）当前的<router-view/>写法，完全根据include属性决定缓存哪些组件，所有可以不设置keepAlive属性。

3.被缓存的 列表页 的配置

（1）被缓存的列表页对应的路由组件 必须有name属性，属性值和 路由对象的name属性 保持一致。

1.PNG

4.详情页的配置

从详情页回到列表页，使用 $router.push() 方法。