一、watch监听属性
注意点:
-
监视reactive定义的响应式数据时,oldvalue无法正确获取,强制开始了深度监视(deep的配置失效)
-
监视reactive定义的响应式数据的某一个值时:deep配置有效
用法:
与Vue2.0中是一样的,但是需要用 import {watch} from 'vue' 来引用
<script setup>
import {ref,watch} from 'vue'
let count = ref(10)
let add = () => {
count.value ++
}
let subtract = () => {
count.value --
}
watch(count,(newvalue,oldvalue) => {
if (newvalue > 20) {
alert("够了,够了,不要再加了")
}else if (newvalue < 1) {
alert("再减就没了哦")
}
})
</script>
<template>
<div>
<button @click="subtract">-</button>
<span>{{count}}</span>
<button @click="add">+</button>
</div>
</template>
<style scoped>
</style>
二、生命周期函数
概念:
Vue中每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁、这就是一个组件所谓的生命中周期。
Vue3.0相对于2.0的不同:
在Vue3.x中,新增了一个setup生命周期函数,setup执行的时机是在beforeCreate生命函数之前执行,因为在这个函数中不能通过this来获取实例的;同时为了命名的统一,将beforeDestory改名为beforeUnmount,destoryed改名为unmounted。
vue3新增了生命周期钩子,我们可以通过在生命周期函数前加on来访问组件的生命周期。
比如:onBeforeMount 、onMounted、onBeforeUpdate 、onUpdated、onBeforeUnmount、onUnmounted
注意:使用时都需要通过 import { } from 'vue' 来引入
<script setup>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from 'vue'
onBeforeMount(() => {
console.log("组件挂载之前执行");
})
onMounted(() => {
console.log("组件挂载之后执行");
})
onBeforeUpdate(() => {
console.log("组件更新之前执行");
})
onUpdated(() => {
console.log("组件更新之后执行");
})
onBeforeUnmount(() => {
console.log("组件解绑之前执行");
})
onUnmounted(() => {
console.log("组件解绑在之后执行");
})
</script>
三、teleport
Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部,以构建一个组成应用程序 UI 的树。
然而,有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置
因此就有了teleport
<template>
<div>
<button @click="btn1">模态弹窗</button>
<teleport to="body">
//to属性:放到指定位置,比如这里就是指定放到body上
<div class="mask" v-show="flag">
<div class="box">
<h1>{{msg}}</h1>
</div>
<button @click="btn1">关闭</button>
</div>
</teleport>
</div>
</template>
四、属性 props
由于在Vue3.0中setup可以写作一个函数,也可以用语法糖作为script标签的属性,所以在3.0中取属性值也有两种方式:
父组件传值:
<Box :msg="n" :count=200></Box>
(1)setup函数中取属性值
<script>
export default {
pops:["msg","count"],// pops:{msg:String,count:Number},
setup(props){
let fn=()=>{console.log(props.msg,props.count)}//必须在组件中注册属性不然setup函数收不到数据
return {fn}
}
}
< /script>
(2) setup语法糖中获取属性值
<script setup>
import {defineProps} from "./Box.vue"
//注意Vue3.2之后不用引入可以直接使用
let obj=defineProps(["msg","count"])
let fn=()=>{console.log(obj.msg,obj.count)}
}
< /script>