【前端Vue3】——JQuery知识点总结（超详细）

在Vue 3中，JQuery通常不推荐使用，因为Vue 3已经将注意力转移到了Composition API上，而JQuery是基于DOM操作的命令式编程范式，与Vue的声明式编程方法有所冲突。

然而，如果你之前的项目依赖于JQuery，并且你需要在Vue 3项目中使用JQuery，你可以按照以下步骤进行：

1. 安装jQuery：

npm install jquery

2. 在Vue组件中引入jQuery并使用：

import { onMounted } from 'vue';
import $ from 'jquery';
 
export default {
  setup() {
    onMounted(() => {
      // 使用jQuery操作DOM
      $('#some-element').hide();
    });
  }
};

请注意，在Vue 3中，建议尽可能避免直接操作DOM，而是使用Vue的响应式系统和模板语法。如果你需要进行DOM操作，请考虑使用Vue的生命周期钩子和Composition API的ref来获取DOM元素的引用。

例如，使用Composition API替代JQuery的隐藏操作：

import { onMounted, ref } from 'vue';
 
export default {
  setup() {
    const someElement = ref(null);
 
    onMounted(() => {
      // 使用Vue的响应式引用来操作元素
      someElement.value.style.display = 'none';
    });
 
    return { someElement };
  }
};

在模板中使用该引用：

<template>
  <div ref="someElement">Some content</div>
</template>

总结，尽管jQuery是历史遗留问题，但在Vue 3中应该尽可能避免使用它，并利用Vue的响应式系统和Composition API来编写更现代、更符合Vue哲学的代码。