Vue 2 与 Vue 3 的区别（模板和语法对比）

目录

Vue 2 与 Vue 3 的模板和语法对比

1. 组件定义

2. 生命周期钩子

Vue 3 的其他新特性

1. 多个根节点

2. 更好的自定义指令 API

3. 更强大的 组件

4. 组件支持异步组件加载

结语

---

Vue 2 与 Vue 3 的模板和语法对比

1. 组件定义

Vue 2：

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

Vue 3：

// Vue 3
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

2. 生命周期钩子

Vue 2：

// Vue 2
export default {
  mounted() {
    console.log('Component is mounted!')
  }
}

Vue 3：

// Vue 3
import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

Vue 3 的其他新特性

1. 多个根节点

Vue 3 允许在一个组件模板中有多个根节点，而不再需要一个包裹元素。这使得组件结构更加简洁。

Vue 2：

<template>
  <div>
    <header>Header</header>
    <main>Main content</main>
  </div>
</template>

Vue 3：

<template>
  <header>Header</header>
  <main>Main content</main>
</template>

2. 更好的自定义指令 API

Vue 3 优化了自定义指令的 API，使得创建和使用自定义指令更加容易。

Vue 2：

// Vue 2
Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

Vue 3：

// Vue 3
import { defineDirective } from 'vue'

const focus = defineDirective((el, binding, vnode, prevVnode) => {
  el.focus()
})

export default focus

3. 更强大的 <teleport> 组件

<teleport> 组件取代了 Vue 2 中的 <portal>，允许你将子组件渲染到 DOM 中的任何位置，而不仅仅是当前组件的位置。

<teleport to="#modal-container">
  <div class="modal">
    <!-- ... -->
  </div>
</teleport>

4. <suspense> 组件支持异步组件加载

<suspense> 是一个新的内置组件，可以让你等待异步组件加载完成，并在加载过程中显示一个备用内容。

<suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</suspense>

以上是 Vue 2 和 Vue 3 的模板和语法对比以及 Vue 3 的一些其他新特性。

结语

本文介绍了 Vue 2 和 Vue 3 之间的区别以及 Vue 3 相对于 Vue 2 的新特性，并给出了相应的模板和用法。希望这篇文章能帮助你更好地理解 Vue 3，并在实际项目中运用这些新特性。当然，Vue 3 还有更多值得探索的特性，欢迎大家在实践中发现并分享。