区别一：watch监听的是一个变量(或者一个常量)的变化，这个变量可能是一个单一的变化也可能是一个数组。computed可以监听很多个变量，但是这个变量一定是vue实例里面的。
Vue 测试实例 - 菜鸟教程()
msg:{{ msg }}
another:{{ another }}
{{msg1}}
var vals='sddss';
var app=new Vue({
el: '#app',
data: {
msg:'hello vue',
another:'another hello'
},
watch:{
msg:function(newval,oldval){
console.log('newval is:'+newval);
console.log('oldval is:'+oldval);
}
},
computed:{
msg1:function(){
return 'ss:'+this.msg+','+this.another+vals;
}
}
});
vals='watch!';//值改变了，computed未改变//因为vals不是Vue实例，下面通过定时器改变实例中变量的值，从而改变computed中vals的值
setTimeout(function(){
app.msg='wushijie!'
},3000);
computed是在HTML DOM加载后马上执行的，如赋值；而methods则必须要有一定的触发条件才能执行，如点击事件；
watch和computed均可以监控程序员想要监控的对象，当这些对象发生改变之后，可以触发回调函数做一些逻辑处理。
一、计算属性computed的特点
computed是计算属性，实时响应的，计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性；
如果他所依赖的这些属性值没有发生改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么性能要高一些，所以vue中尽可能使用computed替代watch。
{{fullName}}
new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'vue'
},
computed: {
fullName: function() {
return this.firstName + this.lastName;
}
}
});
注意：data中不用声明fullName；
监听computed路由变化，发现不可行。
二、watch监控自身属性变化
{{fullName}}
new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
fullName: 'hello'
},
watch: {
'firstName': function(newval, oldval) {
// console.log(newval,oldval);
this.fullName = this.firstName + this.lastName;
},
'lastName': function(newval, oldval) {
// console.log(newval,oldval);
this.fullName = this.firstName + this.lastName;
}
}
});
一、watch监控路由对象
登录
注册
//1.0 准备组件
// var App = Vue.extend({});
var login = Vue.extend({
template: '
登录
'});
var register = Vue.extend({
template: '
注册{{name}}
',data: function() {
return {
name: ''
}
},
created: function() {
this.name = this.$route.params.name;
}
});
//2.0 实例化路由规则对象
var router = new VueRouter({
routes: [{
path: '/login',
component: login
},
{
path: '/register/:name',
component: register
},
{
path: '/',
//当路径为/时，重定向到/login
redirect: '/login'
}
]
});
//3.0 开启路由对象
new Vue({
el: '#app',
router: router, //开启路由对象
watch: {
'$route': function(newroute, oldroute) {
console.log(newroute, oldroute);
//可以在这个函数中获取到当前的路由规则字符串是什么
//那么就可以针对一些特定的页面做一些特定的处理
}
}
})
但其实watch干我这个事有点屈才了，watch真正强在他可以在数据变化时做一些异步处理或者开销大的操作，这是computed所不能及的。
vue watch和computed的使用场景
watch 监听某个数据的变化(监听完调用什么函数) 一个数据影响多个数据 (比如：浏览器自适应、监控路由对象、监控自身属性变化)
computed 计算后返回新 一个数据受多个数据影响(比如：计算总价格、过滤某些数据)
computed是用来处理你使用watch和methods的时候无法处理(比如有缓存的时候监听不了数据变化)，或者是处理起来并不太恰当的情况的，利用computed处理methods存在的重复计算情况
