vue实例的选项总结
一、数据
API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
1.data
类型：Object|Function
限制：组件的定义只接受function
详细：Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对)。当一个组件被定义，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供data函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象。
vardata={a:1}
//直接创建一个实例
varvm=newVue({
data:data
})
vm.a//=>1
vm.$data===data//=>true
//Vue.extend()中data必须是函数
varComponent=Vue.extend({
data:function(){
return{a:1}
}
})
2.computed
类型：{[key:string]:Function|{get:Function,set:Function}}
详细：计算属性将被混入到Vue实例中。所有getter和setter的this上下文自动地绑定为Vue实例。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖(比如非响应式属性)在该实例范畴之外，则计算属性是不会被更新的。
varvm=newVue({
data:{a:1},
computed:{
//仅读取
aDouble:function(){
returnthis.a*2
},
//读取和设置
aPlus:{
get:function(){
returnthis.a+1
},
set:function(v){
this.a=v-1
}
}
}
})
vm.aPlus//=>2
vm.aPlus=3
vm.a//=>2
vm.aDouble//=>4
3.methods
类型：{[key:string]:Function}
详细：methods将被混入到Vue实例中。可以直接通过VM实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为Vue实例。
varvm=newVue({
data:{a:1},
methods:{
plus:function(){
this.a++
}
}
})
vm.plus()
vm.a//2
4.watch
类型：{[key:string]:string|Function|Object|Array}
详细：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个属性。
5.props
类型：Array
详细：props可以是数组或对象，用于接收来自父组件的数据。props可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
你可以基于对象的语法使用以下选项：
1 type:可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个prop是否是给定的类型，否则抛出警告。Prop类型的更多信息在此。
2 default:any为该prop指定一个默认值。如果该prop没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
3 required:Boolean定义该prop是否是必填项。在非生产环境中，如果这个值为truthy且该prop没有被传入的，则一个控制台警告将会被抛出。
4 validator:Function自定义验证函数会将该prop的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个falsy的值(也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多prop验证的相关信息。
二、DOM
API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-DOM
1.el
类型：string|Element
限制：只在用new创建实例时生效。
详细：
(1)提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。
(2)在实例挂载之后，元素可以用vm.$el访问。
(3)如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用vm.$mount()手动开启编译。
提供的元素只能作为挂载点。不同于Vue1.x，所有的挂载元素会被Vue生成的DOM替换。因此不推荐挂载root实例到或者
上。如果render函数和templateproperty都不存在，挂载DOM元素的HTML会被提取出来用作模板，此时，必须使用Runtime+Compiler构建的Vue库。
2.template
类型：string
详细：一个字符串模板作为Vue实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
如果值以#开始，则它将被用作选择符，并使用匹配元素的innerHTML作为模板。常用的技巧是用
出于安全考虑，你应该只使用你信任的Vue模板。避免使用其他人生成的内容作为你的模板。
如果Vue选项中包含渲染函数，该模板将被忽略。
3.render
类型：(createElement:()=>VNode)=>VNode
详细：字符串模板的代替方案，允许你发挥JavaScript最大的编程能力。该渲染函数接收一个createElement方法作为第一个参数用来创建VNode。
如果组件是一个函数组件，渲染函数还会接收一个额外的context参数，为没有实例的函数组件提供上下文信息。
Vue选项中的render函数若存在，则Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取出的HTML模板编译渲染函数。
4.renderError
2.2.0新增
类型：(createElement:()=>VNode,error:Error)=>VNode
详细：只在开发者环境下工作。
当render函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到renderError。这个功能配合hot-reload非常实用。
示例：
newVue({
render(h){
thrownewError('oops')
},
renderError(h,err){
returnh('pre',{style:{color:'red'}},err.stack)
}
}).$mount('#app')
以上就是vue实例的选项总结的详细内容，更多关于VUE实例选项的资料请关注毛票票其它相关文章！