Vue 笔记

Vue备忘笔记 本文主要记录一些比较容易遗忘的知识点,方便后面查阅。如果对你有帮助,那不胜荣幸。

前端变化出的另一个优雅工具

自打部门研发基于 Vue 的适配 H5、小程序、Weex 的多端系统后,因为在深入进行 H5 游戏引擎和游戏物理引擎的开发对 Vue 就没怎么关注。错过了上手的最好时机,现在把这块给补上。

组件生命周期与方法顺序

组件生命周期

vue生命周期

new Vue -> Init Events & Lifecycle ->(1) Init injections & reactivity (2)
    -> no el vm.$mount(el) is called
    -> Has el option
        -> has template option then Compile template into render function
        -> no template option Compile outerHTML as template(整个替换掉)
            -> (3) Create vm.$el and replace (4)
                -> Mouted then (5) Remouted if data changes (6)
                    -> when vm.$destroy() is called (7)
                        -> Teardown watchers,child components and event listeners
                            -> Destroyed (8)

1
2
3
4
5
6
7
8
9
10
11

所以顺序依次是:

  1. beforeCreate
  2. Created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeDestroy
  8. destroyed

方法顺序

Props -> Methods -> Data ->Computed -> Watch

具体可以见这里的源代码

如果有同名属性,一般都会报错。so 这里要注意同名属性的存在。

slot-scope

插槽部分基础文档有说过,如字面意思。你插拔内存,插拔硬盘接口等等。换内存就如同换组件。4G 的、8G 的,对应的就是不同组件的不同功能。

默认的单个插槽(匿名插槽),如下 父组件:

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl">
        <span>菜单1</span>
      </div>
    </child>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10

子组件:

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <slot></slot>
  </div>
</template>
1
2
3
4
5
6

最后渲染为:

<div class="father">
  <h3>这里是父组件</h3>
  <div class="child">
    <h3>这里是子组件</h3>
    <div class="tmpl">
      <span>菜单1</span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9

slot-scope是带有数据的插槽,数据是通常是子元素传入到插槽内的。

<slot slot-scope="xxx">
  //这里可以获取
</slot>
1
2
3

比如子组件异步拉了一个接口,就可以把数据传递给父组件嵌套的组件。 最后渲染为:

<div class="father">
  <h3>这里是父组件</h3>
  <div class="child">
    //这里可以获取到上面传递的数据
  </div>
</div>
1
2
3
4
5
6