Vue的计算属性computed、方法methods、侦听器watch的区别

1. 方法总和methods内的函数如何触发？

机制：methods内的函数和普通的函数没有区别。

触发：methods内的函数执行的时候，才能触发；

注意：当页面渲染的时候，也会执行下面代码中的methodsN函数；methods内的函数命名不能与data中的属性重名。

下面实例中的methodsName属性会添加到Vue实例的vm中，和methods一个级别

下面例子中，当点击时执行一次clickme函数：

触发方式：点击执行

[code]
<div id="demo">
<button @click="clickme">click me</button>
<p>{{time}}</p>
</div>
var vm = new({
data: {
time: ''
},
methods: {
clickme(){
console.log("methods")
this.time = Date();
}
},

})

结果： 

2. 计算属性computed内的函数如何触发？

机制：{{函数名}} <---return <--- 值   

触发：当值发生变化的时候，页面中的{{函数名}}也发生变化，就会触发该函数

注意：return 会将函数名 返回到和computed一个级别，这样函数名就是Vue实例vm的属性，所以才能在标签中使用该属性

有缓存，所以该值不变下的页面渲染不会触发该函数

3. 侦听器watch内的函数如何触发？

机制：watch内的函数名  ===  data中的属性名

触发：data中的属性名对应的值发生改变时，就会触发watch内的函数就执行

注意：有缓存，所以该值不变下的页面渲染不会触发该函数；但代码复杂

[code]    <div id="demo">
<div>{{methodsN()}}执行methods内的methodsN：{{methodsName}}</div>
<div>触发computed内的computedName：{{computedName}} {{age}}</div>
<div>firstName的值：{{firstName}}</div>
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'yuzhu',
lastName: 'zhu',
age: 22
},
methods: {
//方法执行就会触发，每次页面渲染都会触发函数
methodsN: function(){
console.log("计算了methods")
//this.methodsName 可以通过函数给vm对象添加methodsName属性
this.methodsName = this.firstName + this.lastName;
}
},
computed: {
//computed：计算属性，前提是：Vue的html标签中使用computed自定义的方法
//同时，要使用return。
// {{函数名}}  <---return   <--- 值 当值发生变化的时候，{{函数名}}对应变化

computedName: function(){
console.log("计算了computed")
return this.firstName + ' ' + this.lastName //computedName属性也添加到vm对象上
}
},
watch: {
//watch：监听的是属性firstName的变化，即watch中的函数名 === data中的属性名
//当firstName发生改变时，触发firstName这个函数
firstName: function(){
console.log("计算了watch")
}
}
})
</script>

结果：页面刷新的时候触发了methods中的methodsN 和 computed中的computedName，而watch中的firstName没有触发

原因：

（1）methodsN在标签中执行，每次页面刷新都会执行，每次渲染页面都会触发，哪怕是上述例子中age值的改变，也会重排渲染页面，触发methodsN函数

（2）computedName在页面刷新的时候触发，因为Vue实例vm中本来没有computedName属性，也就是该值为undefined，当页面刷新的时候，该值改变，就会触发computedName函数；而age值的改变不会触发computedName，因为有缓存，只有当computedName值发生改变时，才会触发该函数。

（3）firstName函数没有触发，因为该值没有改变。

二、深入理解computed

内部函数可以写成对象形式，该对象内有get、set方法（系统自带），为什么还可以直接使用fullName呢？？？

[code]     <div id="demo">{{fullName}}</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 1,
lastName: 2,
},
computed: {
fullName: {
get: function(){
return this.firstName + " " + this.lastName
},
set: function(value){
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>

控制台的操作：