Vue3基础教程(一) - 博客详情

经过了漫长的迭代，Vue 3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript 进行了大规模的重构，带来了Composition API RFC版本，类似React Hook 一样的写Vue，可以自定义自己的hook ，让使用者更加的灵活，接下来总结一下vue 3.0 带来的部分新特性。

1.Vue3的新特征

Vue2对TypeScript支持不友好（所有属性都放在了this对象上，难以推倒组件的数据类型）
Vue2大量的API挂载在Vue对象的原型上，难以实现TreeShaking。
Vue2架构层面对跨平台dom渲染开发支持不友好
Vue3 更方便的支持了 jsx
Vue 3 的 Template 支持多个根标签，Vue 2 不支持
Vue3 对虚拟DOM进行了重写、对模板的编译进行了优化操作。

2.第一个Vue3实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.prod.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>

<script>
    Vue.createApp({
        data() {
            return {
                msg: 'hello,vue3!'
            }
        }
    }).mount('#app');
</script>

</body>
</html>

我们发现，Vue 3 使用createApp()创建Vue组件，而 Vue 2 是使用 new Vue()。类似于Java我们也在调用createApp时候传入一个用来初始化的对象。上例改下如下：

<script>
    const App = {
        data() {
            return {
                msg: 'hello,vue3!'
            }
        }
    }
    Vue.createApp(App).mount('#app');
</script>