Vue 知识点

[fangmd]

Vue 组件生命周期

beforeCreate: 对象初始化，还不能访问到 data, computed, watch, methods
created: 对象创建完成，能访问到 data, computed, watch, methods，不能访问$el,$ref。可以执行网络请求，页面初始化, 不适合处理大量内容会导致白屏时间过长。
beforeMount: 模版还没有挂载
mounted: 模版挂载后，可以处理DOM，$ref。网络请求，获取VNode信息和操作，不是所有子组件都挂载了，如果需要处理 dom 可以用 $nextTick
beforeUpdate: 数据更新，响应式触发的时候
updated
beforeDestroy: 对象销毁前，接触绑定的全局事件，销毁定时器
destroyed

挂载：子组件挂载完成后，父组件才会挂载。

[fangmd]

常用指令

1. v-bind, :, 绑定 data 数据
2. v-if, v-else, v-else-if
3. v-for
4. v-on, @ 绑定事件
5. v-model: input 绑定 data 数据， 修饰符：.lazy, .number, .trim
6. v-show
7. v-once

[fangmd]

计算属性 Compute 与 method/data/watch 区别

计算属性：结果基于属性值，有缓存比方法更好(在相关值没有改变的时候， 不需要计算直接返回)，不基于属性的计算不要使用这个函数

[fangmd]

vue-router

核心：更新视图但是不重新请求页面

实现单页跳转有三种方式:

1. hash 模式， 默认

# 页面定位方式，这种修改服务器端完全不会去处理。

# 后面的地址修改后，在游览器历史记录里面增加一个记录，根据不通的锚点值改变渲染结果

2. history 模式

基于 HTML5 History API 实现。

这种方式需要后端配合。(后端对 url 做处理，如果没有对应的处理类，就返回 index.html)

也可以通过 nginx 实现

3. abstract 模式

这种模式不依赖于游览器的历史记录管理页面栈。

weex 环境下会强制使用这种模式。

[fangmd]

vuex

state: 提供一个响应数据
getter: 借助vue的计算属性computed实现缓存, state 中的计算属性， 通过属性访问 store.getters.xxxx 通过方法访问 store.getters.xxx(xx), 不会缓存结果
mutation: 更改state方法; 修改 store 中的状态的唯一方法是提交 mutation。store.commit('xxx')
action: 触发 mutation 方法; 可以包含异步操作，类似 mutation. `store.dispatch(xxx)`
module: Vue.set 动态添加到 state 到响应式数据中

[fangmd]

修改第三方组件样式

样式穿透

  ::v-deep .el-table__header-wrapper {
    // position: sticky;
    // top: 0;
    // height: calc(100% - 60px) !important;
  }

/deep/ .el-cascader__search-input {
  margin: 2px 0 2px 6px;
}

scss :

        ::v-deep .item-project-name {
          display: inline-block;
          height: 20px;
        }