Vue基础---侦听器、计算属性、过滤器和过渡动画

侦听器、计算属性、过滤器和过渡动画

重点：

1. 侦听器 watch
2. 计算属性 computed
3. 过滤器 filter
4. 过渡动画 transition

侦听器 --watch 监听 数据的改变

Vue提供的watch监听，用来响应数据变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式最有用

①普通监听-函数

<div id="app">
	<h3>watch监听器</h3>
	<input type='text' v-model="msg">
</div>
<script>
	new Vue({
    
		el:"#app",
		data:{
    
			msg:""
		},
		watch:{
    
			msg(newVal,oldVal){
    
				console.log("msg被改变了，原来的值时："+oldVal+",新的值是"+newVal)
		}
	})
</script>

②深度监听
watch里msg(){}形式是浅监听，只适合监听一层，如果监听对象或数组内部值，可以用深度监听，deep属性默认为false

<div id="app">
	<input type&