Vue3+TypeScript+vite

vue3简介

发布时间

• 2020.9.19,发布版3.0版本,
• 2023.10月  最新公开版本3.3.4

性能提升

打包减少41%,初次渲染快55%,更新渲染快133%,内存减少54%

创建vue3工程

vite创建vue3

vue是运行在node.js下的,所以安装vue3需要先有node.js环境

npm create vue@latest  

npm init vite@latest    可以安装其他框架比较简洁

npm init vue@latest   专门针对vue进行安装,可安装许多扩展插件

vite项目中,index.html是项目的入口文件,在项目最外层

加载,index.html后,vite解析,<script type='module' src='xxx'> 指向Javascript

vue3中是通过createApp函数创建一个应用实例

插件安装

搜索 volar

vue language feature

TypeScript vuePlugin(Volar)

options API与Composition API

optionsAPI

optiosApi是vue2中默认组件的编写方式,将组件分离不同的部分,data,menthods,computer,watch等

可以说是配置风格

compositionAPI

compositionAPI是vue3中引入的新特性,提供了一种基于函数的组件编写方式,composition允许将组件的逻辑按照功能或相关性经行组织

可以说是组合风格的

Setup

set介绍

1. setup是一个新的组件选项，作为组件中使用组合API的起点。 
2. 从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
3. 这就意味着在setup函数中this 还不是组件实例，this此时是undefined
4. 在模版中需要使用的数据和函数，需要在setup返回

setup与vue2之间的关系

1. Vue2中的语法可以和Vue3中的语法共存
2. Vue2中的data使用this是可以获取到setup中的数据的
3. setup是获取不到data中的数据的

Setup语法糖

介绍

直接在script标签中添加setup属性就可以直接使用setup语法糖了。
使用setup语法糖后，不用写setup函数；组件只需要引入不需要注册；属性和方法也不需要再返回，可以直接在template模板中使用。

使用方法

• 第一种

setup(){
    let name='张三'
     function ChangAge(){
        age=20
    }
    return{name,ChangNane}
}

•  第二种

<script lang="ts" setup>
   let name='张三'
   function ChangAge(){
        age=20
   }
</script>

vite-plugin-vue-setup-extend插件

功能介绍

这个插件主要使用在Vue3中,可以将name直接写在script标签中,简化Vue3指定组件名的繁复过程

安装

npm i vite-plugin-vue-setup-extend -D

 引入与调用

在vite.config.ts中引入

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

调用
plugins: [
    vue(),
    VueSetupExtend()
],

Vue3创建响应式数据

简介:

创建响应式数据主要通过reactive和ref这两个API来实现 

ref

ref用于创建响应式的基本数据类型（如数字、字符串等）。ref会返回一个对象将会被value包装成响应式,需要使用.value访问这个值,在标签中使用不用.value,框架自动解决了这个问题

创建方式

import {ref} from 'vue
let arr=ref('0')
console.log(arr.value)

reactive

reactive用于创建响应式的对象或数组。与ref不同，reactive直接返回一个响应式的对象或数组，你可以直接通过属性名或索引来访问或修改它。

创建方式

import {reactive} from 'vue
let arr=reactive({
    name:'孙亚东',
    age:24,
})
console.log(arr)

注意:

reactive重新分配对象会失去响应式,需要使用Object.assign去分配

语法Object.assign(目标对象,{修改内容})

import {reactive} from 'vue'
let arr=reactive({
    name:'孙亚东',
    age:24,
})

Object.assign(arr, {  
    name: '小卡拉米',  
    age: 8  
});  

console.log(arr)

toRefs与toRef

toRefs

介绍

toRefs函数用于将一个响应式对象的所有属性转换为单独的响应式引用。相当于结构赋值,以便我们可以轻松地访问响应式对象的每个属性。

使用

<