Vue3学习
1 watch和watchEffect监听的使用¶
1.1 watch和atchEffect的区别¶
watch 的核心特性是需要监听源,简单说就是给它一个响应式的参数即可,它不能自动识别依赖。 例如 要监听 count(ref 数据),就直接写 watch(count, ...); 要监听 user.age(对象属性),就写 watch(() => user.age, ...); 要监听多个数据,就传数组 watch([a, b], ...)。 watchEffect 的核心特性是可以自动收集响应式的参数 不用手动指定要哪个响应式数据(比如 count、user.age),只要在 watchEffect 的回调函数里用到了某个响应式数据,Vue 会自动追踪这个数据。 举个通俗例子: 回调里写了 console.log(count.value + user.age),Vue 会自动识别 count 和 user.age 是依赖,不管是 count 变、还是 user.age 变,都可以触发函数回调,
1.2 watch的常用实例¶
///监听单个数据ref的时候
<template>
<p>计数器: {{ count }}</p>
<button @click="count">增加</button>
</template>
<script setup>
import{ ref, watch } from'vue'
const count = ref(0)
// 监听count,获取新旧值
watch(count, (newVal, oldVal) => {
console.log(`count从${oldVal}变为${newVal}`)
})
</script>
而当我们需要监听单个属性就需要用到getter函数
<script setup>
import{ reactive, watch } from'vue'
const user = reactive({
name: '张三',
age: 20
})
// 监听user.age的变化
watch(
() => user.age,
(newAge, oldAge) => {
console.log(`年龄从${oldAge}变为${newAge}`)
}
)
</script>
1.3 watchEffect的常用实例¶
<template>
<p>计数器: {{ count }}</p>
<button @click="count++">增加</button>
</template>
<script setup>
import{ ref, watchEffect } from'vue'
const count = ref(0)
// 自动监听count,初始化立即执行
watchEffect(() => { //与watch对比没有输入响应式数据
console.log(`count当前值是: ${count.value}`)
})
</script>
2 Props传递数据¶
2.1 Props的使用方法¶
一.Props有严格的阶级,跟印度的五大阶级差不多,父组件的数据会更新到子组件里面,但子组件想要修改数据,就必须要父组件同意,就是要在父组件改才行. 二.子组件必须要声明接受父组件Props 三.父组件都是通过属性绑定(v-bind)传递给子组件
2.2 基础示例¶
父组件
<template>
<Child title="我是静态标题" />
//用的v-bind简写成":"
<Child
:msg="parentMsg"
:user="parentUser"
/>
</template>
<script setup>
import{ ref, reactive } from'vue'
importChild from'./Child.vue'
// 父组件的响应式数据
const parentMsg = ref('父组件的动态消息')
const parentUser = reactive({ name: '张三', age: 20 })
</script>
子组件
<template>
<div>
<h3>{{ title }}</h3>
<p>动态消息:{{ msg }}</p>
<p>用户信息:{{ user.name }},{{ user.age }}岁</p>
</div>
</template>
<script setup>
// 声明接收的Props
const props = defineProps({
title: String,
msg: String,
user: Object
})
</script>
3 API里面的生命周期函数¶
我个人感觉这个是比较难的,每个有每个的用法,使用场景也有很多,目前展示浅学的几个
3.1 onBeforeMount函数¶
这个函数的作用是:为组件首次渲染做 “纯数据逻辑层面的前置准备”,不碰 DOM(文档对象模型),只把后续渲染需要的基础条件(数据、函数、参数等)提前准备好。而且只在组件首次挂载前执行,后续更新或者销毁不会再次触发。示例如下
<script setup>
import{ ref, onBeforeMount } from'vue'
const list = ref([])
onBeforeMount(() => {
// 1. 预处理数据,不要DOM
list.value = [1, 2, 3].map(item => `预处理项${item}`)
// 2. 定义后续需要的变量
console.log('组件即将挂载,此时DOM不存在')
})
</script>
总结说onBeforeMount可以让组件挂载后的逻辑更简洁、无延迟。
3.2 onMounted函数¶
onMounted函数与onBeforeMount最直白的区别就是,onBeforeMount不碰DOM,而onMounted碰DOM 所以 onMounted 是开发中常用的生命周期函数
3.3 onMounted 的介绍¶
可以一句话概括:在组件 DOM 挂载到页面后,执行所有依赖 DOM 的初始化逻辑 组件挂载后,模板里的标签已转化为页面上的真实 DOM 节点,此时可安全获取 DOM 尺寸、修改样式、绑定原生事件等 这是onMounted最基础也最常用的作用。如下简单示例
<template>
<div ref="container" class="box">内容</div>
</template>
<script setup>
import{ ref, onMounted } from'vue'
const container = ref(null)
onMounted(() => {
// 获取DOM宽高
console.log('容器高度:', container.value.clientHeight)
// 给DOM绑定原生点击事件
container.value.addEventListener('click', () => alert('点击了容器'))
})
</script>

浙公网安备 33010602011771号