17_Vue高级监听器&生命周期&Vue组件&组件通信

1. 数据监听器watch

• 首先watch需要单独引

import {watch} from 'vue'

• watch函数监听ref响应式数据
  • watch(监听的内容，监听行为)
  • 监听行为默认为(newValue,oldValue)

let firstname = ref("")

watch(firstname,(newValue,oldValue)=>{
    console.log(`${oldValue}变为${newValue}`)
})

• watch监听reactivate响应式数据

// watch监听reactive
watch(()=>lastname.name,(newValue,oldValue)=>{
  console.log(`${oldValue}=>${newValue}`)
})

• watchEffect()监听所有响应式数据
• 最好用的一种监听

let fullname = ref("")
let firstname = ref("")
let lastname = reactive({
    name:""
})
watchEffect(
    ()=>{
        console.log(firstname.value)
        console.log(lastname.name)
    }
)

监听数据小结：

• html标签中写插值表达式显示最终的内容

• 需要绑定的表单数据需要进行双向绑定v-model

• script标签中只需要进行写监听函数即可

• 最好用的监听函数watchEffect

2. Vue生命周期

• 按以往Servlet的经验，Vue生命周期就是了解Vue执行哪几个任务，其生命流程

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码!

• 周期图解：

• 常见钩子函数

  • onMounted() 注册一个回调函数，在组件挂载完成后执行。

  • onUpdated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

  • onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用。

  • onBeforeMount() 注册一个钩子，在组件被挂载之前被调用。

  • onBeforeUpdate() 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

  • onBeforeUnmount() 注册一个钩子，在组件实例被卸载之前调用。

  • beforeCreate和created中间完成一些响应式数据，计算数学，方法和监听器

生命周期案例

<script setup>

    import {ref,onUpdated,onMounted,onBeforeUpdate} from 'vue'
    
    let message =ref('hello')
   
    // 挂载完毕生命周期
    onMounted(()=>{
      console.log('-----------onMounted---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新前生命周期
    onBeforeUpdate(()=>{
      console.log('-----------onBeforeUpdate---------')
      console.log(message.value)
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新完成生命周期
    onUpdated(()=>{
      console.log('-----------onUpdated---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
</script>

<template>
  <div>
    <span id="span1" v-text="message"></span> <br>
    <input type="text" v-model="message">
  </div>
  
</template>

<style scoped>
</style>

3. Vue组件

• 组件化就是一个页面由不同的组件构成，组件与组件之间也可以进行数据通信；

• 如上图所示App.vue需要引入compoents中的三个组件，使其能够协调活动；

  • 1.首先导入模块

  • /** 引入多个vue组件 */
    import Header from './components/Header.vue'
    import Navigator from './components/Navigator.vue'
    import Content from './components/Content.vue'
    

  • 2.其次将多个模块写入到div下

    

  • 必须是div否则报错

  • 3.加上属性

  

4. Vue组件通信

• 组件传值的几种方式

  • 1.子传父
  • 2.父传子
  • 3.兄弟传参

• 组件传参组件之间必须直接或间接存在父子关系

• 案例演示 子组件向父组件传递信息

  • 导入defineEmits,用于定义向父组件提交数据的事件以及正式的提交数据
  • 定义向父组件提交的事件
  • 上一步需要设置返回值，用emits方法进行接收
  • 定义提交数据的方法

• 小结：

1.子向父传参使用defineEmits函数
2.传递信息以列表形式
3.defineEmits使用emits接收，
4.一般是click触发传参，传入后台

• 案例演示 子组件接收父组件信息

  • 1.导入denfineProps

  • 2.使用defineProps接收父组件传递的参数

  • 3.特别注意第二点，defineProps必须接收json串的形式；

  

• 小结

1.接收父类消息使用defineProps

2.defineProps包json串

3.defineProps里面定义接收的量和父类传递的变量名保持一致；传递过来的参数直接拿着使用即可

Appendix

• 关于JS和TS选择

TS是JS的一个超集,使用TS之后,JS的语法更加的像JAVA,实际开发中用的确实更多,那么这里为什么我们没有立即使用TS进行开发,原因如下

• 响应式数据&&非响应式数据

• 响应数据：在数据变化时候，dom树跟着更新

• 非响应数据：在数据变化的时候，dom树不跟着变化

• vue3中，数据需要通过ref/reactive函数的处理才是响应式的；

• ref/reactive函数导入就能用，vue自带；

 import {ref,reactive} from 'vue'

• ref函数的特征

  • 在script标签中，操作ref 的响应式数据需要通过.value的形式操作
  • 在template标签中，操作ref直接用即可

• .vue模块是放到index文件的一个原材料

• main.js删除了会影响页面显示

• button标签没有value值，直接在标签中写值即可

• 导入ref还非得加{}，否则无法使用

import {ref} from  'vue'

• 关于html样式设计；两个div块进行并排，使用浮动操作，宽度使用% 别用像素进行处理即可；

• @click或@sendMenu的值应该是一个JavaScript表达式，它定义了当事件发生时应该执行的函数。所以调用函数时候不带括号；