2021-09-23 Vue3知识点

先推荐两个vscode插件

Volar

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

特色功能

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

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

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

2021-09-23 Vue3知识点

 编辑器分隔

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

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

2021-09-23 Vue3知识点

它就会自动给你分隔成三个页面,分别对应templatescriptstyle,这样就太舒服了有没有。

 2021-09-23 Vue3知识点

 Vue 3 Snippets

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

 2021-09-23 Vue3知识点

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

2021-09-23 Vue3知识点

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

创建Vue3项目

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

使用 vue-cli 创建

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

2021-09-23 Vue3知识点

使用 Vite 创建

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

 2021-09-23 Vue3知识点

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

 2021-09-23 Vue3知识点

然后看看根组件app.vue 

 2021-09-23 Vue3知识点

 

Composition API

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

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

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

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

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

setup

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

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

2021-09-23 Vue3知识点

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

2021-09-23 Vue3知识点

 

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

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

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

2021-09-23 Vue3知识点

 

注意: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

  • 演示attrsprops

//父组件
<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>
复制代码

ref

作用

定义一个响应式的数据(一般用来定义一个基本类型的响应式数据UndefinedNullBooleanNumberString)

2021-09-23 Vue3知识点

 

注意script中操作数据需要使用xxx.value的形式,而模板中不需要添加.value

用一个例子来演示:实现一个按钮,点击可以增加数字

2021-09-23 Vue3知识点

 在Vue2中

2021-09-23 Vue3知识点

在Vue3中

2021-09-23 Vue3知识点 

 

Vue2中我们通过this.$refs来获取dom节点,Vue3中我们通过ref来获取节点

首先需要在标签上添加ref='xxx',然后再setup中定义一个初始值为nullref类型,名字要和标签的ref属性一致

2021-09-23 Vue3知识点

 

注意:一定要在setupreturn中返回,不然会报错。

还是用一个例子来演示:让输入框自动获取焦点

2021-09-23 Vue3知识点

 reactive

语法

2021-09-23 Vue3知识点

 

作用

定义多个数据的响应式,接收一个普通对象然后返回该普通对象的响应式代理器对象(Proxy),响应式转换是“深层的”:会影响对象内部所有嵌套的属性,所有的数据都是响应式的。

代码演示

2021-09-23 Vue3知识点

 

computed函数:

Vue2中的computed配置功能一致,返回的是一个ref类型的对象

计算属性的函数中如果只传入一个回调函数 表示的是get操作

上一篇:Vue3—07—动态组件;keeplive;生命周期;mixin


下一篇:Java引用