我们为什么要学习v3
- 对应市场需求
- 官方默认版本为v3：通过npm i vue安装的就是v3版本
创建v3项目
我们先使用create-vue搭建Vue3项目
认识create-vue
create-vue是一个脚手架工具，用来快速创建v3的项目。（Vuecli用来创建v2的项目）
create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应
使用create-vue创建项目
前置条件 - 已安装16.0或更高版本的Node.js
执行如下命令，这一指令将会安装并执行 create-vue
npm init vue@latest
如果没有create-vue 执行命令会提示安装
按照需求选择（左右方向键选择）
创建完成后启动显示如下界面就算成功了
熟悉V3的项目目录和关键文件
package.json
vue的版本是3 + 依赖vite做底层驱动
vite.config.js
配置文件。类似vue2的vue.config.js。
业务文件夹src/main.js
new Vue() 创建vue的实例对象
createApp也是用来创建vue的实例对象
createApp(App).mount('#app')
mount('#app') 把vue的实例对象挂载在index.html的#app元素上
App.vue
- script -> template -> style
- script 上的setup是一个特殊的开关：
-
- 打开之后，就可以使用组合式api
- 不打开它，就可以继续兼容v2的写法
- template中可以不需要唯一的根元素的区别
语法区别
先来一段代码来看看v2和v3的区别
v2语法
<script>
export default {
data(){
return {
count:0
}
},
methods:{
add(){
this.count++
}
}
}
</script>
v3语法
<script setup>
import { ref } from 'vue'
const count = ref(0)
const add = ()=> count.value++
</script>
v3语法特点
- 代码量变少
- 分散式维护变成集中式维护
- v3对v2的兼容性很好
Vue3更多的优势!
组合式API - setup选项
setup选项的写法和执行时机
格式
类似于生命周期钩子的写法。
<script>
export default {
setup(){
console.log('setup')
},
beforeCreate(){
console.log('beforeCreate')
}
}
</script>
执行时机
在beforeCreate钩子之前执行setup函数
上面我们知道了setup选项的格式和执行时机，那如何在它的内部写代码呢？
2. setup中写代码的特点
在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用。
<script>
export default {
setup(){
const message = 'this is message'
const logMessage = ()=>{
console.log(message)
}
// 必须return才可以
return {
message,
logMessage
}
}
}
</script>
注意：vue3不再推荐使用this.data去定义和修改数据，在setup中，console.log(this)会得到undefined。
问题：
如果要定义很多的数据，在模板中使用，那是不是要：1. 定义很多个数据。2. 写一个长长return？不需要，在v3中，它提供了setup语法糖
3. script setup 语法糖
script标签添加 setup标记，不需要再写return语句，默认会添加return语句
更改代码如下：
<script setup>
const message = 'this is message'
const logMessage = ()=>{
console.log(message)
}
</script>
拓展-语法糖
组合式API - reactive和ref函数
1. reactive
作用
接收对象类型数据的参数传入并返回一个响应式的对象
步骤
- 从vue包中导入reactive函数
- 在的初始值，使用变量接收返回值
示例代码
<script setup>
import { reactive } from 'vue' // 导入
const state = reactive({ // 执行函数 传入参数 变量接收
count:0
})
const add = ()=>{
state.count++ // 修改数据更新视图
}
</script>
<template>
<button @click="add">{{state.count}}</button>
</template>
注意：
- 普通对象不是响应式的，可以正常访问，但是，不具备响应式的特点：修改数据之后，视图不会更新
- reactive必须要传入一个类型为对象的数据，不支持基本数据类型。 vue提供了更加适用的ref函数。
2. ref
作用
接收简单类型或对象类型数据的参数传入并返回一个响应式的对象
步骤
- 从vue包中导入ref函数
- 在
<script setup>中执行ref函数并传入初始值，使用变量接收返回值
- 在模板中使用数据不需加.value
- 在代码中使用数据要加.value
示例代码
<script setup>
import { ref } from 'vue' // 导入
const setCount = ()=>{ // 执行函数 传入参数 变量接收
console.log(count)
// 修改数据更新视图必须加上.value
count.value++
}
</script>
<template>
<button @click="setCount">{{count}}</button>
</template>
3. reactive 对比 ref
- 相同点：都是用来生成响应式数据
- 不同点
-
- reactive不能处理简单类型的数据
- ref参数类型支持更好，但是必须通过.value做访问修改
- ref函数内部的实现依赖于reactive函数
function ref -> createRef -> new RefImpl -> constructor -> toReactive -> reactive
- 在实际工作中的推荐 ：推荐使用ref函数，减少记忆负担
组合式API - computed
计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法
步骤
- 导入computed函数
- 执行函数在回调参数中return基于响应式数据做计算的值，用变量接收
格式
<script setup>
// 导入
import { computed } from 'vue'
// 执行函数 变量接收 在回调参数中return计算值
const computedState = computed(() => {
return 基于响应式数据做计算之后的值
})
</script>
代码
<template>
<div>
初始数据：{{ list }}
</div>
<div>
计算值之后得到的数据：{{ newList }}
</div>
</template>
<script setup>
import {ref, computed } from 'vue'
const list = ref([1,2,3,4,5,6])
const newList = computed(()=> {
return list.value.filter(it => it > 2)
})
setTimeout(() => {
list.value.push(7)
}, 3000)
</script>
小结
组合式API - watch
作用
侦听一个或者多个数据的变化，数据变化时执行回调函数。
俩个额外参数 immediate控制立刻执行，deep开启深度侦听
基础用法侦听单个数据
步骤：
- 导入watch函数
- 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
示例
<<template>
<button @click="add">
{{ count }}
</button>
</template>
<script setup>
// 1. 导入watch
import {ref, watch } from 'vue'
const count = ref(0)
const add = () => count.value++
// 2. 调用watch 侦听变化
// count: ref参数不需要加.value
watch(count, (newVal, oldVal) => {
console.log('旧值为',oldVal,'新值为',newVal )
})
</script>
侦听多个数据
侦听多个数据，第一个参数可以改写成数组的写法
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('cp')
// 2. 调用watch 侦听变化
watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
})
</script>
立即监听 immediate
在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
// 2. 调用watch 侦听变化
watch(count, (newValue, oldValue)=>{
console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
},{
immediate: true
})
</script>
组合式APIwatch监听-深度侦听-精准侦听
浅层侦听
通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性 不会 触发回调执行，需要开启deep
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const state = ref({ count: 0 })
// 2. 监听对象state
watch(state, ()=>{
console.log('数据变化了')
})
const changeStateByCount = ()=>{
// 直接修改不会引发回调执行
state.value.count++
}
</script>
开启deep之后
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const state = ref({ count: 0 })
// 2. 监听对象state 并开启deep
watch(state, ()=>{
console.log('数据变化了')
},{deep:true})
const changeStateByCount = ()=>{
// 此时修改可以触发回调
state.value.count++
}
</script>
开启deep的问题： 它会递归地处理处理所有的值，无论哪个属性被修改都会触发watch回调，这可能会导致不必要的浪费。
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
// 这里有两个属性
const state = ref({ count: 0, age: 18 })
// 2. 监听对象state 并开启deep
watch(state, ()=>{
console.log('数据变化了')
},{deep:true})
const changeStateByCount = ()=>{
// 此时修改可以触发回调
state.value.count++
}
</script>
精确监听
watch(()=>state.value.name, (newVal, oldVal) => {
console.log('name变化了')
})
组合式API - 生命周期函数
生命周期函数，从组件的创建到销毁阶段，在特定时间被自动调用的函数。
选项式对比组合式
v3的变化：
- 整体的名称用on打头
- destory → onUnMount
- beforeCreate/ created → setup
生命周期函数基本使用
- 导入生命周期函数
- 执行生命周期函数，传入回调
<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
})
</script>
执行多次
生命周期函数执行多次的时候，会按照顺序依次执行
<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
})
onMounted(()=>{
// 自定义逻辑
})
</script>
小结
- V3中生命周期函数的命名格式是？
on + 生命周期的名字
- V3中可以使用onCreated钩子吗？
不能。因为没有这个钩子，直接写到setup中
- V3中组件卸载完毕时执行哪个函数？
onUnmounted
组合式API-父子通信
父传子
基本思想
- 父组件中给子组件绑定属性
- 子组件内部通过props选项接收数据
示意图
组合式API-子传父
基本思路
- 父组件中给子组件标签通过@绑定事件
- 子组件内部通过
emit方法触发事件
-
-
const emit = defineEmits(\['事件名1', '事件名2']) -
emit('事件名1', 值1)
-
小结
- 子传父
<my-com @event1="onEvent" />，那my-com内部通过const emit = defineEmit(['event1']); emit('event1')方式抛出事件
组合式API - 模版引用
定义
通过ref标识获取真实的dom对象或者组件实例对象
基本使用-普通元素
实现步骤:
- 调用ref函数生成一个ref对象
- 通过ref标识绑定ref对象到标签
- 组件挂载完成之后，可以拿到值
<script setup>
import { onMounted, ref } from 'vue'
// 1. 调用ref函数得到ref对象
const refDiv = ref(null)
// 3. 组件挂载完成之后，可以拿到值
onMounted(() => {
console.log(refDiv.value)
})
</script>
<template>
<!-- 2. 通过ref标识绑定ref对象 -->
<div ref="refDiv">标题</div>
</template>
注意，只有当组件挂载完成之后，才能获取到值
进阶使用-组件元素
<script setup>
import MyCom2 from './my-com2.vue'
import { onMounted, ref } from 'vue'
// 1. 调用ref函数得到ref对象
const refCom2 = ref(null)
// 3. 组件挂载完成之后，可以拿到值
onMounted(() => {
console.log('com2', refCom2.value)
})
</script>
<template>
<!-- 2. 通过ref标识绑定ref对象 -->
<MyCom2 ref="refCom2" />
</template>
my-com2.vue
<script setup>
import { ref } from 'vue'
const num = ref(100)
</script>
<template>
<div>com2内部的数据{{ num }}</div>
</template>
注意：默认情况下，我们不能通过对组件的引用拿到组件内部的数据
defineExpose
默认情况下在 <setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问
说明：指定num属性可以被访问到
- 获取模板引用的时机是什么？
组件挂载完毕
- defineExpose编译宏的作用是什么？
显示暴露组件内部的属性和方法
组合式API - provide和inject
作用和场景
顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
跨层传递普通数据
实现步骤
- 顶层组件通过
provide函数提供数据 - 底层组件通过
inject函数接收数据
跨层传递响应式数据
在调用provide函数时，第二个参数设置为ref对象
跨层传递方法
顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据
