计算属性 computed 和监听属性 watch（六）

watch 监听属性

watch 用于 data 中属性的变化以及路由对象的改变，它可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数，类似于 jQuery 的 onchange。

1、监听 data 属性值的变化：

以下实例进行全名的拼接：

<div id="app">
    <input type="text" v-model="firstname" placeholder="firstname"> + 
    <input type="text" v-model="lastname" placeholder="lastname"> =
    <input type="text" v-model="fullname" placeholder="fullname"> 
</div>

<script src="./lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '#app', 
        data: {
            firstname: '',
            lastname: '',
            fullname: '',
        },
        watch: {
            'firstname': function(newVal, oldVal) {
                // console.log(newVal, oldVal)
                // this.fullname = newVal + '-' + this.lastname;
                // this.fullname = this.firstname + '-' + this.lastname
            },
            'lastname': function(newVal) {
                this.fullname = this.firstname + '-' + newVal
            }
        }
    })
</script>

要监听哪个属性值的变化，在 watch 中定义即可，它有两个参数：newVal、oldVal，分别是新值和旧值。

2、监听路由地址的变化：

监听路由地址，就是监听 $route.path 的变化

<div id="app">
    <router-link to="/login">登陆</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>
</div>

<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
<script>
    var login = {
        template: '<h1>登陆组件</h1>'
    }

    var register = {
        template: '<h1>注册组件</h1>'
    }

    var routerObj = new VueRouter({
        routes: [
            { path: '/', redirect: '/login' },
            { path: '/login', component: login },
            { path: '/register', component: register }
        ]
    })

    var vm = new Vue({
        el: '#app', 
        data: {},
        watch: {
            // 监听路由地址，就是监听 $route.path 的变化
            '$route.path': function(newVal, oldVal) {
                // console.log(newVal, oldVal)
                if (newVal === '/login') {
                    console.log('欢迎登陆！')
                } else if (newVal === '/register') {
                    console.log('欢迎注册！')
                }
            }
        },
        router: routerObj   // 挂载路由对象
    })
</script>

computed 计算属性

计算属性在处理一些复杂逻辑时是很有用的，本质上也是一个方法，但是使用的使用不需要加 括号，当做普通属性使用即可。

注意：

• 只要计算属性中这个 function 内部所用到的任何 data 中的数据发生了变化，就立即重新计算这个属性的值
• 计算属性的结果会被缓存，方便下次使用，如下述例子中的：<h3>{{ fullname }}</h1>，如果计算属性方法中，所以来的任何数据，都没有发生过变化，则不会重新对计算属性求值
• computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
• 计算属性必须有一个返回值

<div id="app">
    <input type="text" v-model="firstname" placeholder="firstname"> + 
    <input type="text" v-model="lastname" placeholder="lastname"> =
    <input type="text" v-model="fullname" placeholder="fullname"> 

    <h3>{{ fullname }}</h3>
</div>

<script src="./lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '#app', 
        data: {
            firstname: '',
            lastname: '',
        },
        computed: {
            'fullname': function() {
                // 将计算结果返回给 fullname，data 中不需要定义 fullname
                return this.firstname + '-' + this.lastname
            }
        }
    })
</script>

定义有getter和setter的计算属性：

<div id="app">
    <input type="text" v-model="firstname" placeholder="firstname"> +
    <input type="text" v-model="lastname" placeholder="lastname"> =
    <input type="text" v-model="fullname" placeholder="fullname">

    <input type="button" value="点击修改 fullname 的值" @click=changeName>
    <h3>{{ fullname }}</h3>
</div>

<script src="./lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: '',
            lastname: '',
        },
        methods: {
            changeName() {
                this.fullname = 'Tom-chen2'
            }
        },
        computed: {
            fullname: {
                get: function() {
                    return this.firstname + '-' + this.lastname
                },
                set: function(newVal) {
                    console.log('newVal==>', newVal)
                    var parts = newVal.split('-');
                    this.firstname = parts[0]
                    this.lastname = parts[1]
                }
            }

        }
    })
</script>

watch、computed 和 methods 的区别

• computed 属性：结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用。而 methods ，在重新渲染的时候，函数总会重新调用执行。
• methods 方法：主要用于业务逻辑
• watch 对象：键是要监听的表达式，值为对应的回调函数。主要用于监听某些特定数据的变化，而且可以监听路由地址的变化，从而进行某些
• 具体的业务逻辑操作，可看作是 computed 和 methods 的结合体