Vue 开发实录

2022-10-25 16:11:53 浏览数 (2)

Vue 开发实录

  • 一、常用关键字的理解
    • 1. var、let 和 const 的区别
    • 2. import 和 require 的区别
    • 3. 组件通信
      • 通信方式
      • Vuex
    • 4. 其他知识
  • 二、JS 的理解
    • 1. 文件
  • 三、CSS 的理解
    • 1. 比例排列
    • 1. cursour-pointer
  • 四、功能组件的理解
    • 1. Draggable 拖动
  • 五、VUE 的理解
    • 1.路由
    • 2. this.$options

一、常用关键字的理解

1. var、let 和 const 的区别

  • var var 是最初的定义变量的关键字，具备如下的缺陷： （1）JS 没有块级作用域，在 JS 函数中的 var 声明，其作用域是函数体的全部。 （2）循环内变量过度共享，引用的是同一个变量的结果。
代码语言：javascript复制
// 输出为3，3，3，并非0，1，2
for (var i = 0; i < 3; i  ) {
      setTimeout(function () {
        console.log(i)
      }, 1000);
 }
  • let （1）let声明的变量拥有块级作用域。 （2）let声明的全局变量不是全局对象的属性，不可通过window.变量名的方式访问这些变量。 （3）形如 for (let x...) 的循环在每次迭代时都为x创建新的绑定。 （4）必须先声明后使用，且不能重复定义。
  • const 用来定义常量的，不可声明不赋值、重复定义、重新赋值等。

2. import 和 require 的区别

  1. CommonJS（require）还是 ES6 Module（import）输出都可以看成是一个具备多个属性或者方法的对象；
  2. default 是 ES6 Module 所独有的关键字，export default fs 输出默认的接口对象，import fs from 'fs' 可直接导入这个对象；
  3. ES6 Module 中导入模块的属性或者方法是强绑定的，包括基础类型；而 CommonJS 则是普通的值传递或者引用传递。
  4. 对于第三点的理解：

3. 组件通信

代码语言：javascript复制
原则：项目比较大时采用Vuex来管理状态，$parent、$children和ref不能在跨域兄弟组件之间通信

通信方式

参考博客1 （1）父子组件通信：props和emit，节制的使用 parent

emit和 on实现任意组件之间的通信，通过一个类似APP.vue作为事件中心（可以自定义个空组件asserts/bus/bus.js）。

代码语言：javascript复制
// 将bus定义在全局，使用this.$bus.$emit/on来使用
var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);

踩坑

代码语言：javascript复制
需求：实现两个组件AB之间的数据通信，在页面A点击操作后跳转到页面B，需要将页面A中的数据携带到页面B中去。
问题：直接使用$emit和$on监听不到事件。

解决：结合组件的生命周期，当A触发emit事件时，B还没有生成。
1. 从A页面跳转到B发生了什么？
首先是B组件created，然后beforeMounted，接着A组件brforeDestory和destoryed，B组件再执行mounted。所以$on不能放在B组件的mounted，而$emit可以放在A组件的beforeDestory。
2. $on事件不会自动销毁，需要手动销毁，放在beforeDestory里。
3. 这样的方式可以传递参数，但是页面一旦刷新，数据也会消失，如果需要将传递的数据持久化，可以采用vuex。

Vuex

  1. 定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  2. 概念 Vuex的核心是 store（仓库），改变store中的状态只能通过显示地提交mutation，方便跟踪状态的变化。 mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。还有mapActions、mapMutations
  3. Mutation mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)，且mutation 必须是同步函数。
  4. Action Action 提交的是 mutation，而不是直接变更状态；可以包含任意异步操作。store.dispatch分发，局部状态通过 context.state 暴露出来。
  5. Module Vuex 允许我们将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
代码语言：javascript复制
const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

// 推荐项目结构
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

4. 其他知识

（1）Mixins（混入）：一种分发Vue组件中可复用功能的灵活方式。

（2）Promise对象：

理解：承诺将来会执行”的对象在JavaScript中称为Promise对象。

优势：在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了。

setTimeout可以看成一个模拟网络等异步执行的函数。

代码语言：javascript复制
// 1. 异步任务并行执行用promise.all()
// 同时执行p1和p2，并在它们都完成后执行then
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

// 2. 异步任务容错执行用promise.race()
// 同时执行p1和p2，第一个完成后立即执行then
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

二、JS 的理解

1. 文件

JS 文件对象详解

三、CSS 的理解

1. 比例排列

Flex 布局

1. cursour-pointer

cursor-pointer 属性用来控制鼠标悬停的图形。

四、功能组件的理解

1. Draggable 拖动

Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件

参考博客

五、VUE 的理解

1.路由

路由跳转的三种方式

代码语言：javascript复制
1.使用 path 来匹配路由，其后添加 /:id 来对应 $router.push 中 path 携带的参数。（/path/xx）
2.通过路由属性中的 name 来确定匹配的路由，通过 params 来传递参数。（/path/xx）
3.使用 path 来匹配路由，然后通过query来传递参数。（/path?id=xx）

2. this.$options

vue组件可以通过 this.$options对象获取你编写的任何方法。

需要注意的是 data/mounted/methods 都是方法的形式

import module store var vuex

0 人点赞