vue2.x查漏补缺

全局api

Vue.compile( template )

在 render 函数中编译模板字符串。只在独立构建时有效

选项/dom

template

字符串模板,会 替换 挂载的元素,其内容都将被忽略，除非模板的内容有分发插槽

rander

 Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

选项/生命周期

父子组件生命周期

总结父亲开始，子先结束，父亲再结束

一、加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

注：由于父元素的template模板嵌套了子元素，所以编译器最先读进去的是根元素（也就是全局Vue实例被绑定的DOM元素内容）的编译模板，编译时是一层一层递归进子模板

所以，Vue里面，数据的周期和DOM对象周期是分离开的，数据先被初始化，然后通过el和template的判断，选择编译模板，在beforeMount后才生成DOM元素挂载到对应位置。直到mounted的时候，才算是数据和DOM对象都完成了初始化。

二、组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

三、销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

选项/资源

directives

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

或

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
 bind: function () {},
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  },
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

选项/组合

provide / inject

provide / inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

父组件中提供
  provide() {
    return {
      map_nodeObj: { map_node: this.obj }
      // 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
    }
  },

子组件中引入
  inject: {
    map_nodeObj: {
      default: () => {
        return {map_node: '0'}
      }
    }
  },
使用： this.map_nodeObj.map_node

在created阶段$el还未生成，在这先处理privide的逻辑，子孙组件才可以取到inject的值

实例属性

$attrs

继承所有的父组件属性（除了prop传递的属性、class 和 style ）

inheritAttrs：

默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承

$listeners

它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

适用场景：

组件传值，尤其是祖孙组件有跨度的传值。

<father @getDataList ="getDataList"  :yes="123">
    <son v-on="$listeners" v-bind="$attrs">
        <grandson @click="doClick">
        </grandson>
    </son>
</father>
<!-- 通过v-bind 绑定$attrs属性，grandson组件可以直接获取到father组件中传递下来的props（除了B组件中props声明的） -->
//在grandson组件中,可以直接调用father组件的getDataList这个方法
export default {
  name: 'index',
  props: ['yes'],
  inheritAttrs: false,
  methods: {
    doClick(data) {
      console.log(this.yes) //    123, father组件中传递下来的props（son中props声明过的除外）
      this.$emit('getListData', data)
    }
  }
}
//  inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在
//  子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承

指令

v-html:

更新元素的 innerHTML,内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译
注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上

v-pre：跳过这个元素和它的子元素的编译过程

key:

就地复用
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，
而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

v-model:

.lazy - //取代 input 监听 change 事件
.number - //输入字符串转为有效的数字
.trim - //输入首尾空格过滤

示例

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

v-on--@

.stop - 调用 event.stopPropagation()。 (停止冒泡 )
.prevent - 调用 event.preventDefault()。(阻止默认行为)(@click.stop.prevent)
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。(@keyup.enter)
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

实例方法/生命周期

vm.$mount()   

手动地挂载一个未挂载的实例

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app') ==new MyComponent({ el: '#app' })
// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

vm.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

vm.$nextTick( [callback] )

将回调延迟到下次 DOM 更新循环之后执行

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})

vm.$destroy() 

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

内置组件

keep-alive：保留组件状态或避免重新渲染

transition-group：用法与transition类似

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

transition: 元素/组件过渡，只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素。

示例1：

 <transition name="fade">
    <p v-if="show">hello</p>
  </transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

过渡的类名

示例2：

 <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>

methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }

注：根据vue2.x的文档内容，记录相关知识点,方便查找，上述例子大部分来源于文档