vue基础学习4

---

1、watch监听

在vue中，使用watch来响应数据的变化

---

<script>
export default {
  data(){
	return{
		num:0		
	}
	},
	methods:{
		add(){
			this.num++
		}
	},
	watch:{
		num(newVal,oldVal){
			console.log(newVal,'新数据')
			console.log(oldVal,'旧数据')
		}
	}
}
</script>

watch的基本使用是传出两个参数，一个新的参数，一个旧的参数。
那么可以使用watch干什么？
watch的作用是用来监听数据的，主要监听的数据有data中的数据、props、路由
案例如下：

<template>
	<div>
		<p>{{num}}</p>
		<p>{{type}}</p>
		<button @click='add'>按我加1</button>
	</div>
</template>
<script>
export default {
  data(){
	return{
		num:0
		type:偶数		
	}
	},
	methods:{
		add(){
			this.num++
		}
	},
	watch:{
		num(newVal){
			//根据当前num的值判断当前数字的基偶性，从而改变type的类型
			this.type = newVal % 2 ==0?'偶数':'奇数'
		}
	}
}
</script>

type的值是根据watch监听到的num实时返回的。
复杂对象的监听：

<template>
	<div>
		<p>姓名：{{obj.name}}</p>
		<p>年龄：{{obj.age}}</p>
		<p>{{state}}</p>
		<button @click='add'>按我年龄加1</button>
	</div>
</template>
<script>
export default {
  data(){
	return{
		obj:{
			name:'小红'，
			age:18
		},
		state:''		
	  }
	},
	methods:{
		add(){
			this.obj.age++
		}
	},
	watch:{
		//只能监听属性值，不能监听整个属性。
		'obj.age'(newVal){
			//console.log('监听到了')
			handler(val){
				this.state = val>=18? '成年':'未成年',
				//是否初始化时进行监听
				//true为实时监听
				immediate:true
			}
		}
	}
}
</script>

如果我们需要页面初始化时就能触发一次监听，使用handler函数（监听函数），并将immediate设置为true。
需要注意的时复杂类型只支持监听属性值或对象值，不支持监听整个数据类型。

2、computed计算属性

作用：对数据的计算和缓存，优点是能够提高性能
基本使用：

<template>
	<div>
		<!--
			虽然在定义计算属性的时候是通过一个函数返回的数据，
		但是在使用时，后面不能加（），
		因为其是一个属性，不是方法
		-->
		<p>{{reverseStr}}</p>
	</div>
</template>

<script>
export default {
 data(){
	return{
		str:'你好，世界'		
	  }
	},
 computed:{
		reverseStr(){
			return this.str.split("").reverse().join("")
		}
	}
}
</script>

模板中使用的reverseStr就是返回的计算属性.
使用计算属性要注意两点：1.必须要有return返回 2.要有依赖属性

---

methods:{
		reverseStr(){
			return this.str.split("").reverse().join("")
		}
	}

上面代码也能实现计算属性的功能，
计算属性和普通的methods有什么关系呢？
答：缓存
计算属性侦听的是对应的依赖属性，如果依赖属性没有发生变化，此时就会将缓存的结果抛出，从而大大增加了页面加载性能。而methods无论内容是什么，都会重新渲染页面。
函数每次调用都会执行；而计算属性的返回结果没有变化，那么就只会执行一次，从而提高性能。

3.实例属性$attrs和$listeners

3.1 $attrs属性

$attrs能获取\ast \ast 父组件\ast \ast 除了props传入的所有属性（出了class和style属性）在多级组件（有子组件、孙子组件...）中将数据一级一级往下传递，使用created方法使用。通过v-bind将$attrs传递下去

3.2 $listeners属性

子组件可以接受到父组件的（非.native修饰符）的事件监听。
（.native修饰符：在组件上添加一个普通的click事件监听，此时不会生效，因为普通的事件监听在组件上是不会生效的，如果需要生效需使用.native修饰符，如下）

<Child @click.native="handler"></Child>

可以向下一层一层传递，$listeners获取祖先组件的绑定到后代组件的事件监听。，使用created方法使用通过v-on将$listeners传递下去

4.实例属性 $refs和$el

4.1$refs

如何让父组件直接触发子组件的方法？如：父组件让子组件的数据+1。
如果一个页面有多个ref，此时会返回一个JSON对象，分别代表对应的ref实例
如果ref不是组件，则会返回元素本身

4.2$el

$el表示当前元素或被选中组件的根节点，通过这个特点实现$el修改对应组件样式

this.$refs.addChild.$el.style="color:red"

5.vue混入$mixins

特点：可复用
在APP.vue中引入mixins，并注册
（mixins：【】，数组内部是引入的对应的可复用的功能文件）
给子组件也引入mixins，并注册
此时，点击子组件、父组件，同时设置add，但并没有同时操作一个数据，两者相互隔离。

5.vue过滤器

和计算属性一样都是用来处理数据，但过滤器一般用与格式化输入的文本数据

全局过滤器

1.过滤器只能在插值语法和v-bind中使用。
2.过滤器可以连续使用，连续使用管道连接
定义过滤器：
通过vue.filter()；
filter方法接收两个参数
第一个：过滤器名称
第二个：处理数据的函数,函数的第二个值为传入的参数
注意：默认处理数据的函数接收的第一个参数，就是当前要被处理的数据。

<template>
	<div id="app">
		<!--
			Vue会把name交给指定的过滤器处理之后，再把处理之后的结果插入到指定的元素中
			过滤器还可以在名称后面加上（）内部可以进行传递参数
		-->
		<p>{{name | formStr("red")}}</p>
	</div>
</template>

//
Vue.filter("formStr",(value,fmStr) =>{
	value = value.replace(/学院/g，"大学");
	return value;
});

局部过滤器

只能在自定义的的Vue实例中使用

<template>
	<div>
		<p>{{name | formStr}}</p>
	</div>
</template>

<script>
export default {
 data(){
	return{
		str:'南湖高中'		
	  }
	},
 computed:{},
 filters:{
	"formStr":(value) =>{
		value = value.replace(/学院/g，"大学");
		return value;
		}
	}
}
</script>