1. 方法总和methods内的函数如何触发?
机制:methods内的函数和普通的函数没有区别。
触发:methods内的函数执行的时候,才能触发;
注意:当页面渲染的时候,也会执行下面代码中的methodsN函数;methods内的函数命名不能与data中的属性重名。
下面实例中的methodsName属性会添加到Vue实例的vm中,和methods一个级别
下面例子中,当点击时执行一次clickme函数:
触发方式:点击执行
<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内的函数就执行
注意:有缓存,所以该值不变下的页面渲染不会触发该函数;但代码复杂
<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呢???
<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>
控制台的操作: