# vuejs-demo

**Repository Path**: antonytu/vuejs-demo

## Basic Information

- **Project Name**: vuejs-demo
- **Description**: 采用vue-cli3.x布署，使用vuex，vue-router，mockjs及localStorage模拟数据库，vue自定义指令，过滤器，路由导航守卫等
- **Primary Language**: JavaScript
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2019-09-04
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-cli

- 安装
  - 命令

    ```js
        npm install -g @vue/cli

        // 快速原型开发，针对单个*.vue文件
        npm install -g @vue/cli-service-global
    ```

  - vue-cli组成
    - cli
      - @vue/cli
    - cli服务
      - @vue/cli-service
      - 该服务构建在webpack和webpack-dev-server之上
      - vue-cli-service命令，提供serve，build,inspect命令
    - cli插件

- 其它注意项
  - *vue的scope属性在vue2.5+之后已被废弃，变更为slot-scope*
  - dist 目录需要启动一个 HTTP 服务器来访问 (除非已经将 publicPath 配置为了一个相对的值)
    - `npm install -g serve` 使用node.js静态文件服务器
    - `serve -s dist`
  - vue默认配置的是runtime版本来构建
    - **运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项**
    - 如若使用template选项，webpack配置应如下所示

      ```js
           resolve: {
            alias: {
                'vue': 'vue/dist/vue.js',
                '@': path.join(__dirname, 'src'),
            }
          }
      ```

    - vue模式(运行时模式体积更少)
      - compiler模式  指向 "vue/dist/vue.esm.js",支持template选项
      - runtime 模式，指向 "dist/vue.runtime.common.js",仅支持render选项

- nrm包简介
  - 一个管理npm源的工具包
  - `nrm ls` 查看源
  - `nrm use taobao`切换到淘宝源（本地）

- 配置文件`vue.config.js`
  - 代理`devServer.proxy`
    - 应用场景 前端应用和后端 API 服务器没有运行在同一个主机上
- vue-cli指南
  - 浏览器兼容性 browserslist及polyfill
    - `@vue/babel-preset-app`
    - `@babel/preset-env`
  - Html和静态资源
  - CSS相关
  - webpack相关
  - 环境变量和模式
  - 构建目标
  - 部署

## Vue

- Vue指令
  - 注册指令
    - 全局自定义指令 `Vue.directive('focus',{..})`
    - 注册一个局部指令
      - `directives: { focus:...}`
  - 模板中使用指令
    - `<input v-focus>`
- 指令钩子函数
  - 指令定义对象提供可选钩子
    - `bind`：**初始化**只调用一次，指令第一次绑定到元素时调用,
    - `inserted`：被绑定元素插入父节点时调用
    - `update`：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
    - `componentUpdated`：指令所在组件的 VNode 及其子 VNode 全部更新后调用
    - `unbind`：**指令与元素解绑时调用**,只调用一次
- 钩子函数参数
  - `el`：指令所绑定的元素，可以用来直接操作 DOM
  - `binding`：一个对象，包含以下属性
    - `name`：指令名，不包括 v- 前缀
    - `value`：指令的绑定值，指令等号右则的js表达式
    - `oldValue`：指令绑定的前一个值，仅在update相关的钩子函数中有用
    - `expression`：字符串形式的指令表达式，指令等号右侧的字符串表达式
    - `arg`：传给指令的参数，可选，指令等号左侧以:间隔的参数
    - `modifiers`：一个包含修饰符的对象，指令等号左侧以.间隔的参数
    - 示例
      - `div id="hook-arguments-example" v-demo:foo.a.b="message"></div>`
        - name:"demo"
        - value: message这个js所指向的js变量的值
        - expression: 代表message本身
        - arg："foo"
        - modifiers:{"a":true,"b":true}
  - `vnode`：Vue 编译生成的虚拟节点
  - `oldVnode`：上一个虚拟节点
  - 指令支持函数简写的形式
- vue指令特点
  - 初始化时添加取消事件监听器
  - 变更时处理事件逻辑
  - 推荐使用箭头函数绑定,绑定时的this指向
  - 指令编辑范围内使用原生js与元素交互

- Vue插件
  - 应用场景
    - 为Vue添加全局功能。
      - 添加全局方法或者属性
      - 添加全局资源
      - 通过全局 mixin 方法添加一些组件选项
      - 添加 Vue 实例方法
      - 一个库，提供自己的 API
  - 使用
    - 全局方法`Vue.use()`使用插件，实质调用 `MyPlugin.install(Vue)`
  - Vue插件开发
    - Vue.js 的插件有一个公开方法 `install`
      - 该方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
    - 简述
      - 有install方法的一个对象，该方法接收Vue构造器作为默认参数
- Vue过滤器
  - 通常有全局或组件级别的局部过滤器
  - 过滤器支持管道操作`|`
  - 应用场景
    - 双花括号插值和`v-bind` 表达式 (后者从 2.1.0+ 开始支持)

