jQuery与Vue深度对比(建议收藏!)

<div>
  <h3>输入内容：<span id="content"></span></h3>
  <input type="text" id="input" placeholder="请输入...">
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// 1. 找到DOM元素
const $input = $('#input');
const $content = $('#content');

// 2. 绑定事件监听
$input.on('input', function() {
  // 3. 获取输入数据
  const val = $(this).val();
  // 4. 手动更新DOM
  $content.text(val);
});
</script>

<div id="app">
  <h3>输入内容：{{ content }}</h3>
  <input type="text" v-model="content" placeholder="请输入...">
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
  // 声明数据
  data() {
    return { content: '' };
  }
}).mount('#app'); // 挂载到DOM
</script>

// jQuery 手动封装"按钮组件"
function createButton(text, onClick) {
  // 创建DOM元素
  const $btn = $(`<button style="padding: 8px 16px; border: none; border-radius: 4px;">${text}</button>`);
  // 绑定事件
  $btn.on('click', onClick);
  return $btn;
}

// 使用组件
const $submitBtn = createButton('提交', () => alert('提交成功'));
const $cancelBtn = createButton('取消', () => alert('已取消'));
// 手动插入DOM
$('#app').append($submitBtn).append($cancelBtn);

<div id="app">
  <MyButton text="提交" @click="handleSubmit" />
  <MyButton text="取消" @click="handleCancel" />
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
// 定义组件
const MyButton = {
  props: ['text'], // 接收外部参数
  template: `<button class="my-btn" @click="$emit('click')">{{ text }}</button>`,
  styles: [`
    .my-btn { padding: 8px 16px; border: none; border-radius: 4px; }
  `]
};

createApp({
  components: { MyButton }, // 注册组件
  methods: {
    handleSubmit() { alert('提交成功'); },
    handleCancel() { alert('已取消'); }
  }
}).mount('#app');
</script>

// jQuery 时机控制
$(document).ready(function() {
  console.log('DOM结构就绪，可获取元素');
  const $app = $('#app'); // 可获取元素，但可能无法获取宽高
});

$(window).load(function() {
  console.log('所有资源加载完成');
  console.log($('#app').width()); // 可准确获取宽高
});

// Vue 生命周期
const { createApp } = Vue;
createApp({
  created() {
    console.log('实例创建，DOM未挂载');
    console.log(this.$el); // undefined
  },
  mounted() {
    console.log('组件挂载完成');
    console.log(this.$el.clientWidth); // 可获取宽高
  },
  beforeUnmount() {
    console.log('组件销毁前，清理资源');
  }
}).mount('#app');

// 1. Vue Router 路由配置（简化）
import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/user', component: User }
  ]
});

// 2. Pinia 状态管理（简化）
import { defineStore } from 'pinia';
const useUserStore = defineStore('user', {
  state: () => ({ name: 'Guest' }),
  actions: {
    setName(name) { this.name = name; }
  }
});

// jQuery 实现（性能较差）
const $list = $('#list');
// 循环插入DOM，触发1000次重排
for (let i = 0; i < 1000; i++) {
  $list.append(`<li>数据 ${i}</li>`);
}

// Vue 实现（性能优异）
const { createApp } = Vue;
createApp({
  data() {
    return { list: Array.from({ length: 1000 }, (_, i) => `数据 ${i}`) };
  },
  template: `<ul><li v-for="item in list" :key="item">{{ item }}</li></ul>`
}).mount('#list');