13.Vue.js : watch监听器/深度监听

watch

watch监听器用来监听data中数据的值，只要监听的数据一变化，它就能执行相应的函数.
创建监听器通过watch属性，它是一个对象.

开发时，能用computed实现的就用computed
需要执行异步操作的时候，就要用到watch

<!DOCTYPE html>
<html lang="en">

<head>
    <title>computed</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" name="" id="" v-model='firstName'>
        <input type="text" name="" id="" v-model='lastName'>
        <h1>全名：{{fullName}}</h1>
        <h2>全名：{{watchFullName}}</h2>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: '',
                lastName: '',
                watchFullName: ''
            },
            //计算属性是根据data中已有的属性，计算得到一个新的属性
            //创建计算属性通过computed关键字，它是一个对象
            computed: {
                fullName() {
                    return this.firstName + this.lastName
                }
            },
            //watch监听器用来监听data中数据的值，只要监听的数据一变化，它就能执行相应的函数
            //创建监听器通过watch属性，它是一个对象
            watch: {
                //这里面的函数名很特殊，它是你需要监听的data的名字，这个函数还包含两个参数，一个是newVal,一个是oldVal
                firstName(newVal, oldVal) {
                    this.watchFullName = newVal + this.lastName
                },
                lastName(newVal, oldVal) {
                    this.watchFullName = this.firstName + newVal
                }
            }
            //开发时，能用computed实现的就用computed
            //需要执行异步操作的时候，就要用到watch
        })
    </script>
</body>

</html>

深度监听

<!DOCTYPE html>
<html lang="en">

<head>
    <title>深度监听</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model='user.name'>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                user: {
                    name: 'vivi'
                }
            },
            watch: {
                //监听对象不能使用下面这种写法，要使用深度监听
                // user(newVal, oldVal) {
                //     console.log('改变了')
                // }
                user: {
                    handler(newVal, oldVal) {
                        console.log(newVal.name)
                    },
                    //deep:true表示深度监听
                    deep: true
                }
            }
        })
    </script>
</body>

</html>

来源：CSDN

作者：ヾ喵了live

链接：https://blog.csdn.net/vivian_1122/article/details/88747105

标签

监听器