【Vue 2.X】学习笔记

[Meqn]

No description provided.

[Meqn]

Vue

• Vue  源码详细解析
• Vue  源码详解
• Vue 组件间通信方式完整版
• vue组件间通信六种方式（完整版）

[Meqn]

vue-router

[Meqn]

vuex

[Meqn]

精选文章

• Vue -渐进式JavaScript框架 🔥🔥🔥🔥🔥
• Vue采用虚拟DOM的目的是什么?
• Virtual DOM 背后的秘密（Diff 篇）
• Virtual DOM 背后的秘密（DOM 篇）
• 问起Vue的原理时不要再只说defineProperty了
• 深入框架本源系列 —— Virtual Dom
• 揭秘Vue中的Virtual Dom
• Vue计算属性和侦听属性
• 详解vue组件三大核心概念

---

• 关于Vue/Router/Vuex源码分析

[Meqn]

vue 经验分享

• Vue.js 组件编码规范 \
• 7个有用的Vue开发技巧

[Meqn]

vue-router精选

vue-router实现原理 (muwoo)

• 前端路由简介以及vue-router实现原理
• vue-router 实现 -- install
• vue-router 实现 -- new VueRouter(options)
• vue-router 实现 -- HashHistory
• vue-router 实现 -- HTML5History
• vue-router 实现 -- 路由变更监听

[Meqn]

Vue 开发规范

[TOC]

结构化规范

目录文件夹及子文件规范

MyProject                      // 项目目录
├── build                      // 构建相关
├── src                        // 源代码
│   ├── api                    // 接口，统一管理
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filters                // 全局过滤器
│   ├── icons                  // 项目所有 svg icons
│   ├── libs                   // 引用的库或自己封装的库
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由，统一管理
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                  // 视图目录
│   ├──  ├── userCenter
│   ├──  ├──  ├── index.vue		// 模块入口页面
│   ├──  ├──  ├── components	// 模块通用组件文件夹
│   ├──  ├── ...
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── public                     // 第三方不打包资源
├── .babelrc                   // babel-loader 配置
├── .eslintrc.js               // eslint 配置项
├── .browserslistrc            
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
└── package.json               // package.json

组件规范

组件选项顺序

• 1. 全局感知 name
• 2. 模版依赖 components 、 directives 、 filters
• 3. 组合 mixins
• 4. 数据 props 、data 、computed
• 5. 事件：监听器 watch
• 6. 事件：生命周期钩子 、路由守卫
• 7. 方法 methods
• 8. 渲染 render

<template>
  <div>
    // 内容
  </div>
</template>

<script>
export default {
  // 组件名
  name: 'MyComponent',
  components: {
    // 组件
  },
  directives: {
    // 指令
  },
  filters: {
    // 过滤器
  },
  mixins: [
    // 混合
  ],
  props: {
    // 属性
  },
  data: {
    // 本地状态
  },
  computed: {
    // 计算属性
  },
  watch: {
    // 侦听器
  }

  // 生命周期函数
  beforeCreate () {
    // 创建前
  },
  created () {
    // 创建后
  },
  beforeMount () {
    // 挂载前
  },
  mounted () {
    // 挂载后
  },
  beforeUpdate () {
    // 更新前
  },
  updated () {
    // 更新后
  },
  activated () {
    // 激活时
  },
  deactivated () {
    // 停用时
  },
  beforeDestroy () {
    // 销毁前
  },
  destroyed () {
    // 销毁后
  },

  methods: {
    // 方法
  },
  render () {
    // 渲染
  }
}
</script>

<style lang="scss" scoped>
.component {
  //
}
</style>

避免 v-if 和v-for 在一起

<ul v-if="users.length > 0">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

命名规范

官方文档推荐及使用遵循规则：

PascalCase (单词首字母大写命名)是最通用的声明约定
kebab-case (短横线分隔命名) 是最通用的使用约定

• 组件名应该始终是多个单词的，根组件 App 除外，且是有意义的名词、简短、具有可读性

• 命名遵循 PascalCase 约定

  比如 TodoList

• 使用遵循 kebab-case 约定

  在页面中使用组件需要前后闭合，并以短线分隔，如 <todo-list></todo-list>

