vue深度监听(监听对象和数组的改变)与立即执行监听实例

Vue.js 是一个非常流行的前端框架,它提供了很多方便的数据监听和响应式机制,其中包括深度监听和立即执行监听。下面将详细介绍这两种监听方式的用法和示例。

Vue 深度监听

Vue 的深度监听可以在属性改变时触发回调函数,包括对象和数组的改变。Vue 提供了 watch API 来实现深度监听,它可以监听一个对象的所有属性变化,同时也可以监听数组的变化。下面是一个示例:

const vm = new Vue({
  data: {
    person: {
      name: '张三',
      age: 20,
      address: {
        province: '北京',
        city: '北京市',
        district: '朝阳区'
      }
    },
    items: ['item1', 'item2', 'item3']
  },
  watch: {
    // 深度监听 person 对象中的属性变化
    'person': {
      handler(newVal, oldVal) {
        console.log('person 改变了:', newVal, oldVal)
      },
      deep: true
    },
    // 深度监听 items 数组的变化
    'items': {
      handler(newVal, oldVal) {
        console.log('items 改变了:', newVal, oldVal)
      },
      deep: true
    }
  }
})

vm.person.name = '李四' // 输出:person 改变了: { name: '李四', age: 20, address: { province: '北京', city: '北京市', district: '朝阳区' } } { name: '张三', age: 20, address: { province: '北京', city: '北京市', district: '朝阳区' } }
vm.person.address.city = '上海市' // 输出:person 改变了: { name: '李四', age: 20, address: { province: '北京', city: '上海市', district: '朝阳区' } } { name: '李四', age: 20, address: { province: '北京', city: '北京市', district: '朝阳区' } }
vm.items.push('item4') // 输出:items 改变了: [ 'item1', 'item2', 'item3', 'item4' ] [ 'item1', 'item2', 'item3' ]

在上面的示例中,我们使用 watch API 来监听 person 对象和 items 数组的变化,设置 deep: true 可以深度监听属性和数组元素的变化,从而触发回调函数。

立即执行监听实例

除了深度监听外,Vue 还提供了立即执行监听实例(即 immediate 参数),它可以在监听对象/数组时立即执行一次回调函数,并返回一个取消监听的函数。下面是一个示例:

const vm = new Vue({
  data: {
    count: 0
  },
  created() {
    const unwatch = this.$watch('count', (newVal, oldVal) => {
      console.log('count 变化了:', newVal, oldVal)
    }, {
      immediate: true // 立即执行回调函数
    })

    // 取消监听
    setTimeout(() => {
      unwatch()
    }, 5000)
  }
})

vm.count = 1 // 输出:count 变化了: 1 0
vm.count = 2 // 输出:count 变化了: 2 1
vm.count = 3 // 输出:count 变化了: 3 2

在上面的示例中,我们使用 $watch API 来监听 count 属性的变化,设置 immediate: true 可以在监听时立即执行一次回调函数,从而输出属性的初始值。此外,我们还调用了返回的取消监听函数 unwatch 来取消监听,该函数在 5 秒后执行。

可以看到,立即执行监听实例可以方便地实现一些需要在监听时立即执行的操作,同时也可以手动取消监听来节省系统资源。

总结:Vue 提供了强大的深度监听和立即执行监听实例,可以在处理对象/数组属性变化时非常方便。我们可以使用 watch API 来设置监听选项,使用 $watch API 来创建监听实例,并根据需要设置监听选项,以处理对象和数组的改变。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue深度监听(监听对象和数组的改变)与立即执行监听实例 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 关于Vue3&TypeScript的踩坑汇总

    关于Vue3&TypeScript的踩坑汇总 简介 Vue3是一款非常流行的JavaScript框架,提供了许多强大的功能和工具,使得开发复杂的前端应用程序变得更加容易。与此同时,TypeScript是一种强类型的JavaScript语言,它可以提供更好的可读性和可维护性,在Vue3的开发过程中也极其有用。但是,在使用Vue3和TypeScript的…

    Vue 2023年5月28日
    00
  • Vue import from省略后缀/加载文件夹的方法/实例详解

    Vue import from省略后缀/加载文件夹的方法/实例详解 Vue import from省略后缀 在Vue开发中,使用import语句将其他文件引入到当前文件中时,经常需要写上文件的后缀名。但是有时候我们希望可以省略后缀名,这时只需要在webpack的resolve配置中设置extensions选项即可。 // webpack.config.js …

    Vue 2023年5月28日
    00
  • vue项目的html如何引进public里面的js文件

    在Vue项目中,我们可以将静态资源(例如图片、样式表、JavaScript文件等)放在public文件夹中,然后在HTML中通过引入该文件夹中的文件来使用它们。以下是引入public文件夹中JavaScript文件的详细步骤: 1.将需要引入的JavaScript文件放在public文件夹中(例如,创建一个名为script.js的文件)。 2.在HTML模板…

    Vue 2023年5月28日
    00
  • 超级详细的Vue安装与配置教程

    超级详细的Vue安装与配置教程 安装Node.js 首先需要安装Node.js,可以在官网下载对应平台的安装包:https://nodejs.org/en/download/ 安装完成后,打开终端或命令行工具,输入以下命令来检查是否安装成功: node -v npm -v 如果能够成功输出版本号,说明Node.js已经安装成功。 安装Vue CLI Vue官…

    Vue 2023年5月27日
    00
  • vue 3.0 vue.config.js文件常用配置方式

    下面就是关于“vue 3.0 vue.config.js文件常用配置方式”的完整攻略。 1. vue.config.js文件是什么 在Vue 3.0及以上版本中,通常需要通过vue.config.js文件进行项目的相关配置,例如webpack、开发服务器、路径等等。vue.config.js是一个可选的配置文件,如果存在,那么它会被默认加载,在vue-cli…

    Vue 2023年5月28日
    00
  • Vue组件中的data必须是一个function的原因浅析

    Vue组件中的data必须是一个function的原因主要是因为Javascript中的对象和数组都是引用类型,如果直接把这些引用类型数据直接赋给组件实例的data属性,那么修改其中一个组件实例的数据时,会影响其它实例的数据。使用函数返回一个新对象可以确保每个组件实例都有自己独立的数据。 以下是两个示例: 示例1 <template> <d…

    Vue 2023年5月28日
    00
  • vue中,在本地缓存中读写数据的方法

    在 Vue 中,在本地缓存中读写数据可以使用 HTML5 中提供的 localStorage 和 sessionStorage两种方式。下面将详细讲解这两种方式的使用方法。 localStorage localStorage 提供了一种比 Cookie 更优秀的存储方式,存储的数据大小限制为 5MB 左右。下面是从本地缓存中读写数据的示例代码: // 写入数…

    Vue 2023年5月27日
    00
  • webpack4+Vue搭建自己的Vue-cli项目过程分享

    下面我就来详细讲解“webpack4+Vue搭建自己的Vue-cli项目过程分享”的完整攻略。 1. 创建Vue项目 使用Vue-cli可快速搭建Vue项目结构。首先,我们需要全局安装Vue-cli: npm install -g vue-cli 然后,运行以下命令来创建Vue项目: vue init webpack my-project cd my-pro…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部