前言

迟来的Vue3文章,其实早在往年3月份时就把Vue3过了一遍。<br/>在去年年末又把 TypeScript 从新学了一遍，为了上 Vue3 的车，更好的开车。<br/>在上家公司4月份时，上级领导调配了一个外部的 党务零碎开发 ，这个零碎前端是由我一个人来开发，性能和需要也不怎么简单的一个B 端 零碎，间接上的 Vue3 + TypeScript + Element Plus 开发的，开发两周到最初的上线，期间也遇到很多小坑，很多无处可查，缓缓推敲最初还是克服了。

Vue3 + TypeScript Study

一， 环境配置

1.1 装置最新 Vue 脚手架

npm install -g @vue/cliyarn global add @vue/cli

1.2 创立Vue3 我的项目

vue create projectName

1.3 现有Vue 2 我的项目 降级到 Vue3

vue add typescript

二， 进击Vue3

2. 1 Vue 2 局限性

  1. 随着组件与组件依赖之间一直变大，组件很难读取和保护
  2. 没有完满的办法解决跨组件代码重用

2.2 Vue 3 如何解决Vue 2 局限

  1. 组件难以保护治理

【在Vue3 中 编写组合函数，应用 Compositon Api setUp 来解决】

  1. 没有完满的办法解决跨组件代码重用

三，Vue3 Composition Ap i

3.1 对于 Composition Api

在Vue3中，也能够不应用 Composition Api 来编写组件，它只是在Vue3 中编写组件中的另一种办法，外部简化了好多操作。

所以你还能够持续应用 Vue2 的形式来 编写 组件。

3.2 什么时候应用Composition Api

  1. TypeScript` 的反对
  2. 编写大型组件时，能够应用 Composition Api 组合函数很好的治理状态
  3. 跨组件重用代码时

四，Composition Api 必备根底

4.1 什么是 setup

setup 是用来配置组件状态的另一种实现。

在setup 中定义的状态，办法要想在模板中应用，必须 return

留神：

  • setup 办法是在 components , props data Methods Computed Lifecycle methods 之前执行
  • 同时在 setup 中是不能拜访 this

4.2 ref 创立响应式变量

在 Vue2 中，咱们定义一个响应式变量能够间接在 data 中 定义并且在模板中应用该变量。 如果 应用的 composition api 的话，咱们得在 setup 中 应用 ref 来创立 响应式变量，并且得将它返回，能力在页面中应用。

应用

    1. 引入 ref import { ref } from 'vue'
    1. 初始变量 const name = ref('指定默认值')
    1. 返回变量 return { name } 在return中还能够返回办法
    1. 在 setup 中 拜访 定义的变量值，不能间接通过变量名来获取， 必须通过 变量名.value 来获取到该对象 、 值

这样的益处

  • 状态好治理，能够划分好几个 setup 状态治理，最初在一个 文件导入所有，并且应用。
<template>    <div>        <h1>{{title}}</h1>    </div></template><script>import {ref,defineComponent} from 'vue'export default defineComponent({    setup () {        // 定义响应式变量        const title = ref('前端自学社区')                  // 拜访该变量        console.log(title.value)        // 返回变量        return {title}    }})</script>

4.3 生命周期

Composition Api 生命周期钩子 和 Vue 2 选项式 生命周期 钩子名称一样，只是在应用 组合式API 时，前缀为 on , onMounted`

sd

上面代码中有两个 mounted 生命钩子，你猜哪个会先执行？

