Vuejs原理

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的衍生）名词解释 MVVMModelViewViewModel模型视图逻辑（视图模型）

vue特点

M修改，V更新 – 数据驱动（视图）v-bindVM改变，V改变；反之也一样 --双向数据绑定 v-model

vue的深入响应式原理

使用了es5中的一个特性，这个特性叫做 Object.definedPropty( obj, 对象的属性， 配置项) Object.definedPropty 配置项： 属性是否可写属性是否可以遍历存储器 getter/setter 数据驱动只与存储器有关 将数据写在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(视图)重新渲染