vue.js中$watch的用法示例

下面是关于"vue.js中$watch的用法示例"的完整攻略：

1. 什么是$watch

在Vue.js中，我们经常需要使用到响应式数据，$watch是Vue.js提供的一个侦听器，用来监听某个数据项的变化，一旦该数据项发生变化，$watch负责触发回调函数，执行相应的操作。

2. $watch的基本用法

在Vue.js中，我们可以使用vm.$watch方法创建一个侦听器。其中，vm是Vue对象的实例。

基本语法：

vm.$watch('数据项名称', function(newValue, oldValue) {
    //newValue: 表示数据项变化后的新值
    //oldValue: 表示数据项变化前的旧值
});

例如，创建一个名为msg的数据项，使用$watch方法监听该数据项的变化，并打印出变化前后的值：

<div id="app">
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
</div>

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello World'
    }
});

vm.$watch('msg', function(newValue, oldValue) {
    console.log("msg数据项的值从" + oldValue + "变为" + newValue);
});

运行上述代码，控制台将会输出：

msg数据项的值从Hello World变为Hello
msg数据项的值从Hello变为Hello World

3. $watch的高级用法

除了基本用法之外，$watch还支持更加高级的操作，例如：深度侦听、立即触发回调函数、取消侦听等。

3.1 深度侦听

我们知道，在JavaScript中，对象实际上是一个引用类型，当我们使用对象或数组作为数据项时，如果直接对对象或数组的某个元素进行修改，则并不会触发$watch方法的回调函数。因此，在这种情况下，我们需要使用深度侦听。

基本语法：

vm.$watch('数据项名称', function(newValue, oldValue) {
    //newValue: 表示数据项变化后的新值
    //oldValue: 表示数据项变化前的旧值
}, {
    deep: true //表示启用深度侦听
});

例如，创建一个todoList的数据项，使用$watch方法监听该数据项的变化，并打印出变化前后的值：

<div id="app">
    <ul>
        <li v-for="item in todoList">{{item}}</li>
    </ul>
    <input type="text" v-model="newItem">
    <button @click="add()">添加</button>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        todoList: ['item1', 'item2', 'item3'],
        newItem: ''
    },
    methods: {
        add: function() {
            if (this.newItem) {
                this.todoList.push(this.newItem);
                this.newItem = '';
            }
        }
    }
});

vm.$watch('todoList', function(newValue, oldValue) {
    console.log("todoList数据项的值从" + oldValue + "变为" + newValue);
}, {
    deep: true
});

运行上述代码，我们可以看到，当我们在输入框中输入新的任务时，$watch方法的回调函数将会被触发。

3.2 立即触发回调函数

默认情况下，$watch方法的回调函数将会在数据项发生变化后才会被触发。但是，有时我们可能需要在侦听器初始化时就立即触发一次回调函数，这时我们可以使用immediate参数。

基本语法：

vm.$watch('数据项名称', function(newValue, oldValue) {
    //newValue: 表示数据项变化后的新值
    //oldValue: 表示数据项变化前的旧值
}, {
    immediate: true //表示启用立即触发回调函数
});

例如，创建一个msg的数据项，使用$watch方法监听该数据项的变化，并在侦听器初始化时就立即触发回调函数：

<div id="app">
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
</div>

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello World'
    }
});

vm.$watch('msg', function(newValue, oldValue) {
    console.log("msg数据项的值从" + oldValue + "变为" + newValue);
}, {
    immediate: true
});

运行上述代码，控制台将会输出：

msg数据项的值从Hello World变为Hello World

3.3 取消侦听

在Vue.js中，取消侦听器非常容易，我们只需要在返回值上调用$watch方法即可。

例如，创建一个msg的数据项，使用$watch方法监听该数据项的变化，并取消侦听器：

<div id="app">
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
</div>

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello World'
    }
});

var unwatch = vm.$watch('msg', function(newValue, oldValue) {
    console.log("msg数据项的值从" + oldValue + "变为" + newValue);
});

unwatch(); //取消侦听器

以上就是关于"vue.js中$watch的用法示例"的详细攻略，希望能对你有所帮助。