- js技巧
  - **支持以html字符串创建文档片段节点**

    ```js
        const tpl = `<span class="help-block"></span>`
        // 通过字符串文本的形式创建js片段代码，生成节点插入文档
        const fragment = document.createRange().createContextualFragment(tpl)
        parentElement.appendChild(fragment)

        // 生成随机数组
        captcha = [...Array(num)].map(() => letters[Math.floor(Math.random() * letters.length)])

        //vue2.3+ update:myPropName触发事件，对组件prop为show的属性进行“双向绑定”赋值为false
        this.$emit("update:show", false);

        // 使用对象展开运算符混入 moreActions
        ...moreActions

        // for...in 迭代对象时，会将原型上的列出
        // for ...of 迭代对象时，只会枚举出当前对象属性变量
        // mockjs时将用户数据与测试数据区分
    ```

  - js正则
    - `\w`查找单词字符
    - `?=n` 匹配任何其后紧接指定字符串 n 的字符串
    - `?!n` 匹配任何其后没有紧接指定字符串 n 的字符串
  
  - `localStorage`本地存储(Web Storage API)
    - 其存储的数据能在跨浏览器会话保留，数据可以长期保留
    - 当页面被关闭时，存储在 `sessionStorage` 的数据会被清除
    - localStorage 中的键值对总是以字符串的形式存储
    - localStorage 还是 sessionStorage ，它们都特定于页面的协议
    - 属性方法
      - Storage.length
      - Storage.key()，Storage.getItem()，Storage.setItem()，Storage.clear()
  - js方法
    - `Object.entries()`方法返回一个给定对象自身可枚举属性的键值对数组，但不枚举原型链中的属性
    - `git commit --amend` 修改最后一次提交信息
    - `checkbox` 使用数组响应式数据
    - `Element.scrollIntoView()` 方法让当前的元素滚动到浏览器窗口的可视区域内
    - `some()` 方法测试是否至少有一个元素通过由提供的函数实现的测试
    - `Node.contains()` 返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点
    - `reduce()` 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
      - 可充当功能型函数pipe管道,reducer 函数接收4个参数:
        - Accumulator (acc) (累计器)
        - Current Value (cur) (当前值)
        - Current Index (idx) (当前索引)
        - Source Array (src) (源数组)
      - pipe 处理累计值与当前值的reducer函数，即它描述了上次累计之果与本次迭代之值如何处理，由reduce函数内部回调。

- Vue 异步执行 DOM 更新
  - 只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变
  - 在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback)
  - `vm.msg = 'Hello'`该组件不会立即重新渲染，当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新
  - `Hyperscript` 它本身表示的是"生成HTML结构的脚本"
- Vue渲染
  - `vm.$mount( [elementOrSelector] )`
    - **存在template选项，编译模板放进渲染函数**
    - **不存在，则在文档之外渲染成html元素，作为模板，等待挂载**
  - `lazy`:使用了这个修饰符将会从“input事件”变成change事件进行同步
  - 监听 `$route` 来响应路由参数的变化
  - 使用组件内的守卫 beforeRouteLeave
  - 使用 getters 通常是用来派生一些新的状态
- Vue模板
  - 其实质是一套定义组件接口的描述
  - Dom，树以及虚拟Dom
    - 当浏览器读到这些html代码时，它会建立一个“DOM 节点”树来保持追踪
    - 虚拟Dom对创建真实Dom的描述

- 浏览器渲染过程
  1. 解析HTML生成DOM树。
  2. 解析CSS生成CSSOM规则树。
  3. 将DOM树与CSSOM规则树合并在一起生成渲染树。
  4. 遍历渲染树开始布局，计算每个节点的位置大小信息。
  5. 将渲染树每个节点绘制到屏幕。
- `script`
  - 当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM
- `reflow`(回流）`与repaint`（重绘)
  - `repaint`
    - 当一个元素的外观的可见性visibility发生改变的时候，重绘(repaint)也随之发生，但是不影响布局
  - `reflow`
    - 目的：为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程
    - **元素的尺寸或位置发生了改变，导致需要重新计算并验证渲染树**
    - 一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流。
  - 不同的隐藏区别
    - `display:none` 会触发`reflow`
    - `visibility: hidden` 语义隐藏元素，仍然占置着布局空间，只会触发repaint
    - 示意
      - 在某些情况下，修改元素的样式，浏览器并不会立即reflow或repaint
      - 会缓冲在某一时间点，做一次增量异步reflow
  - 避免回流或将其对性能的影响降到最低
    - 尽可能在DOM树的最末端改变class
    - 避免设置多层内联样式
    - 动画效果应用到position属性为absolute或fixed的元素上
    - 牺牲平滑度换取速度
    - 避免使用table布局
    - 避免使用CSS的JavaScript表达式
    - 减少不必要的Dom深度