可以不用watch直接往自定义函数中传ref,处理完后返回响应式的标志（showMenu），dropdown中直接使用这个标志可以控制下拉框显示图片描述

vscode的setting.json

{
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "eslint.autoFixOnSave": true,
    },
    "eslint.format.enable": true,
    "eslint.validate": [
      "javascript",
      "vue",
      "html"
    ],
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
    
      "wrap_attributes": "force-aligned",
      "js-beautify-html": {
        "wrap_attributes": "auto",
      },
      "prettier": {
        "semi": false,
        "singleQuote": true,
        "trailingComma": "none"
      }
    },
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.formatOnType": true,
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.experimental.templateInterpolationService": true,
    "eslint.codeAction.showDocumentation": {
    
      "enable": true
    },
    "vetur.validation.script": false,
    "vetur.validation.template": false,
    "[typescript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "workbench.editorAssociations": {
      "*.ipynb": "jupyter-notebook"
    },
    "liveServer.settings.donotShowInfoMsg": true,
    "[html]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "workbench.colorTheme": "GitHub Dark",
    "workbench.iconTheme": "material-icon-theme",
    "editor.linkedEditing": true
  }