vue总结笔记

对MVVM的理解

1. MVVM是Model-View-ViewModel的缩写
2. Model代表数据模型，也可以在Model中定义数据和操作的业务逻辑
3. View代表UI组件，负责将数据模型转化成UI展现出来
4. ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接View和Model
   

vuex

• vuex是一个专门为vue.js应用程序开发的状态管理模式
• vuex可以帮助我们管理共享状态，也就是管理全局变量
  state
  state意为’状态’，是vuex状态管理的数据源
  mutations
  muntations定义的方法动态的修改Vuex的store中的状态或数据
  getters
  类似vue中的计算属性，主要过滤一些数据
  action
  action可以理解为通过将muntions里面处理的数据方法变成可异步的处理数据的方法。简单的说就是异步操作数据。view层通过store.dispatch来分发action
  modules
  项目比较复杂的时候，可以让每一个模块拥有自己的state,mutations,getters,action使得结构非常清晰，方便管理

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

vue生命周期

• 创建前/后 beforeCreate / created
  在beforCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在creates阶段，vue实例的数据对象有了,el还没有
• 载入前后 beforeMount / mounted
  在beforeMount阶段，vue实例的$el和data的初始化都有了，但还是挂载之前未徐牛的DOM节点,data尚未替换。在mounted阶段，vue实例挂载成功,dom渲染完成
• 更新前后 beforeUpdate / updated
  当data变化时，会触发这两个方法
• 销毁前后 beforDestory / destoryed
  beforeDestory是在vue实例销毁前触发，一般这里要通过removeEventListener解除手动绑定的事件，实例销毁后，触发destoryed

vue路由的实现

"更新视图但不重新请求页面"是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：

• hash–利用URL中的hash("#")
• 利用History interface在HTML5中新增的方法
  在vue-router中，它提供mode参数决定采用哪种方式

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes'

Vue.use(Router)

export default new Router({
  // mode: 'history',
  routes
})

HashHistory

两个方法：HashHistory.push()和HashHistory.replace()

HTML5History
History interface是浏览器历史记录栈提供的接口，通过back(),forward(),go()等方法，可以读取浏览器历史记录栈的信息，进行跳转操作

vue实现数据双向绑定的原理

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式，通过object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

1. 实现一个数据监听器Observer，对数据对象的所有属性进行监听，如有变动拿到最新值并通知订阅者
2. 实现一个指令解析器Complie,对每个元素的节点指令进行扫描和解析，根据模板指令替换数据，以及绑定相应的更新函数
3. 实现一个Watcher,作为连接Observer和Complie直接的桥梁，能到订阅并受到每个属性的变化通知，执行指令绑定的相应的回调函数，从而更新视图
   

vue的自定义指令

directives:{
	dir1: {
		inserted(el){
			// 进行一些操作
		}
	}
}

<!-- 指令的使用 -->
	<div>
		<div v-dir1></div>
	</div>

v-if和v-show的区别

v-if按照条件是否渲染，v-show是display的block或none

$route 和 $router的区别

$route是“路由信息对象”,包括path,params,hash,query,fullpath,matched,name等路由信息。
$router是“路由实例对象”包括了路由的跳转方法，钩子函数等

vue.js的核心

数据驱动、组件系统

vue几种常用的指令

v-for、v-if、v-else、v-bind、v-on、v-show

vue常用的修饰符

.prevent:提交事件不再重载页面
.stop:阻止单击事件冒泡
.once: 事件只触发一次
.self：只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的

vue中key值的作用

当vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序改变，vue将
不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过
的每个元素。key的主要作用是为了高效的更新虚拟DOM。

computed和watch的区别

计算属性computed：

• 支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化
• computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
• 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch

• 不支持缓存，数据变，直接会触发相应的操作。
• watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
• 当一个属性发生变化时，需要执行对应的操作；一对多；
• 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作