vue常见问题

一、vue开发问题记录

1. 深度（穿透）选择器的使用

在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）。本文对深度选择器做一个总结记录。

原生css: >>>

less: /deep/或::v-deep

dart-sass: ::v-deep

node-sass: /deep/或::v-deep

深度选择器只能在scope中起作用，建议使用::v-deep,因为他在任何css扩展语言下都可以

:deep() 是伪类选择器，都哪可以使用

blog.csdn.net/qq_59076775…

2. vue2.7 和 vue3 setup函数关于attrs和listeners的区别

• vue3移除了listeners，监听事件和attrs合并在一起。基于vue3封装第三方组件，如果需要在第三方组件的原有功能（属性props、事件events、插槽slots、方法methods）基础上扩展
• vue2.7 引入了vue3中composition api的阉割版，因此setup函数中的attrs属性是不存在监听事件的，因此如果需要继承父组件中的监听事件，需要使用this.listeners或者getCurrentInstance()提取listeners

参考文章juejin.cn/post/708502…

3. vue2使用<script setup>语法，报‘defineProps‘ is not defined错误

• 需要在项目eslintrc.js中新增'vue/setup-compiler-macros': true

module.exports = {
  root: true,
  env: {
    'vue/setup-compiler-macros': true,
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
}

4. 使用keep-alive include关联路由名称时不生效？

原因是如果views中页面使用setup script语法，就没有设置页面name属性。需要新建script设置name属性，例如新增：

<script lang="ts">
export default {
  name: 'Home',
}
</script>

注意： 使用keep-alive缓存页面时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是 activated 和 deactivated