Vue备忘笔记

作者:ManfredHu
链接:http://www.manfredhu.com/2018/08/24/32-vue-notes/index.html
声明:版权所有,转载请保留本段信息,谢谢大家

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

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

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

组件生命周期与方法顺序

组件生命周期

vue生命周期

1
2
3
4
5
6
7
8
9
10
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. 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的,对应的就是不同组件的不同功能。

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

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

子组件:

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

最后渲染为:

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

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

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

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

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


Copyright © 2015 - 2019 ManfredHu胡文峰的个人博客

All rights reserved. Designed and powered by ManfredHu.

粤ICP备18133029号