生命周期函数
1.beforeCreate
2.created
3.beforeMounte
4.mounted
数据渲染到页面上,并可以通过dom访问。
5.beforeUpdate
6.updated
7.beforeDestory
断开与子组件的联系,摧毁组件本身。
销毁所有子组件,然后销毁组件本身,最后销毁vue实例。一般当中做一些清理工作。
8.destoryed
常用指令
- v-model
- v-bind
- v-on
- v-show
- v-if、v-else-if、v-else
- v-for
注意:与v-if使用的时候,v-for有更高的优先级
- v-html
- v-text
- v-once
- v-slot
注意,只能绑定在template上。
v-model 实现原理
自定义事件
1.使用场景:作用与 input
标签上
使用方法
model: {
prop: "value",
event: "change"
},
props: {
value: {type: String, default: ""}
}
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
.sync 的实现原理
.sync修饰符
// 子组件
this.$emit('update:title', newTitle)
// 父组件
title.sync="title"
特殊属性
1. is
用于动态组件 用于指定组件, 与component配合使用
// 目录结构
|
|-parts
|--Comp.vue
|-index.vue
// index.vue
<template>
<component is="Comp">
</template>
import Comp from "./parts/Comp.vue";
components: {Com}
2. ref
用于指定组件实例,可以通过 ref
来直接组件实例的属性和触发方法等。
// 子组件 Child.vue
data() {
return {
aaa: "aaa"
}
},
methods: {
getAaa() {
//一些操作
}
}
// 父组件
<template>
<child ref="child">
</template>
mounted() {
this.$refs.child.aaa;
this.$refs.getAaa()
}
组件通讯
1.父组件传子组件
- props
- refs
- children
2.子组件向父组件通讯
- $emit('fnName', sth)
- $parent
3.多层组件通讯
其中provide与injects需要配套使用。
1. provide
// 一般用于父组件,是个函数
provide(): {
return {elForm: this}
},
2. injects
// 一般用于子组件,值可以是对象与数组
// 1.数组
injects: ["elForm"]
// 2.对象
injects: {
elForm: { default: '' }
}
3. eventBus
多个组件在一个vue实例下,就可以通过
4. vuex
vue官网
四个重要核心概念:
- state
- getter
- mutations: mutation 必须是
同步函数
- actions: 提交的是
mutation
,而不是直接变更状态;可以包含任意异步操作
- module: 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。每个模块使用
namespaced: true
来使其变成带有命名空间的模块,各命名默认根据模块注册的路径调整
5. sessionStorage、localStorage、cookies
值得注意的是,两者的存储大小一般为5M
watch与computed
computed
计算属性,依赖其他字段和数据获取;只有依赖项发生变化才会更新
computed: {
sth() {
return this.name + "a"
},
sthB: {
get: function() {
return this.name + "b"
},
set: function(val) {
this.name = val.split(" ")[0]
}
}
}
watch
主动监听某个字段的变化
watch() {
name(val) {
this.aaa = val
},
nameB: function(newVal, oldVal) {},
nameC: {
handler: "methodA",
immediate: true, //收集响应式依赖时,立即执行
deep: true, //深度响应
}
},
methods: {
methodA(val) {}
}
插槽
- slot
- slotScoped
渲染函数
渲染函数与jsx
推荐的前置知识 虚拟dom
render(h, ctx) {
// h相当于createElement(),
// ctx即创建的上下文
}
响应式原理
1. defineProperty
2.对象
this.$set(object, propertyName, value)
3.数组
- this.$set(object, propertyName, value)
- this.splice(indexOfItem, 1, newValue)
内置组件
1. component
2. transition
用于单个元素或组件的过渡。 详情见
3. transition-gropu
作为多个元素/组件的过渡效果,
注意:每个 <transition-group> 的子节点必须有独立的 key
4. keep-alive
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
详情见
keep-alive的2个组件周期函数
- activated
- deactivated