Vue3学习

chen

 

 

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的常用实例¶

 

In [ ]:

///监听单个数据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函数

 

In [ ]:

<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的常用实例¶

 

In [ ]:

<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 基础示例¶

 

 

父组件

 

In [ ]:

<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>

 

 

子组件

 

In [ ]:

<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（文档对象模型），只把后续渲染需要的基础条件（数据、函数、参数等）提前准备好。而且只在组件首次挂载前执行，后续更新或者销毁不会再次触发。示例如下

 

In [ ]:

<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最基础也最常用的作用。如下简单示例

 

In [ ]:

<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>