Vue实现组件化流程
- Vue提供了一套构建组件的API，用于声明和实现 根组件，可复用组件
- Vue库提供了名为Vue的构造函数，用于初始化Vue实例
- Vue的实例往往是根组件对象，组件在构建时，可以传入配置数据，用于构建组件的基本结构和功能。这种行为叫做Options API（封装实现，传入参数，生成组件）。
-
Options API：
- 通过配置模板参数
template:，填充组件内容，生成有内容的组件 -
app.$mount()指定渲染后的结果（结构）所在的 DOM 结构的位置。vm.$mount()官网解释
- 通过配置模板参数
-
Options API：
let app = new Vue({
template:`<div>hello world</div>`
})
app.$mount('#app')
- 总体步骤：组件-->通过（template）-->DOM-->挂载到页面中指定位置
注意：组件生成的结构（DOM）会
替换掉挂载点元素，所以挂载点不可以是html、body。
组件对数据的处理
- 存储在data对应的对象中。
- 数据必须是一个对象。
let app = new Vue({
template:`<div>hello world</div>`
data:{
name:'xiaoming'
}
})
app.$mount('#app')
- Vue内部会遍历data对象，将data中的值交给Vue实例持有（挂载到实例对象）。
- _开头的属性或方法，不建议访问（JS难实现私有）。$开头的属性或方法，Vue对外提供访问。
组件化规则
- 符合HTML标签命名规则
- 不能与原生HTML标签重名
可复用组件类型
- 全局组件：通过Vue.component 创建，在Vue的任何地方都可访问
-
局部组件：组件的options中有一个选项components，可用来定义组件，可定义多个组件，每个组件就是一个key-value的映射
注： 局部定义组件只能在当前的组件中才能使用，其他地方，包括组件的子级也不能使用。
组件的属性传递
类似给函数定义形参
props: ['name', 'age'],
props谁定义谁修改。遵循单向数据流原则。
子类通过 $emit('change',属性名) 的事件方式通知父类，父类修改属性值
- 组件内部可以通过computed（计算）、watch（监听），动态改变属性的状态
data() {
return {
// 可以访问到props
name:'xiaoming',
age:18
}
}
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组，它们会被逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
非 prop 特性
一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性，这些 props 会被自动添加到组件的根元素上。
替换/合并已有的特性
默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）。
禁用特性继承
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false，我们可以通过组件的 this.$attrs 来获取这些属性。
注意
inheritAttrs: false选项不会影响style和class的绑定。
动态组件
-
component是vue内置的一个组件，它提供一个is属性用来动态渲染不同的组件 - 当组件切换的时候，都会触发组件的销毁和重建。首先，性能不好。其次，会丢失组件状态
keep-alive 组件
- 当在这些组件之间切换的时候，有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
keep-alive是一个内置容器组件， 使用>keep-alive以后，内部包含的组件将增加激活和失活/冻结的状态
使用了 keep-alive 的组件会触发 activated、deactivated 两个生命周期函数
activated
keep-alive 组件激活时调用
deactivated
keep-alive 组件停用时调用
单文件组件
单文件组件把一个组件所包含的 结构、样式、行为、分别通过 template、style、script 进行分离，然后统一组织在一个文件中。
网友评论