Java前端-Vue3-CSDN博客

一.Vue3概念

Vue2的代码

知识点

核心内容

考试重点/易混淆点

难度系数

Vue 3学习必要性

招聘市场需求、官方默认版本、未来主流趋势

Vue 2与Vue 3的过渡困惑

⭐⭐

组合式API

集中式代码维护、setup语法、ref函数使用

选项式API vs 组合式API的代码结构差异

⭐⭐⭐

响应式数据

ref函数创建响应式变量、Proxy底层实现

Vue 2动态添加属性非响应式问题在Vue 3的解决

⭐⭐⭐⭐

性能优化

模板编译增强、组件初始化性能提升、Tree Shaking支持

体积优化带来的打包大小减少

⭐⭐⭐

TypeScript支持

更好的类型推导和开发体验

与Vue 2的TS兼容性对比

⭐⭐⭐⭐

迁移兼容性

Vue 3支持大部分Vue 2语法

新旧语法混写的可行性

⭐⭐

选项式API：通过data()和methods分离定义数据和逻辑

Vue3的代码
组合式API：使用setup语法和ref函数

二.Watch函数

一.watch函数的基本概念

1.watch函数用于监听数据变化，类似于Vue 2.x中的$watch。

2.当监听的数据发生变化时，可以执行回调函数。

3.watch函数接受两个额外参数：立即执行和深度监听。
import{ref,watch} form vue 

const count = ref(0) ; //响应变量  reactive不接受简单的数据类型 ref常用
const changeCount=() => {
    count.value++    
}
const name = ref('cp') ; 
const changeName=() => {
    name.value='pc'   
}
1.监听单个数据的变化

1.导入watch函数，并执行该函数，传入要监听的响应式数据和回调函数。

2.回调函数会在监听的数据发生变化时执行。

3.回调函数接收变化前后的值作为参数：旧值和新值。
watch(count,(newVal,oldVal) => {
    console.log('count变化了',newVal,oldVal)
})
2.监听多个数据的变化

1.监听多个数据变化时，将监听的数据作为数组传入。

2.回调函数会在数组中的任何一个数据发生变化时执行。

3.回调函数接收两个数组作为参数，分别代表变化后的新值和变化前的旧值。
watch(
    [count,name],
    (
        [newCount,newName],
        [oldCount,OldName]
    )=>{
    console.log('count变化或者name变化了',[newCount,newName],
    [oldCount,OldName])    
   }
)
3.立即执行参数

1.立即执行参数immediate，在侦听器创建时立即触发回调函数。

2.语法：在watch函数的最后一个参数中添加一个包含immediate选项的对象，并将其设置为true。

3.immediate参数使得回调函数在侦听器创建时立即执行一次，并在数据变化时继续执行。
//Watch立即执行
const count=ref(0)
watch(count,() => {
    console.log('count变化了')
},{
    immediate:true
})

注: 作为watch函数的第一个参数ref不需要添加.value

三.深度侦听和精确侦听

1.基本概念

deep 默认机制：通过watch监听的ref对象默认是浅层侦听，直接修改嵌套的对象属性不会触发回调执行，需开启deep选项

深度侦听（deep选项）用于侦听对象内部属性的变化。
默认情况下，watch函数只侦听对象顶层属性的变化，称为浅层侦听。
开启深度侦听后，watch函数会递归地侦听对象所有属性的变化。
精确侦听允许你只侦听特定属性，而不是对象的所有属性。

2.深度侦听的示例

1.通过示例说明深度侦听的工作原理。

2.在对象属性变化时，开启深度侦听可以触发回调函数。

3.深度侦听可以侦听到对象嵌套属性的变化。
const count=ref(0)
watch(count,() => {
    console.log('count变化了')
},{
    deep:true
})
3.精确侦听的示例

1.通过示例说明精确侦听的工作原理。

2.精确侦听只侦听特定属性，减少不必要的回调触发。

