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的衍生）
• 名词解释

M	V	VM
Model	View	ViewModel
模型	视图	逻辑（视图模型）

vue特点

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

vue的深入响应式原理

• 使用了es5中的一个特性，这个特性叫做 Object.definedPropty( obj, 对象的属性， 配置项)
  • Object.definedPropty
    配置项：
    1. 属性是否可写
    2. 属性是否可以遍历
    3. 存储器
       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(视图)重新渲染