我的创作纪念日三年收获和感悟

机缘

我刚开始接触创作也是最近几年开始，当初就是希望自己的收获分享给大家，不仅使自己成长，也可以带着大家一起成长，独乐乐不如众乐乐，人都是自私的以前我都是看到好的知识文章都是自己藏起来，发现收获的东西越来越多但是没法释放，后来朋友教导我学会分享，分享自己的收获，分享自己的所知所行，才会有越来越多的人与自己链接，爱才会发生。人们生活在一个自我中心的世界里，这会感觉到痛苦，因为人生中所有伟大的幸福只有当你不自私不贪婪，当你愿意分享时才会出现。
转眼间我的博客已经有九年时间里，九年前我还是对我的很模糊，感觉人生没有方向迷茫，不知道自己该干什么，不知道自己想要啥，对自己的未来毫无规划，那时候还在写着生活的笔记，翻看八九年前的过往笔记，看到那时候自己胡思乱想的样子可真可爱啊，有的时候就是我们勤于思索，我们人生就会充满太多的疑惑，我们甚至难以走出而迷茫，所以不要焦虑过好当下才是最重要的。

实战项目中的经验分享

在学习vue做项目中我也是看见一堆代码一脸懵，学习最快的方式就是实践，根据官网多写几个例子是掌握vue最快的方式，接下来我就总结开发vue项目的一些实践经验

1. vue生命周期的应用
   

以上是vue官网上的生命周期的方法，大致划分一下分为创建前/后，挂载前/后，更新前/后，销毁前/后这四个阶段。各个阶段的状态总结如下：

beforeCreate： 在beforeCreate生命周期执行时，data和methods中的数据还未初始化，所以此时不能使用data中的数据和methods中的方法
created： data 和 methods初始化完毕，此时可以使用methods 中的方法和data 中的数据
beforeMount： template模版已经编译好，但还未挂载到页面，此时页面还是上一个状态
mounted： 此时Vue实例初始化完成了，DOM挂载完毕，可以直接操作dom或者使用第三发dom库
beforeUpdate： 此时data已更新，但还未同步页面
updated： data和页面都已经更新完成
beforeDestory： Vue实例进入销毁阶段，但所有的 data 和 methods ，指令， 过滤器等都处于可用状态
destroyed： 此时组件已经被销毁，data，methods等都不可用

1.2 vue常用修饰符及作用：

1. 事件修饰符

• stop 阻止事件冒泡
• .prevent 阻止事件默认行为
• .self 事件绑定的元素本身触发时才触发回调
• .once 事件只能触发一次，第二次就不会触发了
• .native 将一个vue组件变成一个普通的html，使其可以监听click等原生事件，具体使用如下：

<button @click.native="handleClick">ok</button>
1

2. 表单修饰符

• .lazy 在输入框输入完内容，光标离开时才更新试图
• .trim 过滤首尾空格
• .number 如果想输入数字，那它就会限制你输入的只能是数字，那就相当于没有加.number

<input type="text" v-model.trim="value">
1

3. vuex的几种属性和作用，以及使用vuex的基本模式

state的改变完全由mutations控制， 我们也没必要任何项目都使用vuex，对于中大型复杂项目而言，需要共享的状态很多时，使用vuex才是最佳的选择。接下来我将详细介绍各api的概念和作用。

• state 单一状态树，用一个对象就包含了全部的应用层级状态，并且作为一个唯一数据源而存在
• getters 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算 比如如下案例：
• Mutation 更改 Vuex 的 store 中的状态的唯一方法，使用案例如下：

const store = new Vuex.Store({
  state: {
    num: 1
  },
  mutations: {
    add (state) {
      // 变更状态
      state.num++
    }
  }
})

// 在项目中使用mutation
store.commit('add')
// 添加额外参数
store.commit('add', 10)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• Action Action 提交的是mutation，而不是直接变更状态，可以包含任意异步操作，具体用法如下：

const store = new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    add (state) {
      state.num++
    }
  },
  actions: {
    add (context) {
      context.commit('add')
    },
    asyncAdd ({ commit }) {
    setTimeout(() => {
      commit('add')
    }
  }
})
// 分发action
store.dispatch('add')
// 异步action
store.dispatch('asyncAdd')
// 异步传参
store.dispatch('asyncAdd', { num: 10 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

• Moudule 将store分割成模块（module）。每个模块拥有自已的state、mutation、action、getter、甚至是嵌套子模块；

对宏任务和微任务的理解
JS的整个执行过程，我们称为事件循环过程，这个过程中涉及执行栈和两个任务队列：宏任务、微任务。

宏任务包括：

1、script整体代码

2、setTimeout、setInterval

3、node环境的setImmediate

4、输入输出和UI render

微任务包括：

1、node环境的process.nextTick

2、Promise的回调函数

3、MutationObserver的回调

4、await后面的代码

执行过程：执行宏任务，执行该宏任务产生的微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。

解决过的代码

setTimeout(function() {
    console.log(1)
});
new Promise(resolve = >{
    resolve();
}).then(() = >{
    new Promise(resolve = >{
        resolve();
    }).then(() = >{
        console.log(2);
    }).then(() = >{
        console.log(3);
    });
}).then(() = >{
    new Promise((resolve = >{
        resolve()
    })).then(() = >{
        new Promise((resolve) = >{
            resolve()
        }).then(() = >{
            console.log(4)
        }).then(() = >{
            console.log(5)
        })
    }).then(() = >{
        console.log(6);
    })
}).then(() = >{
    console.log(7);
}) setTimeout(function() {
    console.log(8)
});

// 错误2 3 4 5  6 7 1 8
// 正确2、3、7、4、6、5、1、8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

日常

平时利用闲暇时间进行创作，其实写作最难的就是持续创作了，或者是懒惰，或者是拖延，或者是遇到了瓶颈，最终成功与否很大程度在与是否坚持，坚持才是最困难的，要努力克服