vue3从入门到入院

题记

vue3稳定版本发行有一段时间，而最近比较忙，一直没有时间整理和学习vue3。蹭着小空隙，整理下vue3的知识,希望能小小的帮助正在学习vue3的朋友。

安装与基本工具版本适配

vite

随着前端的发展，使得很多项目中js模块的数量越来越多，使得我们在打包运行等待时间长，浏览器缓慢的反馈影响开发体验。而Vite旨在通过利用生态系统中的新进步来解决这些问题：浏览器中本机ES模块的可用性以及以本机语言编写的JavaScript工具的兴起。
而在我最近使用的项目也发现vite比webpack等打包工具快得多，vite能极大得减少打包的时间，在开发的时候体验真的很好。

安装

Vite需要Node.js版本> = 12.0.0。
npm安装

npm install create-vite-app -g

yean安装

yarn global add create-vite-app@1.18.0

vite安装vue

npx create-vite-app demo

配置elemnetui

vue3适配的elementui版本为element-plus。
vite配置:

plugins: [
    vue(),
    vitePluginImport([
      {
        libraryName: 'element-plus',
        libraryDirectory: 'es',
        style(name) {
          return `element-plus/lib/theme-chalk/${name}.css`;
        },
      }
    ])
  ],

可根据官网配置相关的模块

配置sass

首先注意在新的版本中，sass是存在版本冲突的。建议安装包

"node-sass": "^4.14.1"
"sass-loader": "^7.1.0"

vite配置 参考 vite官网css配置

    preprocessorOptions: {
      sass: {
        javascriptEnabled: true,
      }
    }
  }

安装正确版本echarts

4.9是比较稳定版本，引用其他版本会在使用一些特殊图表时候导致不能使用。列如echarts-liquidfill

“echarts”: “^4.9.0”

新变化、特效

内置组件teleport

也称为传送门, 它可以将元素传送到指定位置
，列如hello传送到body节点下。另外可以指定类以及id传输。

<teleport to="head">
    <div>hello</div>
</teleport>
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

分片Fragment

我们都知道在vue2中templet下必须只有一个根元素。但是在vue3中，可以有多个节点暴露出来。像这样

    <templet>
        <div></div>
        <div></div>
        <div></div>
   </templet>

fargment是一个虚拟的节点,不会在DOM树中呈现,所以不会创建多余的元素。

全局api

createApp

在vue2中没有全局app的概念，我们定义实例只是通过 new Vue() 创建 Vue 实例。从同一个 Vue 构造函数创建的实例共享全局配置，因而导致全局配置很容易意外地污染其他测试用例。用户需要仔细存储原始全局配置。
而在vue3中改用使用全局api中的createApp来创建实例，调用 createApp 返回一个应用实例。

import { createApp } from 'vue'
import router from './router/index'
import App from './App.vue';
//vue3中创建实例
const app = createApp(App);
//创建组件
app.component('span', {
  data: () => ({
    count: 0
  }),
  template: '<span>{{count}}</span>'
})
//创建指令
app.directive('focus', {
  mounted: el => el.focus()
})

app.use(router);
app.mount('#app');

//vue2中创建实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

在vue3中use将不再使用，而使用app.use()代替

nextTick

在vue2中使用nextTick等待组件时，使用Vue.nextTick();而在vue3改为全局api调用，且可以使用async/await修饰符修饰。

import { nextTick } from 'vue'

nextTick(() => {})
async function test(){
    await nexTick();
}

在vue3官方文档中描述vue2使用所带来的影响是这样的

直接调用 Vue.nextTick() 将导致臭名昭著的 undefined is not a function 错误。
通过这一更改，如果模块绑定器支持 tree-shaking，则 Vue 应用程序中未使用的全局 api 将从最终捆绑包中消除，从而获得最佳的文件大小。

也就是说某些时候组件未加载完就运行了nexttick里的方法。
另外其他改变的api有

以及受影响的vue2api

组合式api

响应式基础

在vue3中可以使用reactive创建一个响应式对象，也就是可以双向绑定的对象，也相当于在data中定义一个对象。

import { reactive } from 'vue'

const state = reactive({
  test: 'hlleo'
})

而另一个方法ref也可以创建响应式数据，它用于简单类型的定义。不过改变他的值需要使用其value属性才行。

import { ref } from 'vue'
const test = ref(0)
function change(){
    test.value = 1;
}

setup

在vue3中不建议使用reated、computed、filter等函数。而建议使用setup函数来代替它做初始化的工作。定义在其中的方法和变量都会被初始化。一般配合响应式数据使用，下面是实际开发中国的一个例子：

<template>
  <div>{{test}}</div>
  <voice v-if="viewVoice" ref="refVioce"></voice>
</template>

<script>
import Voice from "./voice.vue";
import { reactive, toRefs, ref, nextTick } from "vue";
export default {
  components: {
    Voice
  },
  setup() {
    const state = reactive({
      viewVoice: false,
      test: 'hello'
    });
    //通过ref获取节点
    const refVioce = ref(null);

    function voiceHandle(data) {
      state.viewVoice = !state.viewVoice;
      nextTick(() => {
        if (state.viewVoice) refVioce.value.setData(data);
      });
    }
    
    return {
      ...toRefs(state),//不清除响应式的情况下解构对象
      refVioce
    };
  },
};
</script>

• 在vue3 获取节点的方式也变了，需要定义一个ref去接受dom节点，变量名对应ref的名字。并且在setup中把变量返回出去。
• 在setup没有this，但他有二个参数props和ctx一个是可以获取父组件中传递的参数，一个是函数的上下文。一般在使用props参数时，我们一般使用torefs函数解构。

setup中生命周期钩子

同样vue3为了迎合组合式api，将生命周期函数也做了添加。在setup中可以使用如下生命周期函数。eg:

import { onMounted} from "vue";

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

有时间将继续更新有关vue-router、vuex相关的内容