一、什么是 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>

对 Vue 的理解(一)的更多相关文章

  1. 关于Vue的理解以及与React框架的对比

    1.Vue的理解 概念: Vue是一套用于构建用户界面的渐进式框架: Vue的核心库只关注视图层: 是一个数据驱动的MVVM框架: 特性: 确实轻量:体积比较小: 数据绑定简单.方便: 有一些简单的内 ...

  2. vue之理解异步更新 --- nextTick

    默认情况下,vue中DOM的更新是异步执行的,理解这一点非常重要. 当侦测到数据变化时,Vue会打开一个队列,然后把在同一个事件循环(event loop)当中观察到的数据变化的watcher推送进入 ...

  3. Vue nextTick 理解

    官网解释: 将回调延迟到下次 DOM 更新循环之后执行.在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例 ...

  4. Vue系列---理解Vue.nextTick使用及源码分析(五)

    _ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...

  5. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  6. vue动画理解,进入、离开、列表过度和路由切换。

    vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...

  7. vue插槽理解

    1.插槽作用:父向子传递一段Html代码块 2.分类: (1)默认插槽:规则:父给子传,用父,不传,用子. (2)具名插槽:适用于一个页面有多个插槽时,需要做区分,使用name属性.给插槽取个名字 ( ...

  8. Vue的理解:Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  9. Vue.js——理解与创建使用

    Vue.js 概念:是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API,作者是尤雨溪是中国人. 优点: 1)易用 已经会了HTML,CSS,JavaScript?即刻阅读指南开始构 ...

  10. vue的理解

    vue提供的MVVM框架模式的数据双向绑定,实现了HTML和js的代码分离,提高代码的维护性 vue.js的核心思想包括:数据驱动和组件化思想. 如果没有中间的ViewModel则关系图编程下面所示: ...

随机推荐

  1. sass的基本语法与使用

    一.简介 SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.以上都是百度的,哈哈: 其实个人认为sass就是一套提高编写css效率的规则 ...

  2. 【洛谷2113】看球泡妹子 DP背包

    看球泡妹子 题目背景 2014年巴西世界杯开幕了,现在满城皆是世界杯,商家们利用它大赚一笔,小明和小红也借此机会增进感情. 题目描述 本届世界杯共有\(N\)支球队,\(M\)场比赛.男球迷小明喜欢看 ...

  3. 一个很棒的PHP缓存类,收藏下

    <?php class Cache { /** 缓存目录 **/ var $CacheDir = './cache'; /** 缓存的文件 **/ var $CacheFile = ''; /* ...

  4. Python之freshman04

    一.迭代器 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的 ...

  5. Python中lambda表达式

    一.lambda表达式形式 lambda后面跟一个或多个参数,紧跟一个冒号,以后是一个表达式.冒号前是参数,冒号后是返回值. lambda是一个表达式而不是一个语句. lambda表达式可以出现在Py ...

  6. SVN:Access to 'xxx' forbidden

    可以做以下尝试:

  7. liunx 请求服务器连接数相关设置

    一. 文件数限制修改 1.用户级别 修改 nr_open 限制 (用途:能够配置nofile最大数) cat /proc/sys/fs/nr_open Linux 内核 2.6.25 以前,在内核里面 ...

  8. Angular 2: 404 error occur when I refresh through the browser [duplicate]

    https://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-the-br ...

  9. C++ GUI Qt4编程(07)-3.1menu

    1. C++ GUI Qt4编程第三章,添加menu菜单. 2. mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include < ...

  10. PIE SDK图层属性

    1. 功能简介 通过查看图层属性可以对图层的基本信息(一般信息,来源,注释,字段信息等)有所了解 ,下面就基于PIE SDK,介绍查看图层属性功能的实现. 2. 功能实现说明 2.1. 实现思路及原理 ...