Vue 开发实录
一、常用关键字的理解
1. var、let 和 const 的区别
- var
var 是最初的定义变量的关键字,具备如下的缺陷:
(1)JS 没有块级作用域,在 JS 函数中的var
声明,其作用域是函数体的全部。
(2)循环内变量过度共享,引用的是同一个变量的结果。
// 输出为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 的区别
- CommonJS(require)还是 ES6 Module(import)输出都可以看成是一个具备多个属性或者方法的对象;
default
是 ES6 Module 所独有的关键字,export default fs
输出默认的接口对象,import fs from 'fs'
可直接导入这个对象;- ES6 Module 中导入模块的属性或者方法是强绑定的,包括基础类型;而 CommonJS 则是普通的值传递或者引用传递。
- 对于第三点的理解:
3. 组件通信
原则:项目比较大时采用Vuex来管理状态,$parent、$children和ref不能在跨域兄弟组件之间通信
通信方式
参考博客1
(1)父子组件通信:props
和$emit
,节制的使用$parent``$children
(2)兄弟组件通信
(3)祖先组件和子组件通信
$emit
和$on
实现任意组件之间的通信,通过一个类似APP.vue作为事件中心(可以自定义个空组件asserts/bus/bus.js)。
// 将bus定义在全局,使用this.$bus.$emit/on来使用
var eventBus = {
install(Vue,options) {
Vue.prototype.$bus = vue
}
};
Vue.use(eventBus);
踩坑
需求:实现两个组件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
-
定义
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 -
概念
Vuex的核心是 store(仓库),改变store中的状态只能通过显示地提交mutation,方便跟踪状态的变化。
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。还有mapActions、mapMutations -
Mutation
mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler),且mutation 必须是同步函数。 -
Action
Action 提交的是 mutation,而不是直接变更状态;可以包含任意异步操作。store.dispatch分发,局部状态通过 context.state 暴露出来。 -
Module
Vuex 允许我们将 store 分割成模块(module),每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
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
可以看成一个模拟网络等异步执行的函数。
// 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. 文件
三、CSS 的理解
1. 比例排列
1. cursour-pointer
cursor-pointer
属性用来控制鼠标悬停的图形。
四、功能组件的理解
1. Draggable 拖动
Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件
参考博客
五、VUE 的理解
1.路由
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 都是方法的形式