setup 会先执行
    setup () {        // 定义响应式变量        const title = ref('前端自学社区')        console.log(title)        // 返回变量        function getTitle(){            console.log(title.value)        }        // 页面在加载        onMounted(getTitle)        return {title}    },    mounted() {        console.log('测试 mounted 执行程序')    },

4.4 watch

在 setup 中应用 watch响应式更改

  • 引入 watch， import { watch } from 'vue'

  • 间接应用watch，watch 承受 3 个参数

    1. 要监听更新的 响应式援用或者 getter 函数
    2. 一个回调用来做更新后的操作
    3. 可选配置项
import {wathc} from 'vue'// 定义响应式变量const num = ref(0)// 更新响应式变量function  changeNum(){            num.value++}// wathc 监听响应式变量watch( num,(newValue, oldValue) => { console.log(`newValue为：${newValue},--------oldValue为：${oldValue}`)   } )

4.5 computed

它也是 从 vue 导入，computed 函数返回一个作为 computed 的第一个参数传递的 getter 类回调的输入的一个只读的响应式援用。为了拜访新创建的计算变量的 value，咱们须要像应用 ref 一样应用 .value property。

当num值变动时，nums 的值会 *3

import {ref,computed} from 'vue';const num = ref(0)//更新numfunction  changeNum(){   num.value++ }//监听num变动 const nums = computed(() =>{  return num.value * 3 })

五，setup

5.1 承受两个参数

props : 父组件传递过去的属性, setup` 函数中 props 是响应式的，它会随着数据更新而更新，并且不能应用 ES6 解构，因为它会不能使 props 为响应式。

context : 它是一个一般的 对象，它裸露3个组件的· property

  1. Attribute
  2. 插槽
  3. 触发事件

context 不是 响应式的，所以能够应用ES6 解构来简便写法。

   props:{        obj:{            type:Object        }    },     setup (props,{attrs,slots,emit}) {            console.log(attrs)            console.log(slots)            console.log(emit)             console.log(props.obj)     }

5.2 组件加载 setup 时留神

在组件执行 setup 时， 组件实例没有被创立，因而就无法访问以下属性

  • data
  • computed
  • methods

六，生命周期

在 setup 中应用 生命周期时，前缀必须加 on.

选项式 APIHook inside setup
beforeCreate
created
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted
errorCapturedonErrorCaptured
renderTrackedonRenderTracked
renderTriggeredonRenderTriggered

七， 跨组件之间传值

在 Vue 2 中，咱们能够应用 Provide/Inject 跨组件传值，在 Vue 3 中也能够。

在 setup 中 应用，必须从 vue 中导入应用。

应用 Provide 时，个别设置为 响应式更新的，这样的话，父组件变更，子组件，子孙组件也跟着更新。

怎么设置为响应式更新呢？

  1. 应用 ref / reactive 创立响应式变量
  2. 应用 provide('name', '要传递的响应式变量')
  3. 最初增加一个更新 响应式变量的事件，这样响应式变量更新， provide 中的变量也跟着更新。

父组件

父组件import { provide, defineComponent, ref, reactive } from "vue";<template>    <Son/>  </template><script>    import { provide, defineComponent, ref, reactive } from "vue";    export default defineComponent({    setup() {            const father = ref("我父组件");    const info = reactive({      id: 23,      message: "前端自学社区",    });    function changeProvide(){      info.message = '测试'    }    provide('father',father)    provide('info',info)    return {changeProvide};    }    })</script>

子组件

<template>    <div>        <h1>{{info.message}}</h1>        <h1>{{fatherData}}</h1>    </div></template><script>import {provide, defineComponent,ref,reactive, inject} from 'vue'export default defineComponent({    setup () {        const fatherData = inject('father')        const info = inject('info')                return {fatherData,info}    }})</script>

八， 在Vue 中 应用 TypeScirpt 技巧

8.1 接口束缚束缚属性

采纳 TypeScirpt 的个性， 类型断言 + 接口 完满的对 属性进行了 束缚
interface
分页查问 字段属性类型验证export default  interface queryType{    page: Number,    size: Number,    name: String,    age:  Number}
组件中应用
import queryType from '../interface/Home'    data() {        return {            query:{                page:0,                size:10,                name:'测试',                age: 2            } as queryType        }    },

8.2 组件应用 来 defineComponent 定义

这样 TypeScript 正确推断 Vue 组件选项中的类型
import { defineComponent } from 'vue'export default defineComponent({    setup(){        return{ }    }})

8.3 类型申明 reactive

export default  interface Product {    name:String,    price:Number,    address:String}import  Product from '@/interface/Product' import {reactive} from 'vue'const product = reactive({name:'xiaomi 11',price:5999,address:'北京'}) as Product       return {fatherData,info,product}

最初

文中如有谬误，欢送码友在评论区斧正，如果对你有所帮忙，欢送点赞和关注~~~

更多精彩内容关注 公众号: 前端自学社区