Vue监听属性详细讲解

妖狐艹你老母 2024-03-22 14:21 53阅读 0赞

#### 文章目录 ####

*  定义要监听的属性
 *  定义 watch
 *  修改监听的属性值
 *  监听数组变化
 *  监听对象变化
 *  监听计算属性变化
 *  监听事件变化
 *  监听路由变化

在 Vue 中，可以使用 watch/$watch 方法监听数据、计算属性、事件和路由的变化，从而实现数据绑定、事件监听和路由控制等功能。需要根据实际情况选择合适的监听方式，避免过度监听或监听不必要的属性，从而提高应用性能和用户体验。

## 定义要监听的属性 ##

定义要监听的属性： “message” 初始值设置为 “Hello, Vue!”

data() {
        
      return {
        
        message: 'Hello, Vue!'
      }
    }

## 定义 watch ##

下面例子中，定义了一个名为 “message” 的 watch 属性，它监听 “message” 属性的变化，并在变化时输出变化前后的值

watch: {
        
      message(newValue, oldValue) {
        
        console.log('message changed from', oldValue, 'to', newValue)
      }
    }

## 修改监听的属性值 ##

将 “message” 属性的值从 “Hello, Vue!” 修改为 “Hello, World!”  
由于我们已经在 watch 属性中定义了监听函数，因此在属性值发生变化时，watch 函数会被调用，并输出变化前后的值

this.message = 'Hello, World!'

watch 函数的参数包括 newValue 和 oldValue，分别表示属性的新值和旧值  
在 watch 函数中，可以根据这些参数来执行相应的操作，例如发送网络请求、更新视图等

除了监听单个属性之外，Vue 还支持监听多个属性和深度监听属性的变化  
可以通过设置 watch 属性中的深度监听选项和 immediate 选项来实现这些功能

watch: {
        
      // 监听多个属性
      'message': function (newValue, oldValue) {
         /* ... */ },
      'firstName': function (newValue, oldValue) {
         /* ... */ },
      'lastName': function (newValue, oldValue) {
         /* ... */ },
    
      // 深度监听属性
      'user.profile': {
        
        handler: function (newValue, oldValue) {
         /* ... */ },
        deep: true
      },
    
      // 立即调用监听函数
      'message': {
        
        handler: function (newValue, oldValue) {
         /* ... */ },
        immediate: true
      }
    }

## 监听数组变化 ##

要监听数组变化，可以使用 watch 或 $watch 方法。

data() {
        
      return {
        
        items: [1, 2, 3]
      }
    }

使用 watch 方法监听数组变化：  
当数组发生变化时，watch 函数会被调用，并输出变化前后的值

watch: {
        
      items: function (newValue, oldValue) {
        
        console.log('items changed from', oldValue, 'to', newValue)
      }
    }

需要注意的是，watch 只能监听到数组的长度变化和 $set 方法的调用，无法监听到数组元素的变化  
如果需要监听数组元素的变化，可以使用 Vue 提供的 $watch 方法。例如：

created() {
        
      this.$watch('items', function (newValue, oldValue) {
        
        console.log('items changed from', oldValue, 'to', newValue)
      }, {
         deep: true })
    }

使用  w a t c h 方法监听数组的变化，并设置深度监听选项由于数组的元素也是响应式的，因此当数组元素发生变化时， watch 方法监听数组的变化，并设置深度监听选项 由于数组的元素也是响应式的，因此当数组元素发生变化时， watch方法监听数组的变化，并设置深度监听选项由于数组的元素也是响应式的，因此当数组元素发生变化时，watch 函数也会被调用

## 监听对象变化 ##

除了数组，Vue 中的对象也是响应式的，可以使用 watch 或 $watch 方法来监听对象的变化

data() {
        
      return {
        
        user: {
        
          name: 'Tom',
          age: 18
        }
      }
    }

我们可以使用 watch 方法监听对象变化：

