文章目录
一、$emit
监听事件
vue中的组件,一层一层的执行着$emit
方法,再通过组件上的@方法监听方法的调用(父组件中执行$emit
方法,子组件中再通过调用组件,在组件上配上被监听的子组件方法),从父组件一路到子孙组件
二、使用watch
- watch和methods平级
1.watch监听数据变化
使用这个 属性,可以监视 data 中指定数据的变化,然后触发这个 watch 中对应的 function 处理函数 该方法可以不用绑定事件
注意:watch函数有两个变量,只是在该函数中有一个没有用上,写上也没有关系
2.watch监听路由变化
watch: {
//$route.path == this.$route.path
'$route.path': function(newVal,oldVal){
if(newVal === '/login'){
console.log('欢迎进入login')
}else if(newVal === '/register'){
console.log('欢迎进入register')
}
}
}
3.watch
的属性immediate
与deep
、handler
方法
watch监听的特点是:最初绑定的时候并不会执行
而如果想要在最初绑定的时候就执行,就需要用到immediate: true
,之后就会在最初绑定的时候立即运行handler
方法
watch: {
items: {
deep: true,
handler (val) {
this.score = 0
for (let i = 0; i < val.length; i++) {
this.score += val[i].value;
}
}
}
}
deep的使用
watch: {
peo: {
handler(newName, oldName) {
console.log('peo.name changed');
},
immediate: true,
deep: true
}
}
优化监听字符串
watch: {
'peo.name': {
handler(newName, oldName) {
console.log('peo.name changed');
},
immediate: true
}
}
手动去掉监听
this.$watch('peo') // 这样,它依然会继续监听peo.name
this.$watch('peo.name') // 这样,才清掉
三、computed计算属性的使用
计算属性的本质,就是 一个方法,只不过我们在使用 这些计算属性的时候,是把它们的名称直接当作属性来使用的;并不会把 计算属性当作方法去调用;
- computed和methods平级
注意1: 计算属性,在引用的时候,一定不要加()
去调用,直接把它当作普通 属性去使用就好了;
注意2: 只要 计算属性,这个 function 内部,所用到的 任何 data 中的数据发送了变化,就会立即重新计算 这个 计算属性的值
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods: {},
watch: {},
computed: {
'fullname': function(){
return this.firstname + '-' + this.lastname
}
}
});
</script>
</body>
注意:
1.fullname
没有在data中定义
2.在compute
定义fullname
后直接return
出去就好
注意3: 计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果 计算属性方法中,所有的任何数据,都没有发生过变化,则不会重新对计算属性求值;
(也就是说,不会因为页面中调用几次函数去执行几次,只会根据函数执行来调用函数)
- 计算属性的
setter
计算属性默认只有
getter
,不过在需要时你也可以提供一个setter
:
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
- 之前默认只有
getter
,使我们在运行中操作vm.fullName=xxx
并没有什么作用,但是用了setter
后,会修改响应式的数据,然后在调用getter
后fullName
跟随
四、watch、computed和methods
之间的对比
computed
属性的结果会被缓存(所以在需要修改前后的值的时候可以通过computed
+watch【oldVal】
实现),除非依赖的响应式属性(比如new的当前时间不响应)变化才会重新计算。主要当作属性来使用;methods
方法表示一个具体的操作,主要书写业务逻辑;watch
一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed
和methods
的结合体;