Vue.js 观察者(watch)

时间 2019-11-17

标签 vue.js vue 观察者 watch 栏目 JavaScript 繁體版

原文原文链接

Vue.js 观察者(watch)

watch 属性用于监视 vue 实例上的数据变更，并相应的改变其余变量的值。css

用法

实例 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js 观察者(watch)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <title>Vue.js 观察者(watch)</title>
    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
            <input type="text" v-model="firstName"/>
            <input type="text" v-model="lastName"/>
            <p>个人名字是：{{fullName}}</p>
        </div>

    <script>
       var em = new Vue({
            el: '#app',
            data: {
                firstName: 'stephen',
                lastName: 'curry',
                fullName: 'stephen curry'
            },
            watch: {
                firstName: function (curVal, oldVal) {
                    this.fullName = curVal + ' ' + this.lastName
                },
                lastName: function (curVal, oldVal) {
                    this.fullName = this.firstName + ' ' + curVal
                }
            }
        })
    </script>
</body>
</html>

上述代码中，监视了firstName和lastName这两个变量，当用户输入新的数据改变其值时，watch就会执行对应的函数，返回处理后的值并赋值给fullName变量。html

注释：curVal 表示当前数据，oldVal 表示前一步数据（或默认数据），可参考实例2的代码。vue

实例 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js 观察者(watch)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <title>Vue.js 观察者(watch)</title>
    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="number"/>
        <p>result：{{result}}</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                number: 1,
                result: 1
            },
            watch: {
                number: function(curVal, oldVal) {
                    this.result = curVal*1 + oldVal*1
                }
            }
        })
    </script>
</body>
</html>

上述代码中，result 结果为当前输入数据和前一步数据之和。另外，oldVal 参数可缺省。web

注意：当监视的数据是一个数组或者对象时，curVal 和 oldVal 是相等的，由于这两个形参指向的是同一个数据对象。数组

Watch deep 选项

类型是对象的变量，当键值发生变化时，为了监听到数据变化，须要设置deep选项为true，以下：app

实例 3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js 观察者(watch)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <title>Vue.js 观察者(watch)</title>
    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="fruits.count"/>
        <input type="text" v-model="fruits.name"/>
        <p>fruits：{{message}}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                fruits: {
                    name: "香蕉",
                    count: 5
                },
                message: '5条香蕉'
            },
            watch: {
                fruits: {
                    handler(obj){
                        this.message = obj.count + '条' + obj.name
                    },
                    deep: true
                }
            }
        })
    </script>
</body>
</html>

计算属性与 watch

计算属性在大多数状况下更合适，但有时也须要一个自定义的 watcher 。这是为何 Vue 提供一个更通用的方法经过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操做或开销较大的操做，这是颇有用的。异步

Vue.js 观察者(watch)

Vue.js 观察者(watch)

用法

实例 1

实例 2

Watch deep 选项

实例 3

计算属性 与 watch

计算属性与 watch