vue常用钩子函数

1、在keep-alive包裹的活性组件中，加入了activated()，用法和created()、mounted()用法相同，区别是在活性组件中，第一次进入页面时按照created()=>mounted()=>activated()触发，第二次之后只会触发activated()

activated(){
	在这里做一些进入页面时的操作
},

2、计算属性

computed:{
	getData：function(val){
		//在此处做一些对val的操作
		return //val 或者和val相关的数据
	}
}

template中使用

<template>
	<div>
		{{getData}}
	</div>
</template>

3、监听属性

data(){
	return{
		list:"" // data中定义一个list
	}
},
watch:{ 
	list(){
	//当list改变时的操作 调用方法 数据赋值
	}，
	$route(value){
		//监听路由
		console.log(value)
	}
}

4、过滤器

filters:{
	getNum:function(value){
			console.log(value)
			//在此对value作一些操作 或者和value相关的数据
			return value //返回值
		}
	}

template中使用

<template>
	<div>
		{{data|getNum}}
	</div>
</template>

5、自定义指令

directives: {
  focus: {// 指令的定义
    inserted: function (el) {
      el //指令的触发元素
      el.focus() //常见的自动获取焦点指令
    }
  }
}

template中使用

<template>
	<div>
		<input v-focus/>
	</div>
</template>