Vue监听属性详细讲解

在 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 })
}

使用 $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 钩子或 $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 实例中监听路由变化，可以使用 $route/$watch 方法：

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

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

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