共计 5854 个字符,预计需要花费 15 分钟才能阅读完成。
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 observer
handler
后跟回调函数,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.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 的钩子依照传入程序以此调用,在调用组件本身钩子之前被调用
能够做选项合并
,可复用的指令、组件、办法等能够合并到组件的选项中
4.3 extends
扩大组件,能够是选项对象或构造函数
与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'}
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 正文
仅在完整版中应用