Vue3新特性
vue3支持的UI组件库
ant-design-vue是Ant Design的vue实现,组件风格与Ant Design保持同步
element Plus,一套为开发者、设计师和产品经理准备的基于Vue3的桌面端组件库
vant,轻量可靠的移动端Vue组件库,有赞团队开发维护4年
VueUse,基于composition组合api的常用组合
Vue3带来的新变化
性能提升:首次渲染更快、diff算法更快、内存占用更少、打包体积更小、更好的Typescript支持,在使用vue2.x版本开发较为复杂的组件时,逻辑难以复用,组合式api的出现可以解决此类问题
破坏性语法的更新
1.实例方法$on移除(eventBus现有实现模式不再支持,可以使用第三方插件替代)
2.过滤器filter移除(插值表达式里不能再使用过滤器 可以使用methods替代)
3. .sync语法移除(和v-model语法合并)
Vue3开发环境搭建
1.使用vue-cli搭建开发环境(当执行vue create 项目名称 失败时可能是vue-cli版本过低,执行npm i -g @vue/cli to update 来升级到最新版本)特别提醒:有的小伙伴使用的是yarn命令,那么后面窗口命令请保持一致,否则组件包适配不一致导致服务无法启动的情况会发生,做程序员不能脚踏两只船 npm、yarn专一
2.选择自定义配置
3.选中自定义安装版本
4.选择3.x版本
5.组合式api(Composition API)算是vue3对我们开发者来说非常有价值的一个api更新
特别注意:
- 选项式api和组合式api俩种风格是并存的关系 并不是非此即彼
- 需要大量的逻辑组合的场景,可以使用compition API进行增强
6.setup入口函数 - setup 函数是一个新的组件选项,作为组件中组合式API 的起点(入口)
- 从生命周期角度来看,setup 会在 beforeCreate 钩子函数之前执行
- setup 中不能使用 this, this 指向 undefined
7.reactive函数 作用:reactive是一个函数,接收一个普通的对象传入,把对象数据转化为响应式对象并返回
使用步骤: - 从vue框架中导入reactive函数
- 在setup函数中调用reactive函数并将对象数据传入
- 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
8.ref函数 作用:ref是一个函数,接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象
使用步骤: - 从vue框架中导出ref函数
- 在setup函数中调用ref函数并传入数据(简单类型或者复杂类型)
- 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
- 注意:在setup函数中使用ref结果,需要通过.value 访问,模板中使用不需要加.value
9.toRefs函数(经过reactive函数处理之后返回的对象,如果给这个对象解构或者展开,会让数据丢失响应式的能力,为了解决这个问题需要引入toRefs函数,使用 toRefs函数 可以保证该对象展开的每个属性都是响应式的)
10.computed 作用:根据现有响应式数据经过一定的计算得到全新的数据
使用步骤: - 从vue框架中导入computed 函数
- 在setup函数中执行computed函数,并传入一个函数,在函数中定义计算公式
- 把computed函数调用完的执行结果放到setup的return值对象中
11.watch监听器 作用:基于响应式数据的变化执行回调逻辑,和vue2中的watch的功能完全一致
使用步骤: - 从vue框架中导入watch函数
- 在setup函数中执行watch函数开启对响应式数据的监听
- watch函数接收三个常规参数
- 第一个参数为函数,返回你要监听变化的响应式数据
- 第二个参数为响应式数据变化之后要执行的回调函数
- 第三个参数为一个对象,在里面配置是否开启立刻执行或者深度监听
开启立刻执行,watch的效果默认状态下,只有监听的数据发生改变时才会执行回调,如果你需要在一开始就进行一次回调,需要配置一下immediate属性
<template>
{{ age }}
<button @click="age++">change age</button>
</template>
<script>
import { ref, watch } from 'vue'
export default {
setup() {
const age = ref(18)
watch(() => {
// 返回你想要监听的响应式属性(ref产生的对象必须加.value)
return age.value
}, () => {
// 数据变化之后的回调函数
console.log('age发生了变化')
},{ immediate: true})
return {
age
}
}
}
</script>
开启深度监听
当我们监听的数据是一个对象的时候,默认状态下,对象内部的属性发生变化是不会引起回调函数执行的,如果想让对象下面所有属性都能得到监听,需要开启deep配置
<template>
{{ name }}
{{ info.age }}
<button @click="name = 'pink'">change name</button>
<button @click="info.age++">change age</button>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
export default {
setup() {
const state = reactive({
name: 'cp',
info: {
age: 18
}
})
watch(() => {
return state
}, () => {
// 数据变化之后的回调函数
console.log('age发生了变化')
}, {
deep: true
})
return {
...toRefs(state)
}
}
}
</script>
更好的做法: 使用watch的时候,尽量详细的表明你到底要监听哪个属性,避免使用deep引起的性能问题,比如我仅仅只是想在state对象的age属性变化的时候执行回调,可以这么写
<template>
{{ name }}
{{ info.age }}
<button @click="name = 'pink'">change name</button>
<button @click="info.age++">change age</button>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
export default {
setup() {
const state = reactive({
name: 'cp',
info: {
age: 18
}
})
watch(() => {
// 详细的告知你要监听谁
return state.info.age
}, () => {
// 数据变化之后的回调函数
console.log('age发生了变化')
})
return {
...toRefs(state)
}
}
}
</script>
好啦。今天太累了,先写到这里吧,后面新函数我们在下期整理。下一期