九.Vue.js的侦听器

一.Vue初体验：https://blog.csdn.net/qq_43674132/article/details/104857216

二.Vue条件命令：https://blog.csdn.net/qq_43674132/article/details/104857322

三.Vue循环指令：https://blog.csdn.net/qq_43674132/article/details/104857517

四.Vue处理用户输入：https://blog.csdn.net/qq_43674132/article/details/104857651

五.Vue组件初体验：https://blog.csdn.net/qq_43674132/article/details/104857870

六.Vue实例：https://blog.csdn.net/qq_43674132/article/details/104857953

七.Vue模板语法：https://blog.csdn.net/qq_43674132/article/details/104858009

八.Vue计算属性：https://blog.csdn.net/qq_43674132/article/details/104858068

九.Vue.js侦听器：https://blog.csdn.net/qq_43674132/article/details/104860083

十.Vue.js的class绑定：https://blog.csdn.net/qq_43674132/article/details/104861826

十一.Vue style绑定：https://blog.csdn.net/qq_43674132/article/details/104877107

十二.Vue 条件渲染：https://blog.csdn.net/qq_43674132/article/details/104877177

十三.Vue 列表渲染：https://blog.csdn.net/qq_43674132/article/details/104877393

十四.Vue事件处理：https://blog.csdn.net/qq_43674132/article/details/104878173

十五.Vue表单输入绑定：https://blog.csdn.net/qq_43674132/article/details/104879776

十六.Vue中引用图片：https://blog.csdn.net/qq_43674132/article/details/107043105

Vue.js的侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

 

计算属性VS侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：

 <div>{{fullName}}</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            firstName:'zhang',
            lastName:'san',
            fullName:'zhang san'
        },
        //需要做异步操作可以用watch监听器
        watch:{
            //监听firstName的变化，如果firstName变了，要重新给fullName赋值
            //val：firstName方法里面有个val，这个参数就是变了之后最新的值
            firstName(val){
                this.fullName=val+''+this.lastName;
            },
            lastName(val){
                this.fullName=''+this.firstName+val;
            }
        }
        });
</script>

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

<script>
    var app = new Vue({
        el:"#app",
        data:{
            firstName:'zhang',
            lastName:'san'
        },
        computed: {
            fullName(){
                return this.firstName+''+this.lastName;
            }
        }
        });
</script>

好得多了，不是吗？