关于vue.js:vueVue中的选项

数据
DOM
生命周期钩子
资源
组合
其余

data
props
propsData
methods
watch

Vue 实例的 数据对象

在初始化时，Vue 会递归地把 data 的 property 转换为 getter/setter，可能响应数据变动，以_ 和$结尾的 property 不会被解决

组件中的 data 必须返回一个初始数据对象的 函数 ，如果是一个对象，组件创立的多个实例会 共享援用 这个数据对象。

计算属性对象
函数模式的属性：仅读取
对象模式的属性：通过 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
  },

办法对象
混入到 Vue 实例中，能够间接通过 vm 实例拜访这些办法，或者在指令表达式中应用。办法中的 this 主动绑定为 Vue 实例

设置数据侦测的 对象

函数与字符串模式

 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 observer

handler后跟回调函数，immediate为 true 会立刻执行，deep为 true 能够深度侦测

数组模式

数组里能够应用字符串、函数、对象模式，组合起来应用，它们会 顺次调用，能够设置多个 handler

接管父组件的数据，数组或对象

数组为简略模式

// 父组件
<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 作为参数传入，进行查看
当不满足条件时会报出正告

仅在 new 创立的实例中应用

el
template
render
renderError

仅在 new 创立实例时失效
提供一个在页面上曾经存在的 DOM 元素作为 Vue 实例的挂载指标，能够是 CSS 选择器，也能够是一个 HTMLElement 实例。

一个 字符串 作为 Vue 实例的标识应用。模板将会替换挂载的元素。挂载的元素的内容都将被疏忽，除非模板的内容有散发插槽

如果以 # 开始，将被用作选择符，并应用匹配的 innerHTML 作为模板

选项中蕴含渲染函数时，该模板将被疏忽

渲染函数 ，字符串模板的 替换计划
接管一个 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() 构建，也能够应用字符串来生成 文本虚构节点

renderError(h,err)
只在开发者环境下工作，当 render 函数遭逢谬误时，提供另一种渲染输入。
谬误会作为第二个参数传递到renderError

directives
filters
components

蕴含 Vue 实例可用指令的哈希表
Vue.directive

// 部分注册
directives:{
    focus:{inserted(el,binding){el.focus();
            el.value = binding.value
        }
    }
}

蕴含 Vue 实例可用过滤器的哈希表
Vue.filter

// 部分注册
filters:{upperCase(value){return value.toUpperCase()
    }
}

蕴含 Vue 实例可用组件的哈希表
Vue.component

// 部分注册
import Child1 from './components/Child1.vue'
components:{
    Child1,
    Child2:{template:"<h1> 衬衫的价格是{{price}}</h1>",
        data(){
            return {price:"九磅十五便士",}
        }
    }
}

parent
mixins
extends
provide/inject

指定已创立实例的父实例，建设父子关系
子实例能够用 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

接管一个混入对象的 数组
Vue.mixin

//mixins.js
export 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 的钩子依照传入程序以此调用，在调用组件本身钩子之前被调用
能够做 选项合并，可复用的指令、组件、办法等能够合并到组件的选项中

扩大组件，能够是选项对象或构造函数
与mixin相似，mixin 相当于多继承，extends 为单继承

//extends.js
export 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'}

祖组件向子孙后代 注入 一个依赖
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;},
  },
},

name
delimiters
functional
model
inheritAttrs
comments

组件名
语义化，便于调试

自定义文本插入分隔符
默认：["{{","}}"]

与 Vue.compile 一样，只在完整版失效

是否是 函数式组件

无治理任何状态，无箭筒任何传递给它的状态，无生命周期办法，只接管一些 prop 的函数
这意味着它无状态，没有 响应式数据 ，没有实例(没有this 上下文)

函数式组件能够增加 render 函数选项，render 的第二个参数 context 能够为组件提供上下文
context 包含的字段见官网
函数式组件

自定义组件在应用 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

布尔值默认为 true
默认状况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为一般的 HTML attribute 利用在子组件的根元素上

布尔值默认为 false
是否保留且渲染模板中的 HTML 正文

仅在完整版中应用

关于vue.js:vueVue中的选项

Vue 中的选项

1 数据

1.1 data

1.2 computed

1.3 methods

1.4 watch

1.5 props

1.6 propsData

2 DOM

2.1 el

2.2 template

2.3 render

2.4 renderError

3 资源

3.1 directives

3.2 filters

3.3 components

4 组合

4.1 parent

4.2 mixins

4.3 extends

4.4 provide/inject

5 其余

5.1 name

5.2 delimiters

5.3 functional

5.4 model

5.4 inheritAttrs

5.5 comments