Vue组件中的开放选项
每个Vue组件中都又以下的几个常用的组件选项，例如name，props，data，methods，各大生命周期函等。我们通常利用这些开放选项去完成一系列关于页面的动态工作，或者复杂的静态需求。
组件中的各种函数
一.最基础的函数是生命周期函数
Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。
常用到的生命周期函数有created和mounted，通常我们在这两个生命周期函数中做请求后台数据的操作，然后进行对页面初始化数据的一个渲染。
二、功能类型的开放选项函数（以下只介绍常用的几种）
1.有监听作用的函数：computed，watch
computed：计算属性，通常情况下可以帮助我们页面上的一些其构成变量需要实时监听的属性进行一系列的监听，每当它所依赖的变量发生变化时，我们就可以重新计算出一个新的数值，让页面上的参数随之变化。
如：
<template>
<div>
<div>姓：<input type="text" v-model="surname"></div>
<div>名：<input type="text" v-model="name"></div>
<div>姓名：<input type="text" v-model="fullName"></div>
</div>
</template>
<script>
export default {
computed:{
fullName(){
return this.surname+'~'+this.name
}
},
data(){
return{
surname:'勇敢',
name:'小陈',
}
}
}
</script>
watched：相对于computed有所不同，更加简单粗暴，它所监听的是变量的本身，当变量本身发生变化时，触发对应的监听函数。
<body>
<div id="app">
<input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: ''
},
watch: {
num(newVal, oldVal) {
// 监听 num 属性的数据变化
// 作用 : 只要 num 的值发生变化,这个方法就会被调用
// 第一个参数 : 新值
// 第二个参数 : 旧值,之前的值
console.log('oldVal:',oldVal)
console.log('newVal:',newVal)
}
}
})
</script>
</body>
2.提供定义接口的函数：filter，directives。
filter：定义过滤方式的一个开放函数，我们可以通过filter定义一个过滤的函数，对我们页面上的变量直接进行处理。
// 使用方式
{{scope.row.type| getEvnNameFilter}}
filter:{
getEvnNameFilter(val){
let arrayData={
1: '开发环境'，
2: '测试环境',
3: 'UAT环境',
4: '线上环境'
}
return arrayData[val]
}
}
directives：自定义一个指令可供复用（类似于v-html，v-once这种功能性的指令），通常我们通过指令的几个钩子函数去完成一系列比较复杂的工作。
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
}
}
}
结语
以上就是一个vue组件常用的一些开放选项，一般情况下在掌握了这些组件选项的使用方式，就可以比较轻松地去开发一个复用性强，代码耦合性较低的页面，这对于一个vue的开发者来说是基本都需要掌握的一个技巧和基础。
1452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
