vue3中知识点总结（持续更新）1、具名插槽
// 具名插槽添加
<slot name="submit"></slot>
// 具体地⽅使⽤submit插槽时
// v-slot:submit 可以缩写为#submit
<template v-slot:submit>
<span class="btn btn-danger">Submit</span>
</template>
// 或者
<template #submit>
<span class="btn btn-danger">Submit</span>
</template>
2、watch监听
应⽤场景代码：
// watch 简单应⽤
watch(data,()=>{
document.title ='updated '+ unt
})
// watch 的两个参数，代表新的值和旧的值
unt,(newValue, oldValue)=>{
console.log('old', oldValue)
console.log('new', newValue)
document.title ='updated '+ unt
})
// watch 多个值，返回的也是多个值的数组
watch([greetings, data],(newValue, oldValue)=>{
console.log('old', oldValue)
7万元左右最好的车排行榜console.log('new', newValue)
document.title ='updated'+ greetings.value + unt
})
// 使⽤ getter 的写法 watch reactive 对象中的⼀项
// 注意这⾥不能直接⽤unt；因为unt不是⼀个响应式数据，所以⽤() => unt 箭头函数的⽅式watch([greetings,()=> unt],(newValue, oldValue)=>{
console.log('old', oldValue)
console.log('new', newValue)
document.title ='updated'+ greetings.value + unt
})
⽰例代码：
-->
<template>
<h1>{{ count }}</h1>
<h2>{{ double }}</h2>
<button @click="btnClick">点击+1</button>
</template>
<script lang="ts">
import{ ref, computed, reactive, toRefs, watch }from'vue'// 引⼊ref,computed 才能使⽤
interface DataProps {// 定义数据类型
count: number;
double: number;
btnClick:()=>void;
}
export default{
name:"watch",
setup(){
const data: DataProps =reactive({
count:0,
/
** 点击事件 */
btnClick:()=>{ unt ++;},
/** 计算属性 */
double :computed(()=>{unt *2})
})
const refData =toRefs(data)
/** watch监听 */
// data.double不是响应式数据，故⽽需要⽤箭头函数的⽅式()=> data.double，或者toRefs后的unt watch([unt,()=> data.double],(newValue, oldValue)=>{
console.log('old', oldValue)
console.log('new', newValue)
document.title ='updated '+ unt+data.double
})
return{
...refData
}
}
}
</script>
结果：
3、ref语法（数据定义）
代码：
-->
<template>
<h1>{{ count }}</h1>
<h2>{{ double }}</h2>
<button @click="btnClick">点击+1</button>
</template>
<script>
import{ ref, computed }from'vue'// 引⼊ref,computed 才能使⽤
export default{
name:"ref_computed",
setup(){
// ref是⼀个函数，他接受⼀个参数，返回的就是⼀个神奇的响应式对象
const count =ref(0)
/** 计算属性⽤法 */
const double =computed(()=>{
return count.value *2
})
/** 点击事件 */
const btnClick=()=>{
/
补胎胶水/ 更改值⽤xx.value; 渲染时⽤xx; 原因vue3底层⾃动在渲染时处理了
count.value ++
}
return{
count,
double,
btnClick
}
}
}
</script>
<style scoped>
</style>
4、Reactive函数
导致这个的原因是：
如果需要优化，且避免上述问题，我们需要引⼊toRefs；优化后的完整代码如下：
* @Description: Vue3新特性之Reactive 语法
* @Author: Rulyc
* @Operating:
-
一键启动->
<template>
<h1>{{ count }}</h1>
<h2>{{ double }}</h2>
<button @click="btnClick">点击+1</button>
</template>
<script lang="ts">
import{ ref, computed, reactive, toRefs }from'vue'
interface DataProps {// 定义数据类型
count: number;
double: number;
btnClick:()=>void;
}
export default{
name:"Reactive_toRefs",
setup(){
const data: DataProps =reactive({
count:0,
/** 点击事件 */
btnClick:()=>{ unt ++;},
/** 计算属性 */
double :computed(()=>{unt *2})
})
const refData =toRefs(data)
return{
// 此时的数据不是响应式的数据，⽽是取出的为数据类型，number
/* count: unt,
double: data.double,
btnClick: data.btnClick*/
...refData
}江门交通违章查询
}
}
</script>
<style scoped>
</style>
使⽤ ref 还是 reactive 可以选择这样的准则：
第⼀，就像刚才的原⽣ javascript 的代码⼀样，像你平常写普通的 js 代码选择原始类型和对象类型⼀样来选择是使⽤ ref 还是 reactive。第⼆，所有场景都使⽤ reactive，但是要记得使⽤ toRefs 保证 reactive 对象属性保持响应性
5、Vue3中的⽣命周期函数
在 setup 中使⽤的 hook 名称和原来⽣命周期的对应关系beforeCreate -> 不需要 use setup()
created -> 不需要 use setup()
高速公路免费细则beforeMount -> onBeforeMount
广汽三菱asx劲炫mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy-> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
errorCaptured -> onErrorCaptured
// 新增的（调试⽤的debugger⼯具函数）renderTracked -> onRenderTracked renderTriggered -> onRenderTriggered