浅谈vue2与vue3的区别

// Vue 2 响应式系统的示例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue 2'
  
  mounted() {
    // 使用 Vue.set 来新增响应式属性
    this.$set(this.$data, 'newMessage', 'New Hello');
  }
});

javascript
// Vue 3 响应式系统的示例
import { reactive } from 'vue';

const state = reactive({
  message: 'Hello Vue 3'
});

state.newMessage = 'New Hello';  // 不需要使用 Vue.set

// Vue 2 使用 Options API
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

// Vue 3 使用 Composition API
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
};

<!-- Vue 2 使用 v-model -->
<template>
  <input v-model="message" />
</template>

<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
</script>

<!-- Vue 3 使用 v-model -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event)" />
</template>

<script>
export default {
  props: {
    modelValue: String
  }
};
</script>

// Vue 2 生命周期钩子
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  }
});

// Vue 3 生命周期钩子
import { onMounted, ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3');

    onMounted(() => {
      console.log('Component mounted');
    });

    return { message };
  }
};

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {  必须通过这里，确保状态的可追踪性
        increment(state) {
            state.count++;
        }
    },
    actions: {
        incrementAsync({ commit }) {
            setTimeout(() => {
                commit('increment');
            }, 1000);
        }
    },
    getters: {
        doubleCount(state) {
            return state.count * 2;
        }
    }
});

// Vue 2 TypeScript 示例
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

// Vue 2 异步组件的实现
Vue.component('async-component', () => ({
  component: import('./AsyncComponent'),
  loading: LoadingComponent,
  error: ErrorComponent,
}));

import { defineStore } from 'pinia';
 
export const useMainStore = defineStore('main', {
    state: () => ({
        count: 0
    }),
    actions: {
        increment() {
            this.count++;
        }
    },
    getters: {
        doubleCount: (state) => state.count * 2
    }
});

// Vue 3 TypeScript 示例
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
});

<!-- Vue 3 使用 Teleport -->
<template>
  <teleport to="body">
    <div class="modal">This is a modal</div>
  </teleport>
</template>

<!-- Vue 3 使用 Suspense -->
<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncComponent: defineAsyncComponent(() => import('./AsyncComponent'))
  }
};
</script>