VUE的选项

vue中选项

data methods props watch computed

data 存放数据

在组件内，必须是一个返回初始对象的函数

为了保证当前组件的多个实例直接不会共享data中的数据

props 用于接收父组件传来的数据

定义的props属性的对象，该对象中有四个属性：type ， default， required, validator

type:设置当前属性的数据类型，可以用数组设置多个数据类型：【String，Number】,一共有八种数据类型即：String、Number、Boolean、Object、Date、Array、 Funtion、 Symbol，

default：设置默认值的 any（任意类型）

required: 设置当前属性名是否为必填 ，值为true时为必填

validator：当前属性值得校验函数，函数的返回值为true通过校验 代码如下

props: {
    type: {
        validator: function(val){
            return ['success','danger','error'].includes(val)
        }
    }
}

methods:用于定义函数

watch

用于监听响应式数据的变化

export default {
	data(){
		return {
            i: 0,
            obj: {
                a: {
                    b: {
                        c: 0
                    }
                }
            }
        }
	},
    watch: {
        i(){
            //监听i的变化
        },
        obj: {
            handler(){
                //监听对象的变化
            },
            deep: true //深度监听，只能监听到对象属的变化
        }
    }
}

computed

计算属性 当所依赖的响应式数据发生改变时才会重新计算

DOM选项

el

使用css选择器或者htmldomcument对象的方法来获取页面中存在的DOM元素，将该元素作为Vue实例的挂载目标

template

 在自定义组件中用于创建 VNode 模板                    声明的 VNode 模板中，最外层只能有一个根元素

生命周期

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 

beforeCreate

不能获取DOM对象 

能获取到vue实例的属性和方法

在这个钩子函数内，初始化了 inject、props、methods、data、computed、wacth、provied；所以在这个钩子里还不可以使用 this；

created

不能获取DOM对象

能获取到vue实例的属性和方法

　在这个钩子函数内，将会挂在实例执行 vm.$mount(vm.$options.el)

　因为在 beforeCreate 钩子内已经将数据进行了初始化，所以我们可以在这个钩子内进行一些 data 实例数据的操作；对于 ajax 请求，通常由于有时候会在这个钩子内对一些 data 数据进行操作，所以个人用的比较多一点，一般就将 ajax 请求放在了这个里边，其实对于 ajax 放在 created 还是 mounted 区别不是很大，因为 created 和 mounted 之间的时间差其实是可以忽略的，队友有时候考虑的会引起二次渲染的问题，其实是没必要去考虑的，因为 ajax 本身就是异步的请求，一般就根据具体的需要去考虑将 ajax 放在哪里，和 react 一样的，mounted 和 componentDidMount 这里边 dom 实例已经挂在，我们就可以对一些 dom 进行处理了

beforeMount

能获取到vue实例的属性和方法

不能获取DOM对象

mounted

能获取到vue实例的属性和方法

能获取DOM对象

beforeUpdate

当 data 中响应式数据发生变化时，会触发页面的渲染，页面渲染前将调用该方法

在此方法获取的响应式数据的值为修改后的值

updated

响应式数据更新，触发页面渲染，页面渲染后将调用此方法

在此处可以获取更新后的DOM元素对象

beforeDestory

在这个钩子内还可以使用 this；

destroyed

在这个钩子内是不可以使用 this 的，实例已经在 beforeDestory 被销毁；

activated

　activated 这个钩子一般会配合着 keep-alive 来使用，用 keep-alive 进行组件的缓存，再次进入组件的时候，就直接跳过前边的钩子函数不再重新执行，而直接执行 activated 钩子；

   这个钩子在组件第一次渲染的时候会被调用，之后每次缓存组件被激活的时候调用；其调用机制就是，第一次调用的时候，是在 mounted 之后，beforeRouterEnter 守卫传给 next 的回调之前调用； 第二次调用的时候，因为组件被缓存了，mounted 以及之前的都不再调用了，就直接从 activated 钩子开始了；

deactivated

该钩子函数在 keep-alive 组件停用的时候调用，在服务器渲染期间不被调用；

使用了 keep-alive 就不会调用 beforeDestory 和 destoryed 钩子了，因为组件没有被销毁，而是缓存起来了，所以这个钩子可以看做是 beforeDestory 和 destoryed 的替代；

errorCaptured

主要用来处理一些异常错误，基本不怎么去使用