【vue3】12.跟着官网学习vue3-侦听器，watch方法

每日鸡汤：你继续堕落下去的话，你的天赋将全部被收走，那些原本比你差的人也会一个个的努力超过你

目录

前言

一、基本知识

1. 计算属性 vs watch

2. watchEffect

二、用watch实现模态框组件

1.自己手写模态框

2.封装组件

总结

---

前言

本篇文章对应官网【侦听器】

---

一、基本知识

1. 计算属性 vs watch

关于计算属性和它的基本应用场景我们已经学过，请看我的这篇文章

【vue3】05. 跟着官网学习vue3-计算属性，computed_我有一棵树的博客-CSDN博客跟着官网学习vue3。计算属性的应用场景https://blog.csdn.net/qq_17335549/article/details/126669092同样是可以监控到响应式依赖的变化，watch侦听器的好处是

1. 可以得到oldvalue 和newvalue
2. 可以在watch函数中执行异步操作（如接口请求等）

题外话？为什么computed计算属性中不能写也不操作？

其实不是不能写，你可以写，想写就写，也不会报错，但是没有意义，因为计算出来的属性一般我们是要渲染到模版上的，但是如果是异步请求的话，接口还没返回，计算出来的值就是undefined，也不能用async await 没意义。

2. watchEffect

这个在vue2中是没有的，它的特点是立即执行，而watch是懒执行的，watch只有当依赖的数据发生变化的是后才执行，watchEffect在每次重新加载页面都会执行。我在我的这篇文章有提到过【vue3】04. 跟着官网学习vue3-响应式基础_我有一棵树的博客-CSDN博客跟着官网学习vue3 响应式原理https://blog.csdn.net/qq_17335549/article/details/126638066

二、用watch实现模态框组件

模态框是啥，就是一个弹出框，一个对话框，同样写两种类型，一种是自己实现，一种是二次封装组件库and-design-vue的modal组件

1.自己手写模态框

明确需求：一个模态框，必要的元素有

1. 全屏的蒙版
2. 模态框内容
3. 关闭的按钮

其他的都可以忽略（温馨提示能不自己实现就不要自己实现，自己造的轮子有很多问题，用现成的组件库就好）

<template>
  
  
  <div class="mask" v-show="visible">
    <div class="modal-content">
      
      <div class="close-btn" @click="$emit('update:visible', false)">xdiv>
      内容
    div>
  div>
template>
<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue';
const props = defineProps({
  visible: Boolean,
});
const emits = defineEmits(['update:visible']);
script>
<style lang="scss">
.mask {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0;
  top: 0;
 
  .modal-content {
    margin: 100px auto;
    height: 300px;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: relative;
    .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      border: 1px solid;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
style>

<template>
  <o-modal v-model:visible="showModal">o-modal>
  <div @click="showModal = true">点击打开对话框div>
template>
<script lang="ts" setup>
import { ref } from 'vue';
import OModal from './component/OModal.vue';
 
const showModal = ref(false);
script>
<style>
#app {
}
style>

2.封装组件

一个道理，可以二次封装。

但是，如果把组件再次封装成MyOModal，有的时候有eslint会报错 ，就是不可以修改props的值

（1）这个时候在MyOModal组建中使用computed属性计算即可

（2）或者可以使用watch

 总之，条条大路通罗马，之前我一直用watch，现在觉得computed会更加方便和简洁明了。

---

总结

希望这几个简单的例子，对你有帮助，如果没有帮助，抱歉打扰你宝贵时间啦。