Vue-Vue3.x+TypeScript入门(一)

前言：本文主要记录Vue3.x+TypeScript入门心得。

目录：

一、Vue3.x的特性。

二、搭建Vue3.x的环境方式<一>--命令行搭建。

三、搭建Vue3.x的环境方式<二>--图形界面搭建。

四、搭建Vue3.x的项目目录结构。

五、为什么文件名要小写。

六、Vue3.x中变量和方法的构造函数setup()和ref使用。

七、Vue3.x和Vue2.x的生命周期对比。

八、状态跟踪函数onRenderTracked和状态触发函数onRenderTriggered组件。

九、watch函数的使用。

十、Vue模块化的简单使用。

一、Vue3.x的特性:

笔者也是首次接触Vue开发，对于Vue2.x版本知之甚少，但是看了Vue官网Vue3.x的特性介绍，也罗列出了相关性能数据对比以及优化的功能点。仅供各位读者参考：

选用JS胖大神的对比图

• Vue3.x新特性中具有向下兼容的模式，官网介绍Vue2.x也可以在新特性环境下开发。
• 性能的极致提升。
• Composition API, 解决Vue2.x版本中复杂组件的维护问题（封装不好，重用性差）。
• 其他新特性：Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。
• 支持TypeScript（Vue3.x就是使用TypeScript开发完毕的），解决Vue2.x集成TypeScript困难，不适用的问题。

二、搭建Vue3.x的环境方式<一>--命令行搭建：

Vue3.x的环境我们选用vue-cli（手脚架）来进行搭建。

• 1、vue-cli的安装方式：

npm install -g @vue/cli

或者

yarn global add @vue/cli

如果你的电脑配置了淘宝的镜像源，使用 npm install -g @vue/cli 命令安装失败了，那么需要执行以下命令：

cnpm install -g @vue/cli

安装成功的提示：

vue手脚架安装成功提示

使用该命令查看手脚架版本号，版本号大于 4.5.6才可以使用Vue3.x创建项目：

vue --version ////检查版本命令

2.vue-cli创建项目:

vue create XXXX  /// XXXX替换为项目名称

回车键之后会弹出如下提示框：

Vue CLI v4.5.9
? Please pick a preset: (Use arrow keys)
❯ Vue3+TypeScript ([Vue 3] babel, typescript, eslint) //请选择预选项
  Default                                            //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features                          //手动选择(自定义)的意思

因为我们尝试：Vue3.x+TypeScript的模式，所以我们选择自定义选项。
回车键之后，会进入到我们的自定义选择模式下：

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to t
oggle all,  to invert selection)
❯◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

下滑箭头图标，按空格键选中TypeScript,再次按回车键执行下一步：

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Lin
ter
? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x (Preview) 

选中3.x (Preview)，回车键执行下一步：

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Lin
ter
? Choose a version of Vue.js that you want to start the project with 3.x (Previe
w)
? Use class-style component syntax? (y/N) n

输入 n不使用class-style模式，回车执行下一步：

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Lin
ter
? Choose a version of Vue.js that you want to start the project with 3.x (Previe
w)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n) 

是否使用TypeScript和Babel的形式编译 JSX.这里我们也选择n:

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
  TSLint (deprecated) 

直接回车使用默认模式：

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

直接回车使用默认模式：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

执行完以上命令后，等待命令行安装完成即可。

截屏2020-12-09 下午8.54.22.png

最后我们执行以下命令，就可以run新建的项目了：

npm run serve

截屏2020-12-09 下午8.56.22.png

三、搭建Vue3.x的环境方式<二>--图形界面搭建:

首先我们需要命令来启动图形界面工具：

vue ui

启动成功之后的页面如下图所示：

1607518903197.jpg

选择Vue项目创建地址和开始创建：

截屏2020-12-09 下午9.04.35.png

项目名称和更多选项设置：

截屏2020-12-09 下午9.12.54.png

选择项目预设：

截屏2020-12-09 下午9.14.20.png

直至下一步创建成功。

四、搭建Vue3.x的项目目录结构：

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里
---|components       -- Vue的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在Vue2中也有
---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js       -- Eslint的配置文件
|-.gitignore         -- 用来配置那些文件不归git管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json      -- 关于TypoScript的配置文件
|-yarn.lock          -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中

五、为什么文件名要小写：

笔者开始学习react、Vue、react native开发时，发现近乎所有的文件名都是小写，如果你心中也有这样的疑惑，这篇博客或许能解答你心中的疑惑。

六、Vue3.x中变量和方法的构造函数setup()和ref使用：

Vue3.x与2.x版本相比, 一个重要的变化就是变量和方法的数据构造。其中2.x版本主要使用了data(){}和methods:{}两个函数，而在Vue3.x版本中，主要使用到了setup()函数，究其两种语法的区别，我们慢慢从书写中来体会下：

