【Vue】Vue2和Vue3的区别

new Vue({       // 通常判断这是不是CDN版本，只需要看对象是不是Vue
  data() {
    return {
      count: 0,
      info: { name: 'Vue2' }
    }
  },
  methods: {
    increment() { this.count++ },
    addProperty() { 
      // 新增属性需要 Vue.set 才能响应式
      Vue.set(this.info, 'age', 3)
    }
  }
})

<script setup>
    import { ref, reactive } from 'vue'
    
    const count = ref(0)
    const info = reactive({ name: 'Vue3' })
    
    const increment = () => count.value++
    const addProperty = () => info.age = 3  // Proxy 自动跟踪，无需 Vue.set
</script>

<template>
  <p>{{ count }} - {{ info.name }} - {{ info.age }}</p>
  <button @click="increment">加1</button>
  <button @click="addProperty">加 age</button>
</template>

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    double() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  },
  mounted() {
    console.log('组件挂载了')
  }
}

<script setup>
    import { ref, computed, onMounted } from 'vue'
    
    const count = ref(0)
    const double = computed(() => count.value * 2)
    
    const increment = () => count.value++
    
    onMounted(() => console.log('组件挂载了'))
</script>

<template>
  <p>{{ count }} / {{ double }}</p>
  <button @click="increment">加1</button>
</template>

<template>
  <div>节点1</div>
  <!-- Vue 2 只能有一个根节点 -->
</template>

<template>
  <div>节点1</div>
  <div>节点2</div>
  <!-- Vue 3 支持多根节点（Fragment） -->
</template>

<input v-model="text" />

<MyComp v-model:title="title" v-model:content="content" />

<template>
  <Teleport to="body">
    <div class="modal">弹窗内容</div>
  </Teleport>
</template>

<template>
  <Suspense>
    <AsyncComp />
    <template #fallback>加载中...</template>
  </Suspense>
</template>