详解Vue中watch的高级用法

让我们通过一个简单的实例来展示Vue中watch的高级用法。想象一下以下的场景：

```html

```

在Vue实例中，我们绑定了firstName数据项，并在watch中设置了对它的监听。

```javascript

new Vue({

el: 'root',

data: {

firstName: 'Dawei',

lastName: 'Lou',

fullName: ''

},

watch: {

firstName(newName, oldName) {

this.fullName = newName + ' ' + this.lastName; // 当firstName变化时，更新fullName的值。

}

}

})

```

watch的神奇之处在于，它能在数据变化时触发特定的操作。在这个例子中，每当firstName改变时，都会触发watch中的函数，从而更新fullName的值。

除了基本的用法，watch还提供了handler方法和immediate属性。有时我们希望在绑定时就立即执行监听操作，而不是等到数据实际变化时才执行。这时，我们可以使用immediate属性。修改后的代码如下：

```javascript

watch: {

firstName: {

handler(newName, oldName) { // handler方法用于定义当数据变化时应该执行的逻辑。

this.fullName = newName + ' ' + this.lastName;

},

immediate: true // 设置immediate为true，表示在声明后立即执行handler方法。

}

}

``` 注意到这里的handler方法了吗？我们给firstName绑定了一个处理函数。而在Vue中，我们可以直接使用handler方法作为监听函数。immediate属性则表示在声明后立即执行这个监听函数。这样我们就能实现初始绑定时的立即响应。接下来让我们再看看另一个强大的属性：deep属性。它可以帮助我们实现监听。在Vue中，当我们需要监听一个对象的内部属性变化时，就需要用到这个属性了。假设我们有一个名为obj的对象属性：```html

```在默认情况下，watch只能监听到obj这个属性的引用变化，而不能监听到其内部属性的变化。因此我们需要使用deep属性来实现监听。修改后的代码如下： ```javascript new Vue({ el: 'root', data: { obj: { a: 123 } }, watch: { obj: { handler(newName, oldName) { console.log('obj的属性发生了变化'); }, immediate: true, deep: true } } }) ```现在当我们在输入框中输入数据并改变obj.a的值时，我们的handler方法就会被触发并执行相应的操作了。这就是Vue中watch的高级用法，它可以让我们更灵活地响应数据的变化并处理相应的逻辑。希望这个例子能帮助你更好地理解Vue中的watch机制！在Vue.js中，监听数据变化是一项重要的功能。当我们需要响应某个对象属性的变化时，我们可以使用`watch`属性来设置监听器。其中的`deep`选项起着至关重要的作用。

原先的写法是这样的：

```javascript

watch: {

obj: {

handler(newName, oldName) {

console.log('obj changed');

},

immediate: true,

deep: true

}

}

```

这里的`deep`选项意味着深入观察。当设置为`true`时，监听器会遍历对象的所有属性，并为每一个属性都添加监听。这意味着任何对`obj`内部属性的修改都会触发监听器中的处理函数，这无疑增加了性能开销。

为了优化性能，我们可以选择性地监听对象的某个属性，而不是整个对象。比如，我们只需要监听`obj.a`这个属性，可以这样写：

```javascript

watch: {

'obj.a': {

handler(newName, oldName) {

console.log('obj.a changed');

},

immediate: true

}

}

```

这样，Vue.js会一层一层地下去，直到找到属性`a`，然后只为这个属性设置监听函数。这样做的好处是，只有当`obj.a`发生变化时，才会触发监听函数，从而减少了性能开销。其他属性的变化不会影响到这个监听器。这种有针对性的监听方式更加灵活且高效。在实际开发中，根据需求选择合适的数据监听方式是非常重要的。这样既能保证数据的实时响应，又能避免不必要的性能损耗。在这个例子中，我们使用了`cambrian.render('body')`来渲染页面主体部分，确保了视图与数据的同步更新。