Vue3项目相对Vue2发生的变化
Vue3项目相对Vue2发生的变化
Vue3简介
-
性能的提升
打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54% -
源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking -
拥抱TypeScript
Vue3可以更好的支持TypeScript -
新的特性
Composition API（组合API）
setup配置
ref与reactive
watch与watchEffect
。。。新的生命周期钩子
移除keyCode，而支持作为v-on的修饰符
vue3创建项目
vue-cli脚手架创建
vue create 项目名
相对于创建vue2中的项目，我们只需要在手动创建时将版本换成vue3即可。
创建完成后，项目结构也十分相似，只是在main.js中的Vue实例对象被转换成了createApp(App).use(store).use(router).mount('#app')
使用链式方式使用插件，挂载app。
使用vite构建前端
下一代的前端构建工具（vite官方说法），其优势在于启动项目快，便于修改后代码后快速响应。
安装：
npm init vue@latest
输入以上指令后，它会寻求一个依赖包，然后就直接开始询问创建新项目的定制化需求，我们暂时只需要选择vueRouter插件依赖即可，其中还有一些typescript支持、pinia状态管理器（与vuex属同种）支持，按需选择即可。
vite文档
vue3组合式API
vue3依然可以使用配置型API，但是推出了可能更符合编程习惯的组合式API。
原本的组件文件xx.vue中，我们的script标签中的代码需要以导出对象的方式，去配置组件，其中data、methods、computed等数据方法属性都被按照属性类型分类了，这样编程的一个缺点在于编程者在协同数据或方法时，可能会出现很多干扰项
而组合式API就让编程者可以按照自己的流程去输出属性，编程者可以按照功能和流程去划分自己的代码。
setup函数
<template>
<div class="home">
<p>{{name}}</p>
<p>{{age}} <button @click="age++">+1</button></p>
<p>{{gender}}</p>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {ref, reactive, toRefs} from 'vue'
export default {
name: 'HomeView',
setup() {
// 没有检测响应的变量，只渲染一次
let hello = 'hello'
// 实时渲染，在插值时直接使用变量名
let name = ref('leethon')
// 也是实时渲染，但是只能处理数组和对象，插值时用info.属性名即可
let info = reactive({ // 搭配toRefs可以直接打散，插值时用键就可以了
age: 18,
gender: 'male'
})
// 定义methods
let ageUp = () => {
info.age.value++
}
// setup代码中定义的变量只有返回出去才能被template作为变量来用
return {hello, name, ...toRefs(info), ageUp}
},
}
</script>
从上述代码，可以看出setup统合了：
-
data不必单独定义了，可以直接在setup函数中定义
并且数据分为了三种处理，一种只渲染一次，一种可以响应的值数据，一种可以响应的响应的数据
- 默认不响应式渲染
- 响应式渲染ref（可以是所有数据类型）
- 响应式渲染reactive
- 打散返出toRefs
-
methods不必单独定义了，可以在setup函数中定义
可以紧贴数据去写，让功能划分的更清晰，对编程友好。
但是setup函数所定义的函数需要返出才能 在template中使用，也意味着渲染的值需要交给我们来统计，有时候遇到对象还需要用特殊的方法。
所以，vue3又提供了了script标签的setup属性。
setup属性
<script setup lang='js'>
// 直接定义数据和方法，不必return出去
let hello = 'hello'
let name = ref('leethon')
let info = reactive({
age: 18,
gender: 'male'
})
let ageUp = () => {
info.age++
}
</script>
- setup：这个属性帮助我们省去返出数据，导出组件等麻烦，但不只于此，往后看
- lang：这个属性指定script标签内的代码是js语言还是ts语言，默认和项目的配置项相同（ts语言完整兼容js）
计算属性和监听属性
计算属性
计算属性也是方法，在setup中该如何与methods区分的定义呢
let computedAttr = computed(()=>{})
只需要用computed函数套一个匿名函数即可，这样当匿名函数中的数据发生变化时才会触发这个函数的执行。
计算属性的取值和修改值：
let computedAttr = computed({
get(){}, // 内部变量发生变化时触发
set(){} // 修改computedAttr值时触发
})
简单小应用：对用户输入的姓名做双向转化处理
let fullName = computed({
get() {
// 全名随姓+名变化
return person.firstName + person.lastName
},
set(value) {
// 姓和名随全名变化
person.firstName = value.slice(0, 1)
person.lastName = value.slice(1)
},
})
监听属性
监听属性与计算属性的区别在于不要求有返回值，当指定的变量被监听到变化时，那么就执行函数体，在setup中，我们套用：
// 指定变量监听
watch(监听值:name,执行函数(newName,oldName)=>{函数体代码})
// 所有函数体变量被监听
watchEffect(() => {console.log(age.value)})
生命周期函数
vue2 ===》vue3
beforeDestroy ==>beforeUnmount
destroyed =====>unmounted
vue3中一般在setup中写，在setup函数中需要从vue模块中导入beforeUnmount这些名字：
setup(){
import {beforeUnmount} from 'vue'
beforeUnmount( ()=>{console.log('组件销毁之前')} )
}
要注意：beforeCreate和created在执行setup时就相当于执行了，不需要导入
beforeCreate===>setup()created=======>setup()beforeMount===>onBeforeMountmounted=======>onMountedbeforeUpdate===>onBeforeUpdateupdated=======>onUpdatedbeforeUnmount==>onBeforeUnmountunmounted=====>onUnmounted
而在setup属性的script标签中书写则更为简单。
setup属性script标签示例
<script setup>
// 以导入函数的方式注册组件
import leethon from "@/components/leethon";
// 导入必要模块
import {ref, onUpdated} from 'vue'
// 在页面生成前，我想要去后端取数据，原本应该在created中写，现在在setup中写，它也会直接执行
import axios from 'axios'
axios.get('url').then((res)=>{})
// 一些界面上的变量和方法定义
// 数据功能1
let aData = ref('aaa')
let aFunction = ()=>{console.log(aData)}
// 数据功能2
let bData = ref('b')
let bbbData = ref('bbb')
let bFunction = ()=>{console.log(bData,bbbData)}
// 钩子函数
onUpdated(()=>{})
</script>
