参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-14监听器

侦听器可以监听data对象属性或者计算属性的变化。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>监听器</title>
</head>

<body>
    <div id="app">
        <p>{{person.age}}岁的{{person.name}}正在看{{book}}，虽然他已经看了{{countValue}}遍。</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                countValue: 0,
                person: {
                    name: "曹操",
                    age: 18
                },
                book: "《茶馆》"
            },
            created() {
                this.countValue = 3;
                this.person.name = "刘备";
                this.person.age = 20;
                this.book = "《骆驼祥子》"
            },
            watch: {
                countValue() {
                    console.log("count发生改变了");
                },
                // 监听data对象中某个对象的属性
                'person.name'() {
                    console.log("name发生了改变")
                },
                // 获取修改前的值      当监听的属性发生变化时，侦听器会被传入两个参数
                book(newVal, oldVal) {
                    console.log("修改前的值：" + oldVal + "=====修改后的值：" + newVal);
                },

            }
        })
    </script>
</body>

</html>

 

注意：如果从其他框架切换到Vue，那么你可能一直好奇如何监听数据的变化，而且一直期待着这个功能。但是，要小心。在Vue中，通常有比侦听器更好的方式来处理问题——通常会使用计算属性。例如，和设置数据然后监听它的变化相比，使用一个带有setter的计算属性会是更好的方式。

参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础--计算属性

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>监听器</title>
</head>

<body>
<divid="app">
<p>{{person.age}}岁的{{person.name}}正在看{{book}}，虽然他已经看了{{countValue}}遍。</p>
</div>
<scriptsrc="https://unpkg.com/vue"></script>
<script>
newVue({
el:"#app",
data: {
countValue:0,
person: {
name:"曹操",
age:18
},
book:"《茶馆》"
},
created() {
this.countValue = 3;
this.person.name = "刘备";
this.person.age = 20;
this.book = "《骆驼祥子》"
},
watch: {
countValue() {
console.log("count发生改变了");
},
// 监听data对象中某个对象的属性
'person.name'() {
console.log("name发生了改变")
},
// 获取修改前的值 当监听的属性发生变化时，侦听器会被传入两个参数
book(newVal, oldVal) {
console.log("修改前的值：" + oldVal + "=====修改后的值：" + newVal);
},

}
})
</script>
</body>

</html>
posted @ 2021-06-18 11:22  {颜逸}  阅读(76)  评论(0)  编辑  收藏  举报