2021-09-23 Vue3知识点

2024-02-07 22:15:12

先推荐两个vscode插件

Volar

首先推荐Volar，使用vscode开发Vue项目的小伙伴肯定都认识Vetur这个神级插件，有了它可以让我们得开发如鱼得水。那么Volar可以理解为Vue3版本的Vetur，代码高亮，语法提示，基本上Vetur有的它都有。

特色功能

当然作为新的插件出山，肯定有它独有的功能。

多个根节点编辑器不会报错

Vue3是允许我们有多个根节点的，但是我们如果使用Vetur就会报错，不会影响运行，但是看起来就很烦。所以当我们转向Volar那么就不会出现这个问题了。

编辑器分隔

即便Vue的组件化开发，可以将单文件的代码长度大幅缩短，但还是动辄几百行甚是上千行。那么我们切换template，script和style的时候就要频繁上下翻，虽然有的插件可以直接定位到css，但是你回不去啊！所以这个功能简直是太人性化了。

安装完Volar以后，打开一个.vue文件，看vscode的右上角，有这么一个图标，点一下。

它就会自动给你分隔成三个页面，分别对应template，script和style，这样就太舒服了有没有。

Vue 3 Snippets

推荐的第二个插件叫做Vue 3 Snippets，同样的，他也有自己的Vue2版本。它是干什么的呢，可以看一下下面这张图，我只输入了“v3”，它有很多提示，我们就先选择v3computed，选中回车即可。

然后它就给自动给我们写了如下代码

是不是超级省事，摸鱼的时间又增加了！还有更多有趣的使用方式，小伙伴们自行探索吧。

创建Vue3项目

那么正式开始学习我们的Vue3，先从创建项目开始。

使用 vue-cli 创建

输入下面的命令然后选择配置项进行安装即可，这里注意vue-cli的版本一定要在4.5.0以上

使用 Vite 创建

都说Vue3.0和Vite2更配，各种优化，各种快，但都不属于本文的内容，本文的目的我们只需要知道它特别好用，怎么用就行了。我这里是多选择了TS，每行都有注释，一目了然。

创建完以后我们先来看看入口文件main.ts

然后看看根组件app.vue

Composition API

接下来到了重头戏，Vue3的招牌特性，Composition API

关于Composition API这里有大佬做的动画演示，极力推荐。

那个忙了一夜的Vue3动画很好，就是太短了

Composition API可以更方便的抽取共通逻辑，但是不要过于在意逻辑代码复用，以功能提取代码也是一种思路。

顺便提一句，Vue3兼容大部分Vue2语法，所以在Vue3中书写Vue2语法是没有问题的（废除的除外），但是既然我们已经升级Vue3了，不建议混合使用，除非一些大型特殊项目需要兼容两个版本。

setup

setup是组合Composition API中的入口函数，也是第一个要使用的函数。

setup只在初始化时执行一次，所有的Composition API函数都在此使用。

可以通过console.log看到setup是在beforeCreate生命周期之前执行的(只执行一次)

此可以推断出setup执行的时候,组件对象还没有创建,组件实例对象this还不可用,此时this是undefined, 不能通过this来访问data/computed/methods/props。

返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性，返回对象中的方法会与methods中的方法合并成功组件对象的方法，如果有重名, setup优先。因为在setup中this不可用，methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods里的内容，所以还是不建议混合使用。

setup函数如果返回对象, 对象中的属性或方法 , 模板中可以直接使用

注意：setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板中就不可以使用return中返回对象的数据了。

setup的参数(props,context)`

props: 是一个对象,里面有父级组件向子级组件传递的数据,并且是在子级组件中使用props接收到的所有的属性

context：上下文对象，可以通过es6语法解构 setup(props, {attrs, slots, emit})

attrs: 获取当前组件标签上所有没有通过props接收的属性的对象, 相当于 this.$attrs
slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
emit: 用来分发自定义事件的函数, 相当于 this.$emit
演示attrs和props

//父组件
<template>
  <child :msg="msg" msg2='哈哈哈' />
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue';
// 引入子组件
import Child from './components/Child.vue';
export default defineComponent({
  name: 'App',
  components: {
    Child,
  },
  setup() {
    const msg = ref('hello,vue3');
    return {
      msg,
    };
  },
});
</script>

//子组件
<template>
  <h2>子组件</h2>
  <h3>msg:{{ msg }}</h3>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Child',
  props: ['msg'],
  setup(props, {attrs, slots, emit}) {
    console.log('props:', props);//msg: "hello,vue3"
    console.log('attrs:', attrs);//msg2: "哈哈哈"
    return {};
  },
});
</script>

演示emit

//父组件
<template>
  <child @show="show" />
</template>

<script lang='ts'>
  setup() {
    const show = () => {
      console.log('name:', 'hzw');
    };
    return {
      show,
    };
  },
</script>

//子组件
<template>
  <button @click='emitFn'>事件分发</button>
</template>
<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Child',
  setup(props, { emit }) {
    const emitFn = () => {
      emit('show');
    };
    return {
      emitFn,
    };
  },
});
</script>
复制代码