vue3.0-watch侦听器

export default {
    name: 'MyWatch',
    data() {
        return {
            username: 'admin'
        }
    },
    // watch侦听器
    watch: {
        async username(newVal, oldVal) {
            console.log(newVal, oldVal);
            const {data:res} = await              axios.get('https://www.escook.cn/api/finduser/'+newVal)
             console.log(res);
         }
    }

3）immediate选项

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

import axios from 'axios'

export default {
    name: 'MyWatch',
    data() {
        return {
            username: 'admin'
        }
    },
    // watch侦听器
    watch: {
        // async username(newVal, oldVal) {
        //     console.log(newVal, oldVal);
        //     const {data:res} = await axios.get('https://www.escook.cn/api/finduser/'+newVal)
        //     console.log(res);
        // }
        // 立即被调用
        // 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
        } 
    }
}

结果为：

4）deep选项

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

5）监听对象单个属性的变化

如果指向监听对象中单个属性的变化，则可以按照如下的方式定义watch侦听器：

6）计算属性vs侦听器

计算属性和侦听器侧重的应用场景不同：

计算属性侧重于监听多个值的变化，最终计算并返回一个新值。

侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值。

2. 组件的生命周期

1）组件运行的过程

组件的生命周期指的是：组件从创建->运行（渲染）->销毁的整个过程，强调的是一个时间段。

2）如何监听组件的不同时刻

vue框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组建的运行而自动调用。

当组件在内存中被创建完毕之后，会自动调用created函数
当组件被成功的渲染到页面上之后，会自动调用mounted函数
当组件被销毁完毕之后，会自动调用unmounted函数

    created() {
        console.log('created:组件被创建完毕之后');
    },   
        // 2.组件第一次渲染到页面上
    mounted() {
        console.log('mounted:组件第一次渲染到页面上');
    },
        // 3.组件被销毁完毕之后
    unmounted() {
        console.log('unmounted:组件被销毁完毕之后');
    }

3）如何监听组件的更新

当组件的data数据更新之后，vue会自动重新渲染组件的DOM结构，从而保证View视图展示的数据和Model数据源保持一致。

当组件被重新渲染完毕之后，会自动调用updated生命周期函数。

4）组件中主要的生命周期函数

5）组件中全部的生命周期函数

3. 组件之间的数据共享

1）组件之间的关系

父子关系
兄弟关系
后代关系

2）父子组件之间的数据共享

父->子共享数据
子->父共享数据
父<->子双向数据同步

①父->子共享数据

父组件通过v-bind属性绑定向子组件共享数据。同时，子组件需要使用props接收数据。

②子->父共享数据

子组件通过自定义事件的方式向父组件共享数据。

③父<->子双向数据同步

父组件在使用子组件期间，可以使用v-model指令维护组件内外数据的双向同步：

3）兄弟之间的数据共享

兄弟组件之间实现数据共享的方案是EventBus。可以借助于第三方包的mitt来创建EventBus对象，从而实现兄弟组件之间的数据共享。

①安装mitt依赖包

npm install mitt@2.1.0 -S

②创建公共的eventBus模块

在项目中创建公共的eventBus模块如下：

③在数据接收方自定义事件

在数据接收方，调用bus.on('事件名称',事件处理函数)方法注册一个自定义事件。

④在数据发送方触发事件

在数据发送方，调用bus.emit('事件名称',事件处理函数)方法触发自定义事件。

4）后代关系组件之间的数据共享

后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据，此时组件之间的嵌套关系比较复杂，可以使用provide和inject实现后代关系组件之间的数据共享。

①父节点通过provide共享数据

父节点的组件可以通过provide方法，对其子孙组件共享数据：

②子孙结点通过inject接收数据

子孙结点可以使用inject数组，接收父级节点向下共享的数据。

③父节点对外共享响应式的数据

父节点使用provide向下共享数据时，可以结合computed函数向下共享响应式的数据。

④子孙结点使用响应式的数据

如果父级节点共享的是响应式的数据，则子孙结点必须以.value的形式进行使用。

5）vuex

vuex是终极的组件之间的数据共享方案。在企业级的vue项目开发中，vuex可以让组件之间的数据共享变得高效、清晰并且易于维护。

4. vue3.x中全局配置axios

1）为什么要全局配置axios

在实际项目开发中，几乎每个组件中都会用到axios发起数据请求。此时会遇到如下两个问题：

每个组件中都需要导入axios（代码臃肿）
每次发请求到需要填写完整的请求路径（不利于后期的维护）

2）如何全局配置axios

在main.js入口文件中，通过app.config.globalProperties全局挂载axios，示例代码如下：

axios.defaults.baseURL = 'https://www.escook.cn'
app.config.globalProperties.$http = axios

  methods: {
    async getInfo() {
      const { data : res} = await this.$http.get('/api/get', {
        params: {
          name: 'ls',
          age: 20
        }
      })
      console.log(res);
    }
  }

methods: {
    async postInfo() {
      const { data : res} = await this.$http.post('/api/post',{name: 'zs', age: 18})
      console.log(res);
    }
  }

qq_52822043

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
vue3.0-watch侦听器

目录1. watch侦听器1）watch侦听器2）watch侦听器的基本语法3）immediate选项4）deep选项5）监听对象单个属性的变化6）计算属性vs侦听器2. 组件的生命周期1）组件运行的过程2）如何监听组件的不同时刻3）如何监听组件的更新4）组件中主要的生命周期函数5）组件中全部的生命周期函数3. 组件之间的数据共享1）组件之间的关系2）父子组件之间的数据共享①父->子共享数据②子->父共享数据③父&...
复制链接

扫一扫