<1>Vue.2x版本的data(){}和methods:{}函数：

        data(){
           return {
               heros: ['鲁班七号', '后羿', '夏侯惇'],
               selectHero: '',
               showMessage: false,
           }
        },
        methods: {
            selectHeroFuction(index){
                this.selectHero = this.heros[index];
            },
        }

我们首先在data(){}函数中添加变量并给出默认值，methods:{}方法函数中我们添加了点击方法，最后我们在template中增加对定义的变量和方法的调用。完整的代码如下：

<2>Vue.3x版本的setup()函数：

const关键字来定义变量和方法，并公开出去：

setup(){
            const heros = ref(['鲁班七号', '后羿', '夏侯惇']);
            const selectHero = ref("");
            const selectHeroFuction = (index:number) => {
                selectHero.value = this.heros.value[index];
            };

            return {heros, selectHeroFuction, selectHero}
}

新API：reactive对setup函数的优化, 同时省去value属性：

const herosData = reactive({
      heros : ['鲁班七号', '后羿', '夏侯惇'],
      selectHero : "",
      selectHeroFuction : (index: number) => {
        herosData.selectHero = herosData.heros[index];
      },
      showMessage: false,
    });
    const data = toRefs(herosData)

    return {...data}
},

完整的setup(){}函数应用程序：

七、Vue3.x和Vue2.x的生命周期对比：

函数意义	Vue3.x版本	Vue2.x版本
组件创建之前	setup函数中可以做该操作	beforeCreate
组件挂载到页面之前执行	onBeforeMount	beforeMount
组件挂载到页面之后执行	onMounted	mounted
组件更新之前	onBeforeUpdate	beforeUpdate
组件更新之后	onUpdated	updated
组件销毁之前	onBeforeUnmount	beforeDestroy
组件销毁之后	onUnmounted	destroyed
被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。	onActivated	activated
组件之间切换时，上个组件消失时执行	onDeactivated	deactivated
当捕获一个来自子孙组件的异常时激活钩子函数	onErrorCaptured	errorCaptured

注意：Vue3.x版本的生命周期函数均在setup中执行。

setup(){
    const herosData: HeroDataProps = reactive({
      heros : ['鲁班七号', '后羿', '夏侯惇'],
      selectHero : "",
      selectHeroFuction : (index: number) => {
        herosData.selectHero = herosData.heros[index];
      }
    });

    const data = toRefs(herosData)

    console.log("1-开始创建组件-------setup");

    onBeforeMount(() => {
      console.log("2-组件挂载到页面之前执行-------onBeforeMount");
    });

    onMounted(() => {
      console.log("3-组件挂载到页面之后执行-------onMounted");
    });

    onBeforeUpdate(() => {
      console.log("4-组件更新之前-------onBeforeUpdate");
    });

    onUpdated(() => {
      console.log("5-组件更新之后-------onUpdated");
    });

    return {...data}
},

八、状态跟踪函数onRenderTracked和状态触发函数onRenderTriggered组件:

Vue3.x版本中，为了方便我们开发调试提供了状态跟踪和状态触发函数，只要页面出现了更新就会触发这两个函数，生成event事件，来帮助我们调试。这两个函数的触发顺序是先执行状态触发再执行状态跟踪,并且状态触发函数只监听发生改变的对象，event事件中都会将相应的新值、旧值以及key变量名等都会返回给我们；状态跟踪函数则是只要页面出现更新，它会监听所有的对象变化。例如我们以王者荣耀英雄选择为例：

截屏2021-01-11 下午4.57.30.png

我们可以在状态触发函数onRenderTriggered函数中找到如下打印事件:

状态触发组件--------------->
Object
effect: ƒ reactiveEffect()
key: "selectHero"
newValue: "后羿"
oldTarget: undefined
oldValue: "鲁班七号"
target: {heros: Array(3), selectHero: "后羿", showMessage: false, selectHeroFuction: ƒ}
type: "set"
__proto__: Object

跟踪函数onRenderTracked打印事件：

截屏2021-01-11 下午5.02.24.png

九、watch函数的使用:

watch函数可以监听变量新值旧值的变化情况：
<1>观察单个值：

/*观察单个值*/
    watch(overText, (newValue, oldValue) => {
      console.log(`new -> ${newValue}`)
      console.log(`old -> ${oldValue}`)
    });

<2>观察多个值：

/*观察多个对象*/
    watch([overText, data.selectHero], (newValue, oldValue) => {
      console.log(`new -> ${newValue}`);
      console.log(`old -> ${oldValue}`);
    });

十、Vue模块化的简单使用:

我们使用单独一个文件创建一个记录当前时间的模块：

import {ref} from "vue";

const nowTime = ref("00:00:00");

const  getNowTime = () => {
    const now = new Date();
    const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
    const minute = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
    const second = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();

    nowTime.value = hour + ":" + minute + ":" + second;
    setTimeout(getNowTime, 1000);
};

export {nowTime, getNowTime}

在使用的地方引入该.ts文件：

Vue3.x+TypeScript入门的第一部分就告一段落了，感谢大家的拜读，同时附上Vue3.xDemo地址。