Vue 2 学习开发笔记

MVVM

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

虚拟DOM

• 由于dom操作耗时十分长，且dom对象的体积很大，单个div的dom属性就有294个之多；
• Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点，所以它比创建一个 DOM 的代价要小很多。
• VNode 是对真实 DOM 的一种抽象描述，它的核心定义无非就几个关键属性，标签名、数据、子节点、键值等，其它属性都是用来扩展 VNode 的灵活性以及实现一些特殊 feature 的。由于 VNode 只是用来映射到真实 DOM 的渲染，不需要包含操作 DOM 的方法，因此它是非常轻量和简单的。
• Virtual DOM到真实的dom需要经过以下过程：VNode 的 create、diff、patch

响应式数据原理

Vue2.x在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)，如果属性发生变化会通知相关依赖进行派发更细(发布订阅模式)。

vue3.0采用es6中的proxy代替Object.defineProperty做数据监听。

Proxy优点:

• Proxy可以直接监听对象而非属性
• Proxy可以直接监听数组的变化
• Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的
• Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改

Object.defineProperty优点:

• 兼容性好

v-model双向数据绑定

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式 的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变； 核心：Object.defineProperty() 方法。

v-model本质上是语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件

• text 和 textarea 元素使用 value 属性和 input 事件
• checkbox 和 radio 使用 checked 属性和 change 事件
• select 字段将 value 作为 prop 并将 change 作为事件

<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />

生命周期

生命周期	描述
beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive专属，组件被激活时调用
deadctivated	keep-alive专属，组件被销毁时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

指令

• v-model双向数据绑定；
• v-for循环；
• v-if、v-show 显示与隐藏；

v-show 和 v-if 都用于有条件地显示元素，而后者提供了条件渲染的真正实现。 v-show 只需切换 CSS 的 display 属性即可显示或隐藏元素，而 v-if 指令可创建或销毁组件。每次显示状态更改时，代价通常会更大。

另一方面，v-show 成本较低，因为它仅切换元素的CSS显示属性。所以如果必须经常切换元素，则 v-show 会提供比 v-if 更好，更优化的结果。

就加载元素的初始渲染成本而言，v-if 不会渲染最初隐藏的元素的节点，而 v-show 会渲染其 CSS display 属性被设置为 none 的元素。

• v-on绑定事件；

注意v-if和v-for的优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。

如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

data函数

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

组件间通信方式

• 父子组件通信

父->子props，子->父 $on、$emit

获取父子组件实例 $parent、$children

Ref 获取实例的方式调用组件的属性或者方法

Provide、inject 官方不推荐使用，但是写组件库时很常用

• 兄弟组件通信

Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue

Vuex

• 跨级组件通信

Vuex

$attrs、$listeners

Provide、inject

vue-router的两种模式

hash模式：即地址栏 URL 中的 # 符号；

history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。

$route和$router的区别

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