Vue中的选项
- 数据
- DOM
- 生命周期钩子
- 资源
- 组合
- 其余
1 数据
- data
- props
- propsData
- methods
- watch
1.1 data
Vue实例的数据对象
在初始化时，Vue会递归地把data的property转换为getter/setter，可能响应数据变动，以_和$结尾的property不会被解决
组件中的data必须返回一个初始数据对象的函数，如果是一个对象，组件创立的多个实例会共享援用这个数据对象。
1.2 computed
计算属性对象
函数模式的属性：仅读取
对象模式的属性：通过set/get函数读取和设置
data() { return { a: 1, }; }, computed: { fnA() { return this.a * 2; }, oA: { get() { return this.a + 1; }, set(newVal) { this.a = newVal * 2; }, }, }, mounted() { console.log(this.fnA); //2 console.log(this.oA); //2 console.log(this.a); //1 this.oA = 2; console.log(this.oA); //5 console.log(this.a); //4 console.log(this.fnA); //8 },1.3 methods
办法对象
混入到Vue实例中，能够间接通过vm实例拜访这些办法，或者在指令表达式中应用。办法中的this主动绑定为Vue实例
1.4 watch
设置数据侦测的对象
函数与字符串模式
data() { return { a: 1, b: { c: "bar" }, };},watch: { a: "show", b: "show",},methods: { show(val, oldVal) { console.log(val, oldVal); },},mounted() { this.a = 2; //2 1 this.b.c = 2;},函数模式就是把字符串替换为函数，不能深度侦测
对象模式
data() { return { a: 1, b: { c: "bar" }, };},watch: { a: { handler: "show", immediate: true, }, b: { handler: "show", deep: true, },},methods: { show(val, oldVal) { console.log(val, oldVal); },},mounted() { this.b.c = 2;},// 1 undefined//observer observerhandler后跟回调函数，immediate为true会立刻执行，deep为true能够深度侦测数组模式
数组里能够应用字符串、函数、对象模式，组合起来应用，它们会
顺次调用，能够设置多个handler
1.5 props
接管父组件的数据，数组或对象
数组为简略模式
//父组件<template><div> <Child :name="{ obj, c }" /></div></template><script>import Child from "./components/Child.vue";export default {name: "App",data() { return { obj: { a: 1, b: 2, }, c: 3, };},components: { Child,},};</script>//子组件<template><div>{{ name }}</div></template><script>export default {props: ["name"],};</script>父组件传递数据后，子组件用数组接管即可应用
对象模式能够对接管的数据进行配置
//父组件<Child :prop1="obj" :prop2="c" :prop3="d"/>//子组件<template><div> <span>{{ prop1 }}</span> <span>{{ prop2 }}</span> <span>{{ prop3 }}</span></div></template><script>export default {props: { prop1: [Object, Array], prop2: Number, prop3: { type: Number, default: 0, required: false, validator(value) { return value >= 0; }, },},};</script>对象模式的props内的每个属性能够进行检测，独自一个值或数组中能够增加类型检测
验证
type：类型查看String，Number，Boolean，Array，Object，Date，Fuction，Symbol，也反对自定义的构造函数，通过instanceof查看default：未接管到数据的默认值required：布尔值，该prop是否必须接管到validator：判断函数，将该prop作为参数传入，进行查看
当不满足条件时会报出正告
1.6 propsData
仅在new创立的实例中应用
2 DOM
- el
- template
- render
- renderError
2.1 el
仅在new创立实例时失效
提供一个在页面上曾经存在的DOM元素作为Vue实例的挂载指标，能够是CSS选择器，也能够是一个HTMLElement实例。
2.2 template
一个字符串作为Vue实例的标识应用。模板将会替换挂载的元素。挂载的元素的内容都将被疏忽，除非模板的内容有散发插槽
如果以#开始，将被用作选择符，并应用匹配的innerHTML作为模板选项中蕴含渲染函数时，该模板将被疏忽
2.3 render
渲染函数，字符串模板的替换计划
接管一个createElement办法作为第一参数用来创立VNode
如果组件是一个函数组件，渲染函数还会接管一个额定的context参数，为没有实例的函数组件提供上下文信息。
选项中存在render函数时，Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取HTML模板编译渲染函数
render(createElement){ return createElement( 'App', { style:{ color:"red", }, }, [ 'text', createElement('h1','头条') ] )}createElemnt能够接管三个参数，第一个必选，后两两个可选
- 参数1：{String | Object | Function}
能够是一个HTML标签名，组件选项对象，或者resolve了上述任何一种的一个async函数 - 参数2：{Objcet}
一个模板中attribute对应的数据对象 - 参数3：{Stirng | Array}
子级虚构节点，由createElement()构建，也能够应用字符串来生成文本虚构节点
2.4 renderError
renderError(h,err)
只在开发者环境下工作，当render函数遭逢谬误时，提供另一种渲染输入。
谬误会作为第二个参数传递到renderError
3 资源
- directives
- filters
- components
3.1 directives
蕴含Vue实例可用指令的哈希表
Vue.directive
//部分注册directives:{ focus:{ inserted(el,binding){ el.focus(); el.value = binding.value } }}3.2 filters
蕴含Vue实例可用过滤器的哈希表
Vue.filter
//部分注册filters:{ upperCase(value){ return value.toUpperCase() }}3.3 components
蕴含Vue实例可用组件的哈希表
Vue.component
//部分注册import Child1 from './components/Child1.vue'components:{ Child1, Child2:{ template:"<h1>衬衫的价格是{{price}}</h1>", data(){ return { price:"九磅十五便士", } } }}4 组合
- parent
- mixins
- extends
- provide/inject
4.1 parent
指定已创立实例的父实例，建设父子关系
子实例能够用this.$parent拜访父实例，
子实例被推入父实例的$children数组中
let vm1 = new Vue({ el: "#root1", data() { return { num: 1, } }, async mounted() { await this.$nextTick() console.log('vm1', this.$children[0].num) },})let vm2 = new Vue({ el: "#root2", data() { return { num: 2 } }, parent: vm1, mounted() { console.log('vm2', this.$parent.num) },})// vm2 1// vm1 2应用CLI时，部分注册的组件能够间接应用this.$parent与$children
4.2 mixins
接管一个混入对象的数组
Vue.mixin
//mixins.jsexport const mixin1 = { created() { console.log(this._uid, "created") },}export const mixin2 = { mounted() { console.log(this._uid, "mounted") },}//main.js 全局注册import { mixin1 } from './mixins'Vue.mixin(mixin1)//子组件 部分注册import { mixin2 } from "../mixins";export default { mixins: [mixin2],};// 0 'created'// 1 'created'// 2 'created'// 2 'mounted'mixin的钩子依照传入程序以此调用，在调用组件本身钩子之前被调用
能够做选项合并，可复用的指令、组件、办法等能够合并到组件的选项中
4.3 extends
扩大组件，能够是选项对象或构造函数
与mixin相似，mixin相当于多继承，extends为单继承
//extends.jsexport const extend = { data() { return { a: "extend" } },}//组件import { extend } from "../extends";export default { extends: extend, data() { return { b: "my", }; }, mounted() { console.log(this.$data); },};//{a:'extentd',b:'my'}4.4 provide/inject
祖组件向子孙后代注入一个依赖
provide: 对象/函数返回对象
inject：字符串数组/对象
注入的数据是非响应式的，能够传入可监听的对象可响应
注入一个对象
//祖组件provide: { bar: "foo",},//子孙组件 inject: ["bar"],//数组接管注入函数，返回一个对象
//祖组件provide(){ return { bar:'foo' }}//子孙组件inject: { grand: { default: "接管失败", from: "bar", },},接管不同名的key时，须要设置from，default能够是一个函数拜访本组件的数据
同名的key，default的值与key雷同即可data与props能够将注入的值作为数据入口
inject: ["bar", "baz"],data() { return { a: this.bar, };},props: { b: { default() { return this.baz; }, },},
5 其余
- name
- delimiters
- functional
- model
- inheritAttrs
- comments
5.1 name
组件名
语义化，便于调试
5.2 delimiters
自定义文本插入分隔符
默认：["{{","}}"]
与Vue.compile一样，只在完整版失效
5.3 functional
是否是函数式组件
无治理任何状态，无箭筒任何传递给它的状态，无生命周期办法，只接管一些prop的函数
这意味着它无状态，没有响应式数据，没有实例(没有this上下文)
函数式组件能够增加render函数选项，render的第二个参数context能够为组件提供上下文
context包含的字段见官网
函数式组件
5.4 model
自定义组件在应用v-model时定制prop和event
{prop:string,event:string}
默认的v-model:{prop:"value",event:"input"}
//自定义组件Vue.component('my-input', { model: { prop: 'uname', event: 'change' }, props: { uname: { type: String, default: 'Tom' }, value:String }, template: '<input type="text" :value="uname" @input="updateVal($event.target.value)">', methods: { updateVal(val) { this.$emit('change', val) } },})//跟实例new Vue({ data() { return { uname: "张三" } },}).$mount("#root1")//html<div id="root1"> <my-checkbox v-model="uname" value="李四"></my-checkbox></div>- 子组件通过props接管v-model的值并传递给model选项中的prop
- 当数据扭转时会触发事件change，传递一个值
- 父组件的v-model就接管到了传出的值，实现双向传递
v-model => props => model => :value @input => $emit => v-model
5.4 inheritAttrs
布尔值 默认为true
默认状况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为一般的 HTML attribute 利用在子组件的根元素上
5.5 comments
布尔值 默认为false
是否保留且渲染模板中的HTML正文
仅在完整版中应用