3.精确侦听提高了侦听的准确性和性能。
const info = ref({
 name:'cp',
 age:18
})
watch(//参数格式变成了两个回调
    ()=>info.value.age,
    ()=>console.log('age'发生了变化')
)
4.深度侦听的性能考虑

1.深度侦听会递归遍历对象属性，存在性能损耗。

2.在大多数情况下，建议不开启深度侦听，而是使用精确侦听。

四.生命周期API

1.基本生命周期

选项式API 组合式API
beforeCreate/create setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
update onUpdate
beforeUnmount onBeforeUnmount
unmounted onUnmounted

组合式API周期生命函数格式 on+生命周期名字
组合式API没有这个钩子函数，直接写在setup中
组合式API卸载完毕执行onUnmounted

2.组合式API的父传子

基本语法：

1.父组件中给子组件绑定属性
//父组件
//setup语法糖下局部组件无需注册直接可以使用
<script setup>
import sonComVue form './son-com.vue' //引入子组件
</script>

<template>
    <sonComVue message = "this is app message">
</template>
2.子组件通过props选项接收
//子组件
//通过defineProps"编译器宏"接收子组件传递的数据
<script setup>
const props = defineProps({
    message:String
})

</script>

<template>
   {{message}}
</template>
3.基本连接

3.1父传子

父传子通过defineProps({属性名:类型})接收props

父组件使用setup语法糖中通过const props = defineProps ({属性名:类型})接收传来数据
<script setup>
  import SonCom form '/Son-com.vue'
  const getMessage = {msg} =>{
    console.log(msg)
  }
</script>
3.2子传父

通过difineEmits(['事件名称'])得到emit方法
<script setup>
  const emit = defineEmits(['get-message'])
  const sendMsg=()=>{
    emit('get-message','this is son message')
  }
</script>

五.模板引用

通过ref标识获取真实的dom对象或种组件的实例对象
<script setup>
  import {ref} from 'vue'
  //调用ref函数获取ref对象
  const h1Ref = ref(null)
</script>
<template>
  //通过ref标识绑定ref对象
  <h1 ref = 'h1Ref'>我是dom标签h1</h1>
</template>
此时的h1标签已经通过ref绑定给h1Ref.value中，可以将ref理解成一个容器

defineExpose()

默认情况下<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定属性和方法允许访问
<script setup>
  import {ref} from 'vue'
  const testMessage=ref('this is a message')
defineExpose{(
  testMessage
)}
</script>
组件挂载完毕获取引用模板

六.跨层数据传递

1.跨层传递普通数据

顶层通过provide函数提供数据
provide<'key',顶层组件的数据>
底层通过inject函数获取数据
const message = inject('key')
2.跨层传递响应式数据

顶层通过provide函数提供数据
provide<'key',ref对象>
底层通过inject函数获取数据
const message = inject('key')
3.底层组件调用顶层

核心就是传递方法，谁的数据谁负责修改，让底层调用顶层传来的方法从而实现对顶层数据的改变
const setCount () => { 
    count.value++
}
provide('setCount-key', setCount)

知识点	核心内容	考试重点/易混淆点	难度系数
Vue 3学习必要性	招聘市场需求、官方默认版本、未来主流趋势	Vue 2与Vue 3的过渡困惑	⭐⭐
组合式API	集中式代码维护、setup语法、ref函数使用	选项式API vs 组合式API的代码结构差异	⭐⭐⭐
响应式数据	ref函数创建响应式变量、Proxy底层实现	Vue 2动态添加属性非响应式问题在Vue 3的解决	⭐⭐⭐⭐
性能优化	模板编译增强、组件初始化性能提升、Tree Shaking支持	体积优化带来的打包大小减少	⭐⭐⭐
TypeScript支持	更好的类型推导和开发体验	与Vue 2的TS兼容性对比	⭐⭐⭐⭐
迁移兼容性	Vue 3支持大部分Vue 2语法	新旧语法混写的可行性	⭐⭐

选项式API	组合式API
beforeCreate/create	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
update	onUpdate
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted