Vue 和 Vue 之间的区别视图3

// vue 2 reactivity using object.defineproperty
const data = { message: 'hello vue 2' };

object.defineproperty(data, 'message', {
  get() {
    // getter logic
  },
  set(newvalue) {
    // setter logic
    console.log('message changed to:', newvalue);
  }
});

data.message = 'hello world';  // console: message changed to: hello world

// vue 3 reactivity using proxy
const data = vue.reactive({ message: 'hello vue 3' });

vue.watcheffect(() => {
  console.log('message changed to:', data.message);
});

data.message = 'hello world';  // console: message changed to: hello world

// vue 2 component using options api
vue.component('my-component', {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  template: `<button @click="increment">{{ count }}</button>`
});

// vue 3 component using composition api
import { definecomponent, ref } from 'vue';

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

    return { count, increment };
  },
  template: `<button @click="increment">{{ count }}</button>`
});

// vue 2 with typescript
import vue from 'vue';
import component from 'vue-class-component';

@component
export default class mycomponent extends vue {
  message: string = 'hello';

  greet() {
    console.log(this.message);
  }
}

// vue 3 with typescript
import { definecomponent, ref } from 'vue';

export default definecomponent({
  setup() {
    const message = ref<string>('hello');

    const greet = () => {
      console.log(message.value);
    };

    return { message, greet };
  }
});

<!-- vue 3 teleport feature -->
<template>
  <div>
    <h1>main content</h1>
    <teleport to="#modals">
      <div class="modal">
        <p>this is a modal</p>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  name: 'app'
};
</script>

<!-- in your html -->
<div id="app"></div>
<div id="modals"></div>

<!-- vue 2 requires a single root element -->
<template>
  <div>
    <h1>title</h1>
    <p>content</p>
  </div>
</template>

<!-- vue 3 supports fragments with multiple root elements -->
<template>
  <h1>title</h1>
  <p>content</p>
</template>

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

<script>
import { defineComponent, h } from 'vue';

const AsyncComponent = defineComponent({
  async setup() {
    const data = await fetchData();
    return () => h('div', data);
  }
});

export default {
  components: {
    AsyncComponent
  }
};
</script>