watch: {
        
      'user.name': function (newValue, oldValue) {
        
        console.log('user.name changed from', oldValue, 'to', newValue)
      },
      'user.age': function (newValue, oldValue) {
        
        console.log('user.age changed from', oldValue, 'to', newValue)
      }
    }

如果对象的属性是动态添加的，那么 watch 方法可能无法监听到该属性的变化  
这时可以使用 $watch 方法来实现动态属性的监听。例如：

created() {
        
      this.$watch('user', function (newValue, oldValue) {
        
        console.log('user changed from', oldValue, 'to', newValue)
      }, {
         deep: true })
    }

## 监听计算属性变化 ##

计算属性是一种特殊的属性，它的值是根据其他属性计算得出的

computed: {
        
      fullName() {
        
        return this.firstName + ' ' + this.lastName
      }
    }

计算属性的值是根据其他属性计算得出的，因此如果监听的属性发生变化，计算属性的值也会发生变化，从而触发 watch 函数的调用  
如果不需要监听属性的变化，可以使用 computed 属性来定义普通的计算属性，而不是监听计算属性

watch: {
        
      fullName: function (newValue, oldValue) {
        
        console.log('fullName changed from', oldValue, 'to', newValue)
      }
    }

## 监听事件变化 ##

组件可以通过 $emit 方法触发自定义事件，如果要监听事件的变化  
可以使用 $on 方法。  
定义一个名为 “my-event” 的自定义事件，并在方法中使用 $emit 方法触发事件，并传递参数 “hello”

<template>
      <button @click="onClick">Click me</button>
    </template>
    
    <script>
    export default {
        
      methods: {
        
        onClick() {
        
          this.$emit('my-event', 'hello')
        }
      }
    }
    </script>

在父组件中使用 $on 方法监听自定义事件：

<template>
      <div>
        <my-component @my-event="onEvent"></my-component>
      </div>
    </template>
    
    <script>
    import MyComponent from './MyComponent.vue'
    
    export default {
        
      components: {
         MyComponent },
      methods: {
        
        onEvent(value) {
        
          console.log('event value:', value)
        }
      }
    }
    </script>

我们在父组件中使用 @my-event 属性监听自定义事件，并在方法中输出事件参数的值  
当子组件触发自定义事件时，父组件的方法会被调用，并输出事件参数的值

需要注意的是，$on 方法只能在组件实例中使用，无法在 Vue 实例中使用。  
如果需要在 Vue 实例中监听事件，可以使用 $emit 方法触发事件，并在 Vue 实例中使用 $on 方法监听事件。

## 监听路由变化 ##

路由是一种控制页面跳转的机制，如果要监听路由的变化，可以使用 beforeRouteUpdate 钩子或  r o u t e / route/ route/watch 方法

const routes = [
      {
        
        path: '/',
        component: Home
      },
      {
        
        path: '/about',
        component: About  
      }
    ]

定义了两个路由：“/” 和 “/about”。可以使用 beforeRouteUpdate 钩子监听路由变化：

export default {
        
      beforeRouteUpdate(to, from, next) {
        
        console.log('route changed from', from.path, 'to', to.path)
        next()
      }
    }

在组件中使用 beforeRouteUpdate 钩子，监听路由变化，并在控制台输出变化前后的路由路径  
需要注意的是，beforeRouteUpdate 钩子只能在路由对应的组件中使用

如果需要在 Vue 实例中监听路由变化，可以使用  r o u t e / route/ route/watch 方法：

export default {
        
      created() {
        
        this.$watch('$route', (to, from) => {
        
          console.log('route changed from', from.path, 'to', to.path)
        })
      }
    }

在 Vue 实例中使用 $watch 方法，监听 $route 属性的变化，并在控制台输出变化前后的路由路径

需要注意的是， r o u t e / route/ route/watch 方法只能在 Vue 实例中使用，无法在路由对应的组件中使用。如果需要在路由对应的组件中监听路由变化，可以使用 beforeRouteUpdate 钩子