• 导入及注册组件时，遵循 PascalCase 约定

• 同时还需要注意：必须符合自定义元素规范，切勿使用保留字。

单文件组件命名

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

且组件名紧密耦合

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue


components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue

组件name

组件名始终多个单词，且PascalCase命名

export default {
  name: 'TodoItem'
}

组件 component名

<template>
  <todo-item>Todo</todo-item>
</template>

<script>
import TodoItem from '@/components/TodoItem.vue'
export default {
  components: {
    TodoItem
  }
}
</script>

组件Props

1. 组件Props 命名

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case

<!-- 命名时 -->
<script>
props: {
  greetingText: String
}
</script>

<!-- 使用时 -->
<welcome-message greeting-text="hi"></welcome-message>

2. 组件Props 顺序

标签的 Props 应该有统一的顺序，依次为指令、属性和事件。

<my-component
  v-if="if"
  v-show="show"
  v-model="value"
  ref="ref"
  :key="key"
  :text="text"
  @input="onInput"
  @change="onChange"
/>

3. 组件Props 换行

超过3个 Props 的元素应该分多行撰写，每个 Props 一行，闭合标签单起一行。

<!-- 较少属性 -->
<my-component v-show="isShow" class="comp-example" />

<!-- 多个属性 -->
<my-component
 v-if="isShow"
 v-model="value"
 ref="ref"
 :text="text"
 @change="onChange">
 这里是内容区域...
</my-component>

私有属性名

在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

method 命名规范

• 驼峰式命名，统一使用动词或者动词+名词形式

  handleClickTodo、openTodoInfoDialog
  

• 请求数据方法，以 data 结尾

  getTodoListData、postFormData
  

附： 函数方法常用的动词

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

[Meqn]

路由动态过渡

<template>
  <transition :name="transitionName">
    <router-view class="root-router-view" />
  </transition>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      transitionName: 'route-left'
    }
  },
  beforeRouteEnter(to, from, next) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    const transitionName = toDepth < fromDepth ? 'route-right' : 'route-left'
    next(vm => {
      vm.transitionName = transitionName
    })
  }
}
</script>

<style>
.root-router-view{
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.route-left-enter,
.route-right-leave-active {
  transform: translate3d(100%, 0, 0);
}
.route-left-leave-active,
.route-right-enter {
  transform: translate3d(-100%, 0, 0);
}
.route-left-enter-active,
.route-left-leave-active,
.route-right-enter-active,
.route-right-leave-active {
  transition: transform 0.4s ease;
}

</style>

[Meqn]

组件中注册动态vuex模块

参考：

• Allow function to be passed as namespace argument for mapState, mapGetters, mapMutations & mapActions vuejs/vuex#863
• https://www.coder.work/article/1327567

// user store.js
export const NAMESPACE = '__USER'

const store = {
  namespaced: true,
  state: {
    user: null
  },
  getters: {
    name(state) {
      return (state.user && state.user.name) || ''
    }
  },
  mutations: {
    SET_USER(state, value) {
      state.user = value
    }
  },
  actions: {
    async queryUser({ commit }) {
      const res = await fetch('/api/users/110')
      commit('SET_USER', res.data)
      return res
    }
  }
}

export default {
  install(ctx) {
    if (ctx.$store.state[NAMESPACE]) {
      return console.log(`${NAMESPACE} has been installed`)
    }
    ctx.$store.registerModule(NAMESPACE, store)
  },
  uninstall(ctx) {
    if (ctx.$store.state[NAMESPACE]) {
      ctx.$store.unregisterModule(NAMESPACE)
    }
  }
}

例子

// user.vue
import Store, { NAMESPACE } from './store'
export default {
  computed: {
    user() {
      return this.$store.state[NAMESPACE].user
    },
    username() {
      return this.$store.getters[NAMESPACE].name
    }
  },
  beforeCreate() {
    Store.install(this)

    this.$once('hook:beforeDestroy', () => {
      Store.uninstall(this)
    })
  },
  methods: {
    getUser() {
      this.$store.dispatch(NAMESPACE + '/queryUser')
    }
  }
}