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

最新推荐文章于 2024-06-04 20:26:31 发布

我有一棵树

最新推荐文章于 2024-06-04 20:26:31 发布

阅读量298

点赞数

分类专栏： vue 文章标签：学习

本文链接：https://blog.csdn.net/qq_17335549/article/details/126721463

版权

vue 专栏收录该内容

17 篇文章 23 订阅

订阅专栏

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

前言

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

一、基本知识

1. 计算属性 vs watch

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

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

可以得到oldvalue 和newvalue
可以在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.自己手写模态框

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

全屏的蒙版
模态框内容
关闭的按钮

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

<template>
  <!--OModal自定义组件-->
  <!--使用v-show展示隐藏，而不是v-if要不然每次都需要重新渲染-->
  <div class="mask" v-show="visible">
    <div class="modal-content">
      <!--关闭按钮-->
      <div class="close-btn" @click="$emit('update:visible', false)">x</div>
      内容
    </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>