Vue3 新特性学习总结(一)Vue3 初体验掘力星计划--- 对于 Vue3, 已经发布有一段时间了, 也断断续续探索

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

对于 Vue3, 已经发布有一段时间了, 也断断续续探索过, 学习过, 但不是太系统, 也没有总结, 借这个周末作个简单的总结:

配置 Vue3 开发环境

Vue3 仓库 & 文档地址

Vue3 的源码仓库: github.com/vuejs/vue-n…

Vue3 的文档地址: v3.vuejs.org/

一个基于 Vue3 + TypeScript 的小实战项目: github.com/xn213/zhihu…

创建一个 Vue3 版本项目

1. 用脚手架创建项目:

# 安装或者升级
npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 保证 vue cli 版本在 4.5.0 以上
vue --version

# 创建一个项目
vue create vue3_study

用脚手架创建项目, 同样会给出一些关于项目选项的配置供我们选择, 接下来作下备注解释:

Please pick a preset - 选择 Manually select features
Check the features needed for your project - 多选择上 TypeScript，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
Use class-style component syntax - 输入 n，回车
Use Babel alongside TypeScript - 输入n，回车
Pick a linter / formatter config - 直接回车
Pick additional lint features - 直接回车
Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 输入n，回车
1. 当然也可以使用图形化界面创建项目, 还是命令行创建的多一些

# 形化界面创建项目
vue ui

然后启动项目就可以在浏览器打开看到了

学习 Vue3 项目推荐的一些插件

一直使用的 VSCode 敲代码, 这里列举安装的一些插件

Vue Language Features (Volar): 和 Vetur 相对应的

Volar

Fast Vue Language Support Extension VueLF is a Language Support plugin built specifically for Vue 3

Eslint 插件 最常用的代码格式化检查插件:ESLint

如果 eslint 不生效，可以在项目根目录创建 .vscode 文件夹，然后在文件夹中创建 settings.json

然后输入下面代码

{
  "eslint.validate": ["typescript"]
}

项目结构及一些代码演示

Ref 语法结构

setup 方法

如下所以代码, 在 Vue2.x 中写在 methods created mounted 中的代码逻辑现在都可以写在 setup(){...} 中,

然后需要在 setup() 中返回需要用到的方法函数和用到的数据等.

ref 函数

ref 是一个函数，它接受一个参数，它返回的就是一个神奇的响应式对象。我们初始化的这个 0 作为参数包裹到这个对象中去，在未来可以检测到改变并作出对应的响应。

<script lang="ts">
import { computed, defineComponent, onMounted } from 'vue'
import ColumnList from '../components/ColumnList.vue'
import Uploader from '../components/Uploader.vue'
import { useStore } from 'vuex'
import { GlobalDataProps, ResponseType, ImageProps } from '../store'
import createMessage from '../components/createMessage'
// import { testData } from '../const/testData'
export default defineComponent({
  name: 'Home',
  components: {
    ColumnList,
    Uploader
  },
  setup () {
    const store = useStore<GlobalDataProps>()

    const beforeUpload = (file: File) => {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        createMessage('上传图片只能是 jpg 格式', 'error')
      }
      return isJPG
    }
    const onFileUploaded = (rawData: ResponseType<ImageProps>) => {
      createMessage(`上传图片Id ${rawData.data._id}`, 'success')
    }

    const onFileUploadedError = (rawData: ResponseType<ImageProps>) => {
      createMessage(`上传图片 Id ${rawData.data._id}`, 'error')
    }

    onMounted(() => {
      store.dispatch('fetchColumns')
    })
    const list = computed(() => store.state.columns)
    // const biggerColumnLen = computed(() => store.state.columns.filter(c => c.id > 2).length)
    const biggerColumnLen = computed(() => store.getters.biggerColumnLen)
    return {
      list,
      biggerColumnLen,
      beforeUpload,
      onFileUploaded,
      onFileUploadedError
    }
  }
})
</script>

Reactive 响应式数据劫持函数

Reactive 函数-文档: 当然最关键的数据响应劫持 Reactive 函数也可单独按需引入

来看个小栗子:

// 这里从 vue 中直接引入需要用到的函数: 比如 computed reactive 等等

import { ref, computed, reactive, toRefs } from 'vue'

// 定义个数据类型
interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}

setup() {
  // 这里直接定义data 为上面声明的类型, 并且用 `reactive` 包裹作为响应数据
  const data: DataProps  = reactive({
    count: 0,
    increase: () => { data.count++},
    double: computed(() => data.count * 2)
  })
  const refData = toRefs(data)
  return {
    ...refData
  }
}