Vue3-组件高级

最新推荐文章于 2024-07-11 23:19:38 发布

fusheng_cn

最新推荐文章于 2024-07-11 23:19:38 发布

阅读量165

点赞数

分类专栏：前端 Vue 文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/fusheng_cn/article/details/127224082

版权

本文详细介绍了Vue3中组件的高级特性，包括watch侦听器的使用，如基本语法、immediate和deep选项，以及组件的生命周期，如created、mounted、updated等关键阶段。此外，还探讨了组件间的数据共享策略，包括父子、兄弟及后代组件间的数据传递，以及Vuex在大型项目中的作用。最后，讲解了在Vue3.x中如何全局配置axios，解决请求路径重复和代码冗余的问题。

摘要由CSDN通过智能技术生成

一. watch 侦听器

1. 何为 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。

2. 侦听器的基本语法

开发者需要在 watch 节点下，定义自己的侦听器。实例代码如下：

export default {
  data() {
    return { username: '' }
},
watch: {
  // 形参列表中 第一个值为“变化之后得到的新值” 第二个值为“变化前的旧值”
  username(newVal, oldVal) {
    console.log(newVal, oldVal)
    },
  },
}

3. 使用 watch 检测用户名是否可用

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用，示例代码如下：

import axios from 'axios'
export default {
  data() {
    return { username: '' }
},
watch: {
  async username(newVal, oldVal) {
    const { data: res } = await axios.get('https://www.escook.cn/api/finduser/${newVal}')
    console.log(res)
    },
  },
}

4. immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。示例代码如下：

watch: {
  // 1. 监听 username 值的变化
  username: {
    // 2. handler 属性是固定写法：当 username 变化时，调用 handler
    async handler(newVal, oldVal) {
      const { data: res } = await axios.get('https://www.escook.cn/api/finduser/${newVal}')
      console.log(res)
    },
    // 3. 表示组件加载完毕后立即调用一次当前的 watch 侦听器
    immediate: true
  },
}

5. deep 选项

当 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项，代码示例如下：

  data() {
    return { 
      info: { username: 'admin' },
  }
},
watch: {
  info: {
  async handler(newVal, oldVal) {
    const { data: res } = await axios.get('https://www.escook.cn/api/finduser/${newVal.username}&