Vue3 + TypeScript 开发总结

Vue3 + TypeScript 学习

一， 环境配置

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

TypeScript` 的支持
编写大型组件时，可以使用 Composition Api 组合函数很好的管理状态
跨组件重用代码时

四，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 来创建 响应式变量，并且得将它返回，才能在页面中使用。

使用：

• 引入 ref import { ref } from 'vue'
• 初始变量 const name = ref('指定默认值')
• 返回变量 return { name } 在return中还可以返回方法
• 在 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`

下面代码中有两个 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响应式更改

1.引入 watch， import { watch } from 'vue'

2.直接使用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个组件的
Node.js中path.join()优势例举分析
JavaScript style对象与CurrentStyle对象案例详解