let vm = new Vue({
el: "#app"
data: {
firstname: '',
lastname: '',
fullname: '',
},
methods: { //可用keyup动作绑定事件
getFullname () {
this.fullname = this.firstname + '-' + this.lastname
}
},
watch: {
firstname: function () {
this.fullname = this.firstname + '-' + this.lastname
}, //设置多个监听属性时用逗号分隔
$route.path: function ( newval, oldval ) { //监听路由的变化
if (newval === '/login') console.log('欢迎来到登录页面！')
else if (newval === '/login') console.log('欢迎来到注册页面！')
}
},
computed: {
fullname: function () {
return this.firstname + '-' + this.lastname
}
}
})
总结：
1. methods中写的是一些方法，用于处理业务逻辑；
2. computed的本质是一个方法，但我们把他们的名称当做属性来使用，它的值通过在函数中的return来返回。当computed值所依赖的值发生变化时，这个computed值也会立即重新求值，且computed值的结果会被缓存起来，当它所依赖的数据都没有发生变化时，不会对它重新求值
3. watch用于监听data中的以及其他（比如路由）的数据的变化，当被监听的内容发生变化时，触发相应的函数，从而进行某些逻辑操作。可以认为是methods和computed的结合体。