vue3| 青训营笔记

vue3前置

前言

这是我参与「第四届青训营」笔记创作活动的的第2天

01-为什么学vue3

目标：了解vue3现状，以及它的优点，展望它的未来

Vue3现状：

• vue-next (opens new window)2020年09月18日，正式发布vue3.0版本。但是由于刚发布周边生态不支持，大多数开发者处于观望。

• 现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。

  • element-plus (opens new window)基于 Vue 3.0 的桌面端组件库
  • vant (opens new window)vant3.0版本，有赞前端团队开源移动端组件库
  • ant-design-vue (opens new window)Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发

Vue3优点：

• 最火框架，它是国内最火的前端框架之一，官方文档 (opens new window)中文文档(opens new window)
• 性能提升，运行速度事vue2.x的1.5倍左右
• 体积更小，按需编译体积比vue2.x要更小
• 类型推断，更好的支持Ts（typescript）这个也是趋势
• 高级给予，暴露了更底层的API和提供更先进的内置组件
• ★组合API (composition api)  ，能够更好的组织逻辑，封装逻辑，复用逻辑

Vue3展望：

• 这是趋势，越来越多的企业将来肯定会升级到Vue3.0
• 大型项目，由于对Ts的友好越来越多大型项目可以用Vue3.0

总结：  为什么要学 vue3 ?

• 适应市场学习流行的技术提高提升自己竞争力，给自己加薪。

#02-vite基本使用

目标：了解vite是什么，使用vite创建vue项目，用来学习vue3知识

vite是什么：官方文档(opens new window)

• 它是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架工具。
• 相对于vue-cli它默认安装的插件非常少，随着开发过程依赖增多，需要自己额外配置。
• 所以：  在单纯学习vue3语法会使用它，后面做项目的时候我们还是使用vue-cli

vite基本使用：

• 创建项目 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称
• 安装依赖 npm i 或者 yarn
• 启动项目 npm run dev 或者 yarn dev

总结：  vite是什么？

• 使用vite创建项目学习vue3语法，使用vue-cli创建项目正式开发。

#03-创建vue应用

目标：掌握如何创建vue3应用实例

基本步骤：

• 在main.js中导入createApp函数
• 定义App.vue组件，导入main.js
• 使用createApp函数基于App.vue组件创建应用实例
• 挂载至index.html的#app容器

落地代码：

App.vue

<template>
  <div class="container">
    我是根组件
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

main.js

// 创建一个vue应用
// 1. 导入createApp函数
// 2. 编写一个根组件App.vue，导入进来
// 3. 基于根组件创建应用实例
// 4. 挂载到index.html的#app容器

import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

总结：  如何创建vue应用实例？

• 通过createApp创建应用实例--->扩展功能将来都是在app上进行。

• 04-选项API和组合API

目标：理解什么是选项API写法，什么是组合API写法。

什么是选项API写法：Options ApI

• 咱们在vue2.x项目中使用的就是 选项API 写法

  • 代码风格：data选项写数据，methods选项写函数...，一个功能逻辑的代码分散。

• 优点：易于学习和使用，写代码的位置已经约定好

• 缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。

• 补充：虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护。

<template>
  <div class="container">
    <div>鼠标位置：</div>
    <div>X轴：{{x}}</div>
    <div>Y轴：{{y}}</div>
    <hr>
    <div>{{count}} <button @click="add()">自增</button></div>  
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      x: 0,
      y: 0,
      count: 0
    }
  },
  mounted() {
    document.addEventListener('mousemove', this.move)
  },
  methods: {
    move(e) {
      this.x = e.pageX
      this.y = e.pageY
    },
    add () {
        this.count++
    }    
  },
  destroyed() {
    document.removeEventListener('mousemove', this.move)
  }
}
</script>

什么是组合API写法：Compositon API

• 咱们在vue3.0项目中将会使用 组合API 写法

  • 代码风格：一个功能逻辑的代码组织在一起（包含数据，函数...）

• 优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护

• 缺点：需要有良好的代码组织能力和拆分逻辑能力，PS：大家没问题。

• 补充：为了能让大家较好的过渡到vue3.0的版本来，也支持vue2.x选项API写法

<template>
  <div class="container">
    <div>鼠标位置：</div>
    <div>X轴：{{x}}</div>
    <div>Y轴：{{y}}</div>
    <hr>
    <div>{{count}} <button @click="add()">自增</button></div>  
  </div>
</template>
<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
export default {
  name: 'App',
  setup () {
    // 鼠标移动逻辑
    const mouse = reactive({
      x: 0,
      y: 0
    })
    const move = e => {
      mouse.x = e.pageX
      mouse.y = e.pageY
    }
    onMounted(()=>{
      document.addEventListener('mousemove',move)
    })
    onUnmounted(()=>{
      document.removeEventListener('mousemove',move)
    })

    // 累加逻辑
    const count = ref(0)
    const add = () => {
      count.value ++ 
    }

    // 返回数据
    return {
      ...toRefs(mouse),
      count,
      add
    }
  }
}
</script>

总结：

• 知道选项API和组合API的写法区别，建议大家使用组合API在vue3.0项目中。