Vue2.0用 watch 观察 prop 变化(不触发)

深入Vue 2.0的世界：用Watch巧妙观察Prop变化而不触发额外动作

在Vue开发中，我们经常需要观察数据的变化并据此做出响应。当涉及到父子组件间的数据传递时，你可能会遇到这样的情况：子组件的prop发生变化，但你并不想触发任何动作，只是想看看发生了什么。这时候，Vue的watch功能就派上用场了。本文将向你展示如何在Vue 2.0中使用watch来观察prop的变化而不触发额外的动作。

假设我们有一个名为A的组件，它接收一个名为name的prop和一个本地数据属性author。我们希望监视这两个属性的变化。在组件被挂载后，我们将author的值更改为"lili"。我们设置了一个watch来观察这两个属性的变化。代码如下：

A组件代码：

```javascript

export default {

props: {

name: {

type: String

}

},

data () {

return {

author: 'Jinkey' // 默认作者为Jinkey

}

},

mounted() {

this.author = 'lili'; // 在组件挂载后立即更改作者的值

},

watch: {

name: function() { // 当name变化时，这里会执行，但不会触发额外的动作

console.log(this.name); // 打印新的name值

},

author: function() { // 当author变化时，这里也会执行，但不会触发额外的动作

console.log('lili'); // 打印固定的消息"lili"

}

}

}

```

现在让我们看看如何在另一个组件B中使用A组件并传递name值。在B组件的模板中，我们使用绑定语法将name值传递给A组件。在B组件的脚本部分，我们定义了一个包含name数据的对象。当我们在B组件中更改name的值时，A组件中的watch会捕捉到这一变化，但不会触发任何额外的动作，只会打印新的值或消息。这是一个非常实用的功能，特别是在你只想了解数据何时变化而不想触发额外逻辑的情况下。希望这个例子能帮助你更好地理解Vue 2.0中如何使用watch来观察prop的变化而不触发额外的动作。同时也感谢你对狼蚁SEO的支持，我们会持续分享更多有关Vue和其他技术栈的实用知识和技巧。