Vue3初识介绍

1.Vue3简介

2.Vue3带来了什么

1.性能的提升

  • 打包大小减少41%

  • 初次渲染快55%, 更新渲染快133%

  • 内存减少54%

    等……

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式

  • 重写虚拟DOM的实现和Tree-Shaking

    ……

3.拥抱TypeScript

  • Vue3可以更好的支持TypeScript

4.新的特性

  1. Composition API（组合API）
    • setup配置
    • ref与reactive`
    • watch与watchEffect
    • provide与inject
    • ……
  2. 新的内置组件
    • Fragment
    • Teleport
    • Suspense
  3. 其他改变
    • 新的生命周期钩子
    • data 选项应始终被声明为一个函数(Vue2中可以被设置成一个对象或方法)
    • 移除keyCode支持作为 v-on 的修饰符(即不能再使用类似@keyup.13这种写法了!)
    • ……

一、创建Vue3.0工程

1.使用 vue-cli 创建

  • 官方文档
    ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
    vue --version
    ## 安装或者升级你的@vue/cli
    npm install -g @vue/cli
    ## 创建
    vue create vue_test
    ## 启动
    cd vue_test
    npm run serve

2.分析工程结构

  • main.js(对比Vue2)
    // 这里不再是引入vue构造函数了，引入的是一个名为createApp的工厂函数(不再需要通过调用new实例来调用)
    import { createApp } from 'vue'
    // 引入所有组件的父组件app
    import App from './App.vue'

    // 创建应用实例对象-app(类似于Vue2中的vm,但是app比vm更"轻",圣上没有那么多方法和属性了)
    // createApp(App).mount('#app')

    // 完整写法
    const app = createApp(App)
    console.log(app);

    // 挂载:mounte('组件id')
    app.mount('#app')

    // 卸载:unmounte('组件'id)
    // setTimeout(()=>{//设置延时1s卸载
    //     app.unmount('#app')
    // },1000)

    // Vue2写法(Vue3中不再支持这种写法)
    // const vm = new Vue({
    //     render:h => h(App)
    // })
    // vm.$mounte('#app')
  • App.vue
    <template>
      <!-- Vue3新特性,模板结构中引用多个组件不再需要根标签(可有可无) -->
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </template>

    <script>
      // 引入组件
    import HelloWorld from './components/HelloWorld.vue'

    export default {
      name: 'App',
      // 注册组件
      components: {
        HelloWorld
      }
    }
    </script>