1.vue3基础介绍
1.1 vue3带来的新变化
- 性能提升（渲染更快，diff算法更快，内存占用更少，打包体积更小）
- 更好的Tyoescript支持
- 提供新的写代码的方式：Composition API
?1.2 移除的一些语法
- 移除了$on方法 （eventBus现有实现模式不再支持，可以使用三方插件替代）
- 移除过滤器选项 （插值表达式里不能再使用过滤器filter， 可以使用methods替代）
- 移除 .sync语法（v-bind时不能使用.sync修饰符了，现在它v-model语法合并了）
?2.组合式API和选项式API
2.1 Vue2选项式API(option api)
优点：简单，好上手，各司其职
缺点： 代码零散，不方便功能复用
2.2?Vue3组合式API(composition api)
优点：功能代码组合维护
?3.setup函数
3.1 作用
- setup函数是一个新的组件选项，作为组件中使用组合API的起点。
- setup中不能使用this，this指向undefined。
- setup函数只会在组件初始化的时候执行一次。
- setup函数在beforeCreated生命周期钩子执行之前执行
3.2 执行时机
从组件生命周期来看，它的执行在组件实例创建之前执行（在beforeCreate前），这就意味着setup函数中this还不是组件实例，this此时是undefined。
setup() {
console.log('setup....', this)
},
beforeCreate() {
console.log('beforeCreate') // 它比setup迟
}3.3 参数
- 第一个参数props为一个对象，内部包含了?父组件传递过来的所有prop数据
- 第二个参数context为一个对象，包含了?attrs，slots，emit?属性
setup(props,context) {
}3.4 返回值
setup函数的返回值是一个对象，在模板中需要使用的数据和函数，需要在这个对象中声明。
4.生命周期
组合API的生命周期钩子有7个，它们都是回调函数的格式。可以多次使用同一个钩子，执行顺序和书写顺序相同
?5.ref函数
因为在setup中返回的数据不是响应式的，这时候就需要 ref 来定义响应式数据。
5.1 步骤
- 从vue框架中导入
ref函数 - 在setup函数中调用
ref函数并传入数据（简单类型或者复杂类型） - 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
5.2 代码
<template>
<p>姓名：{{name}}, 公司：{{company}}，月薪：{{salary}}</p>
<button @click="double">月薪double</button>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup () {
// 定义响应式对象
const company = ref('DiDi')
const name = ref('小王')
const salary = ref(18000)
const double = () => {
// 在代码中修改(或者获取)值时，需要补上.value
salary.value *= 2
}
return {
name,
company,
salary,
double
}
}
}
</script>5.3 注意
- 在代码中修改（获取）值的时候，需要补上 .value
- 在模板中使用时，可以省略 .value
6.ref属性
6.1 作用
获取子组件（DOM）的引用
6.2 步骤
- 导入ref函数
- 使用ref函数传入null创建 ref对象 =>
const hRef = ref(null) - setup中导出
-
模板中通过定义ref属性等于1中创建的ref对象名称建立关联 =>
<h1 ref="hRef"></h1>使用 =>
hRef.value
6.3 代码演示
<template>
<div class="container">
<div ref="dom">我是box</div>
<button @click="hClick"></button>
</div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
name: 'App',
setup () {
// 1. 获取单个元素
const dom = ref(null)
const hClick(()=>{
console.log(dom.value)
})
return {dom, hClick}
}
}
</script>?7.reactive函数
- ref函数定义的响应式数据在代码中使用要加.value，不是很方便，这时候我们可以使用reactive定义响应式数据。
- reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。
7.1 使用步骤
- 导入：从vue框架中导入
reactive函数 - 调用：在setup函数中调用reactive函数并将对象数据传入
- 导出：在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
7.2 代码?
<template>
<p>姓名：{{stu.name}}, 公司：{{stu.company}}，月薪：{{stu.salary}}</p>
<button @click="double">月薪double</button>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup () {
const stu = reactive({
company: 'DiDi',
name: '小王'，
salary：18000
})
const double = () => {
stu.salary *= 2
console.log('stu.salary', stu.salary)
}
return {
stu,
double
}
}
}
</script>8.toRefs函数
8.1 作用
定义转换响应式中所有属性为响应式数据，通常用于解构|展开reactive定义对象， 简化我们的在模板中的使用。
8.2 格式
// 响应式数据：{ 属性1, 属性2 }
let { 属性1, 属性2 } = toRefs(响应式数据)总结：增强版的结构赋值：在解构对象的同时，保留响应式的特点。
9.如何取舍ref和reactive
-
ref函数，常用于将简单数据类型定义为响应式数据
-
在代码中修改(或者获取)值时，需要补上.value
-
在模板中使用时，可以省略.value
-
-
reactive函数，常用于将复杂数据类型为响应式数据