vuejs源码的结构
组成:匿名函数 + 严格模式
1.没有名字,那么无法再外部通过函数名使用或是操作这个函数,那么相对来说比较稳定,安全
2.严格模式使用,让这个匿名函数的语法更加的标准和严格
格式
function(形参1,,形参2...){})(实参1,实参2...)
(function ( global , factory ) {
//严格模式
'use strict'
//判断有无Common.js规范
typeof exports === 'object' && typeof module !== 'undefined' ?
//有则Commonjs规范的模块化导出
module.exports = factory() :
//否则判断有无amd模块化
typeof define === 'function' && define.amd ?
//有则amd模块化导出
define(factory) :
//否则把factory挂载在全局对象global的Vue属性上(对应JavaScript标签直接引入vuejs文件)
(global = global || self, global.Vue = factory());
})( this,function () {
//this指向window,即把window赋值给global,让global变成全局对象
//function的匿名函数则为vue的实现
1.创建Vue的构造函数
function Vue(opt){ }//vue的使用实际上就是操作它的实例的配置项和实例上的属性和方法
2.在Vue的原型上添加行为函数
Vue.prototype.init = function() {}
3.把Vue return到外部
return Vue
}
vue结构模式
架构模式:MVC,Backbone.js,MVP,MVVM
- vue使用了MVVM(MVC的衍生)
- 名词解释
M | V | VM |
---|---|---|
Model | View | ViewModel |
模型 | 视图 | 逻辑(视图模型) |
vue特点
- M修改,V更新 – 数据驱动(视图)v-bind
- VM改变,V改变;反之也一样 --双向数据绑定 v-model
vue的深入响应式原理
- 使用了es5中的一个特性,这个特性叫做 Object.definedPropty( obj, 对象的属性, 配置项)
- Object.definedPropty
配置项:- 属性是否可写
- 属性是否可以遍历
- 存储器
getter/setter
数据驱动只与存储器有关
- Object.definedPropty
- 将数据写在data选项时,Vue通过observer将data对象中的所有的属性都设置上getter和setter
- 当我们将数据绑定在视图时,自动触发getter,会将默认值,展示在视图
- 当我们通过视图修改数据是, 会自动触发setter,将数据修改,同时视图也会发生更新
双向数据绑定:
VM改变,V响应
V改变, VM也会响应
双向数据绑定原理/数据驱动/深入响应式原理:
vue是通过数据劫持(observer)和事件的发布订阅来进行数据驱动的,当我们在data选项中定义数据后,vue会通过observer(观察者)
监听data选项,将data选项中的所有key通过es5的Object.definedPropty进行getter和setter设置,当
数据绑定在DOM上是,就会触发getter,给DOM设置初始值,当我们在V(视图中)输入内容时,就会触发setter
,就可以获得最新的值,通过watch(监听)通知Vue进行V(视图)重新渲染