🍺Vue3 新特性

Vue3 新特性

一、前言

相信熟悉 Vue2.x 的 XDJMM 也陆陆续续的开始上手 Vue3.x 了,或者已经在使用 Vue3.x 进行项目开发了。本文主要是介绍 Vue3.x 新增的一些特性,Vue3.x 对开发者来说在 Vue2.x 的基础上改动不大,大多还是兼容 Vue2.x 的。如果你是刚接触 Vue 建议可以直接开始学习 vue3.x。

二、新增特性一 && 组合式 Api

你不用觉得它是个很神秘、很高级的东西,你可以暂时把它看作是一个生命周期中的一个钩子函数(只是为了方便您的理解),但是它并没有被划为生命钩子函数。它的名字为 setup ,并接收两个参数 propscontext

为什么引入组合式 Api setup?

我相信每次技术的更新迭代不是为了解决某些 bug ,那就是为了解决某些痛点。Vue3.x 也不例外。那么 setup 解决了什么痛点?

  • 逻辑列表过长:在使用 Vue2.x 开发的时候我们采用的是选项式 Api(mounted、watch、computed、created、updated…),我们每写一个逻辑时,逻辑的关注点就可能分散在好几个选项式 Api 中,如下图所示,同一颜色的代码块组成同一个逻辑;当当前组件的逻辑越来越多时选项式 Api(mounted、watch、computed、created、updated…)中的代码会被逐渐拉长,同一个逻辑代码分散在组合式 Api 中使得代码逻辑”碎片化“。在此问题就呈现出来了,这种情况和不方便我们开发,因为我们需要不断的”跳转”来完成每一块的代码的开发及其的不方便;eg.我个人用 Vue2.x 开发遇到的问题通常是:当组件里的逻辑很多时,且当前开发的位置在 methods 上(此时需要用到某几个 data 中的值),我通常需要往上翻一大段位置到 data 这个位置才能找到我需要用到的变量(真的很烦人)。
  • 结构不清晰:在 Vue2.x 中我们阅读代码的时候(特别是读别人写的代码)逻辑不直观,我们也需要通过在选项式 Api 之间进行”跳转”来完成阅读,非常的不方便。

3.png

组合式 Api “setup” 的使用:

如下图:使用 Vue3 组合式 Api 完成了相同功能(监听两个输入框的变化并计算对应条件的长度,以及调用相关方法)的编写,setup 的占位和其他选项式 Api 的位置在同一层级,在 setup 中可以使用 watch、computed 只不过要事先按需引入。
4.jpg

setup 使用的几个要点:

  • setup 是围绕 beforeCreate 和 created 生命周期钩子运行的(根据官方文档 setup 不包含在声明周期函数中);
  • setup 接收两个参数 props (父组件传递的值是响应式的,注意不要使用解构,否则响应式会失效,如果需要用到解构可以使用 toRefs(props) 再解构),context(包含attrs、slots、emit);
  • setup 内没办法使用 this(原因如第一条所述) , 也就是说在其他选项式 api 定义的变量方法等在这里面都没办法访问到;
  • setup 中可以声明响应式变量;
  • setup 内声明响应式变量需要用到 ref、reactive(都需按需引入),ref 一般用作基本数据类型(测试时注意 ref 包装后的基本数据值是一个对象),reactive只能定义复杂类型变量的响应式,注意:要在 插值表达式、组合式 Api 中使用的变量需要在 setup 中显式的返回;
  • setup 中也可以使用生命周期函数(beforeCreate、create 两个在 setup 中没必要使用,原因如第一条所说),但都要在前面加上 on,如;onMounted 等 ;

setup 中使用声明周期函数,以及打印出 props context 示例:

5.jpg

新增特性二 && Teleport

Teleport 有传送的意思,主要作用是把某一块 Dom 元素挂载到某一个父节点下;

基本用法

6.jpg

7.jpg

新增特性三 && 片段

在 Vue2.x 中每个组件中有且只能含有一个根节点,在 Vue3.x 中去掉了这个限制组件中可以含有多个根节点。

示例:多个根节点不报错

8.jpg

新增特性四 && emits 选项

emits 相当于 props 选项, emits 选项可以是数组也可以是一个对象;(注意:官方建议定义所有发出的事件,以便更好的记录组件应该如何工作,当然没有emits选项也能正常工作.)

emits 为数组

如果在 emits 中定义了原生事件(如下 click),那么将使用组件中的事件替代原生事件侦听器

data(){
    return {}
},
emits:['myevent','click'],
setup(){

},
methods:{
    handle(){
        this.$emit('myevent',payload);
        this.$emit('click',payload);
    }
}
 

emits 为对象

当为对象时 可以对发出的事件做一个验证;

data(){
    return {}
},
emits:{
    click:null, // 没有验证
    myevent:({a,b})=>{
        if(a>b){
            return true;
        }else{
            return false;
        }
    }
},
methods:{
    handle(){
        this.$emit('myevent',{a,b});
        this.$emit('click',{a,b});
    }
}
 

特性五 && v-model 指令的一些更改

单个且不带参数的 v-model 指令

v-model 指令默认情况下相当于 modelValue 作为 prop , update:modelvalue 作为事件;

<Child v-model='name' />
<!-- 等价于 -->
<Child :modelValue='name' @update:modelValue='val=>name=val' />
 

带参数的 v-model

v-model:[参数] 相当于 [参数] 作为 prop , update:[参数] 作为事件;

<Child v-model:name='myName' />
<!-- 等价于 -->
<Child :name='myName' @update:name='val=>myName=val' />
 

v-model 可以有多个

<Child v-model:name='myName' v-model:age='myAge' />
<!-- 等价于 -->
<Child :name='myName' @update:name='val=>myName=val' :age='myAge' @update:age='val=>myAge=val' />
 

v-model 自定义修饰符

如下自定义了一个 uppercase 修饰符,在子组件中可以通过定义 props 中的 nameModifiers(prop + Modifiers) 来获取 uppercase 的值,默认为 {uppercase:true}

<Child v-model:name.uppercase='myName' />

 
<!-- 子组件代码 -->
 props:{
    nameValue:String,
    nameModifiers:{
        default:()=>({})
    }
},
method:{
    handle(){
        console.log(this.nameModifiers) // {uppercase:true}
    }
}
 

v-model 变更

v-model 其实是替代了 Vue2.x 属性的 .sync 修饰符

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14721.html

发表评论

登录后才能评论