掌握以下vue2知识后，更有时间摸鱼了，以前2天的工作量，现在半天就搞完

生命周期函数

1.beforeCreate

2.created

3.beforeMounte

4.mounted

数据渲染到页面上，并可以通过dom访问。

5.beforeUpdate

6.updated

7.beforeDestory

断开与子组件的联系，摧毁组件本身。

销毁所有子组件，然后销毁组件本身，最后销毁vue实例。一般当中做一些清理工作。

8.destoryed

常用指令

1. v-model
2. v-bind
3. v-on
4. v-show
5. v-if、v-else-if、v-else
6. v-for 注意：与v-if使用的时候，v-for有更高的优先级
7. v-html
8. v-text
9. v-once
10. 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.父组件传子组件

1. props
2. refs
3. children

2.子组件向父组件通讯

1. $emit('fnName', sth)
2. $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官网

四个重要核心概念：

1. state
2. getter
3. mutations: mutation 必须是 同步函数
4. actions: 提交的是 mutation ，而不是直接变更状态；可以包含任意异步操作
5. 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) {}
}

插槽

1. slot
2. slotScoped

渲染函数

渲染函数与jsx

推荐的前置知识 虚拟dom

render(h, ctx) {
// h相当于createElement(),
// ctx即创建的上下文

}

响应式原理

1. defineProperty

2.对象

this.$set(object, propertyName, value)

3.数组

1. this.$set(object, propertyName, value)
2. this.splice(indexOfItem, 1, newValue)

内置组件

1. component

2. transition

用于单个元素或组件的过渡。 详情见

3. transition-gropu

作为多个元素/组件的过渡效果， 注意：每个 <transition-group> 的子节点必须有独立的 key

4. keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 详情见

keep-alive的2个组件周期函数

1. activated
2. deactivated