vue的watch用法

 

Vue.js是一套用于构建用户界面的渐进式JavaScript框架。它提供了许多方便开发的工具和特性，其中一个非常重要的特性是`watch`。

 

`watch`是Vue.js中一个用于监听和响应数据变化的功能。通过使用`watch`，我们可以在监视的数据发生变化时执行一些特定的操作。这个功能非常有用，因为它可以让我们在数据发生变化时自动更新相关的内容，而不需要手动编写大量的代码来实现这个功能。

 

在Vue.js中，我们可以在Vue实例中通过`watch`属性来定义一个`watcher`函数，这个函数会在被监视的数据发生变化时被触发。`watch`属性可以是一个对象，也可以是一个由多个属性组成的对象。

 

首先，我们来看一下`watch`属性的对象形式：

 

```javascript

watch: {

// 监视firstName属性的变化

firstName: function (newVal

oldVal) {

// 执行一些操作

}

 

// 监视lastName属性的变化

lastName: function (newVal

oldVal) {

// 执行一些操作

}

}

```

 

在这个例子中，我们定义了两个`watcher`函数，一个用于监视`firstName`属性的变化，另一个用于监视`lastName`属性的变化。这些函数接收两个参数，`newVal`表示新的属性值，`oldVal`表示旧的属性值。在这些`watcher`函数中，我们可以执行一些操作，例如更新其他数据、发送请求、调用方法等等。

 

除了对象形式，我们还可以使用数组形式的`watch`属性，这样我们可以同时监视多个属性的变化：

 

```javascript

watch: {

// 监视firstName和lastName属性的变化

['firstName'

'lastName']: function (newVal

oldVal) {

// 执行一些操作

}

}

```

 

使用数组形式的`watch`属性时，我们将要监视的属性放在数组中，并定义一个`watcher`函数来处理这些属性的变化。

 

除了观察简单的属性变化，Vue.js还提供了一种可以观察深层次对象的变化的方法，这就是使用`deep`选项。当我们设置`deep: true`时，Vue.js会递归地监听对象的所有属性，以实现对整个对象的观察。

 

```javascript

watch: {

// 监视person对象的变化

person: {

handler: function (newVal

oldVal) {

// 执行一些操作

}

 

deep: true

}

}

```

 

在这个例子中，我们使用`handler`选项指定了针对`person`属性变化时要执行的代码。同时，我们还设置了`deep`选项为`true`，表示要对`person`对象进行深层次的观察。

 

除了使用对象形式和数组形式来定义`watch`属性外，我们还可以使用计算属性来实现监视数据变化的功能。

 

```javascript

computed: {

fullName: function () {

// 计算fullName的值

return this.firstName + ' ' + this.lastName;

}

}

 

watch: {

// 监视fullName计算属性的变化

fullName: function (newVal

oldVal) {

// 执行一些操作

}

}

```

 

在这个例子中，我们通过定义一个计算属性`fullName`来实现对`firstName`和`lastName`属性的组合，然后使用`watch`属性来监视`fullName`计算属性的变化。

 

总结一下，`watch`是Vue.js中非常实用的功能之一，它可以让我们在数据发生变化时自动执行一些操作。我们可以通过对象形式、数组形式和计算属性来定义`watch`属性。无论是简单属性的变化，还是深层次对象的变化，通过使用`watch`功能，我们可以轻松地实现对数据变化的监听和响应。