对 Vue 的理解（一）

一、什么是 Vue ?

　　首先，Vue 是一个 MVVM 框架，M -- 模型，就是用来定义驱动的数据，V -- 视图，是经过数据改变后的 html，VM -- 框架视图，就是用来实现双向绑定的中间桥梁。Vue.js 是采用数据劫持结合发布者-订阅者模式的方法，通过 Object.definePropety() 来接吃个够属性的 setter、getter,在数据变动时发布消息给订阅者，出发相应的监听回调。

二、Vue 的生命周期
创建前：beforeCreate
创建后：created
载入前：beforeMounte
载入后：mounted
更新前：beforeUpdate
更新后：updated
销毁前：beforeDestory
销毁后：destroyed

三、Vue 双向数据绑定原理
1. 对需要 Observer 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和
getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到数据变化。

说明：
* Observer 的数据对象：写在 data() 里面用 return 包裹的数据。
* data() 里面的数据使用 return 包裹，因为使用 return 包裹后数据中变量只在当前的组建生效，不会影响其他组件；不使用 return包裹的数据会在项目的全局可见，会造成全局污染。
* 如果 data 中的数据为对象，则使用 walk 遍历 data 上每个 key，对每个 key 调用 defineRective 来获取该 key 的 set/get 控制权。[defineRective: 设置对象的 key 属性，由watcher 的实例对象进行 get 操作，此时 watcher 的实例对象将被自动添加到 Dep 实例的依赖数组中。在外部操作出发set 时，将通过 Dep 实例的 notify 来通知所有依赖的 watcher 进行更新。]
* 如果 data 中的数据是数组，就使用 ObserverArray 遍历 data，对 data 中的每一个元素调用 Observer 分别进行观察。

2. compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者一旦数据有变动，收到通知，更新视图。
![clipboard.png](/img/bVbcIB9)

3. Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
* 在自身实例化时往属性订阅器(dep)里面添加自己
* 自身必须有一个update()方法
* 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

4. MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化
-> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果

四、Vue 初始化工作

1.初始化各方法执行顺序
initLifeCycle(vm) -> initEvents(vm) -> callHook(vm, 'beforeCreated') -> initProps(vm) -> initMethods(vm) -> initData(vm) -> initComputed(vm) -> initWatch(vm) -> callHook(vm, 'created') -> initRender(vm)

2.vue生成实例的过程
- new Vue,执行初始化
- 挂载 $mount 方法，通过自定义 Render，template，el 等生成 Render 函数
- 通过 watcher 监听数据变化
- 当数据发生变化，执行 Render 函数，返回 VNode 对象
- 通过 patch 方法，对比新旧 VNode 对象，通过 DOM Diff 算法，增加、修改、删除真正的 DOM 元素。

五、Vue 自定义指令

1.格式
全局：
Vue.directive('directiveName', {
inserted: function(el) {
...
},
...
})

局部：
directives: {
inserted: function(el) {
...
},
...
}

2.自定义指令对象的钩子函数（均为可选）

- bind: 指令第一次绑定到元素是调用，只调用一次
- inserted: 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
- update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前，指令的值可能发生了改变，也可能没有
- componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用
- unbind: 指令与元素解绑时调用，只调用一次

3.钩子函数的参数

- el: 指令所绑定的元素，可以用来直接操作 DOM
- binding: 一个对象，包含以下属性
* name - 指令名，不含前缀 v-
* value - 指令的绑定值
* oldValue - 指令绑定的前一个值
* expression - 字符串形式的指令表达式
* arg - 传给指令的参数
* modifiers - 一个包含修饰符的对象
- VNode: 虚拟节点
- oldVnode: 上一个虚拟节点

六、Vue 响应数据变化的几种方法
1.methods: 每次获取都会重新计算求值
2.computed（计算属性，有缓存）: 基于数据依赖进行缓存，只有当数据变化时，才会重新求值。（计算属性只有 getter，可以在需要的时候自己设定 setter）。computed 擅长处理的情景：一个数据受多个数据影响。
3.watch: 当需要在数据变化时执行异步操作或者消耗较大的操作时，比较有效。watch 擅长处理的情景：一个数据影响多个数据。
4.v-model: 基于数据双向绑定（对于 v-for 循环列表中的项，需要使用键值）
eg(4):
<div v-for="(item, index) in list" :key="index">
<input v-model="list[index]" />
</div>

更多专业前端知识，请上【猿2048】www.mk2048.com

对 Vue 的理解（一）相关推荐

[vue] 有使用过vue吗？说说你对vue的理解
[vue] 有使用过vue吗?说说你对vue的理解 1.mvvm框架 2.数据驱动 3.SPA 4.渐进式个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
2021-08-06随记(vertical-align, 顶线、底线、中线、基线，vue原理理解)
vertical-align 父元素是inline或者是table-cel,如果是inline-block或者block则必须要设置line-height(和高度一样)子元素为inline或者inli ...
请简述你对 vue 的理解
一.请简述你对 vue 的理解 • 定义:vue 是一套构建用户界面的渐进式的自底向上增量开发 MVVM 框架, Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.通过尽 ...
Vue 正确理解mounted、beforeUpdate、updated三个钩子函数的关系
目录官方图理解beforeUpdate:视图层的数据改变时触发 beforeUpdate的测试 updated的测试官方图 mounted表示vue实例挂载完成: beforeUpdate在da ...
vue store理解状态管理（vue笔记之store）
如果你写过一些vue的项目并且没有用过store,你可能会深深的理解过组件之间传递参数的痛. 其实在vue中我们可以使用store来统一管理我们需要的值,值一旦被修改,所有引用的地方都可以产生变化当 ...
面试官：说说你对vue的理解?
一.web发展历史 Web是World Wide Web的简称,中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我 ...
Vue.nextTick()理解
什么是Vue.nextTick() 官方解释:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 注意:重点是获取更新后的DOM 就是在开发过程中有个 ...
对vue的理解什么是渐进式框架
Vue 是一套用于构建用户界面的渐进式框架. 渐进式框架意思使vue不强求我们一次性接受并使用它的全部功能特性. (大概意思就是你可以只用我的一部分,而不是所有部分) 场景1:刚开始一个项目,开发者对 ...
vue - 深入理解vue中的scoped属性
文章目录 1,前言 2,scoped原理 3,父子组件使用scoped的不同情况 4,第一种:父组件未添加scoped,子组件未添加scoped 5,第二种:父组件未添加scoped,子组件添加sco ...

对 Vue 的理解（一）

对 Vue 的理解（一）相关推荐

最新文章

热门文章