vue框架原理基础篇

脚手架基本配置—以及介绍

接上篇文章点击跳转上篇文章我们已经成功搭建了vue的脚手架了！但是我们还缺少一些基本的配置（如：跨域，一些插件配置，关闭eslint）

在配置前我们先简单介绍下脚手架各个文件的作用吧
在这里插入图片描述

node_modules 是这个依赖文件是你npm安装的所有依赖都在这个文件夹下

public 有的时候这个文件也可以处理一些静态资源文件就是一些图片什么的也可以放在这个文件里面和src下asset文件有类似功能

在public文件下
index.html 主配置页面所有的vue页面最后都会被打进这个html 这个html我们可以通过src引入一些库什么的

src文件源码文件！是我们常用的文件夹
在src下
在这里插入图片描述

src—assetes 静态资源文件夹可以放置一些图片，以及静态资源

src—components 放组件的地方

src—router 路由配置文件

src—store 状态管理文件 VueX

src—view 放页面的地方

main.js 主配置文件

App.vue 项目入口页面（组件）

基础配置

在根目录下创建vue.config.js文件配置相关内容！注意配置完成后一定要重新启动

module.exports = {
    
    
   
    // 基本路径
    publicPath: './', //部署应用包时的基本 URL
    outputDir: 'dist', // 输出文件目录
    assetsDir: '',//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    runtimeCompiler: false, //是否使用包含运行时编译器的 Vue 构建版本。设置为true可以使用template
    productionSourceMap: false,//生产环境是否生成 sourceMap 文件
    lintOnSave: false,//关闭eslint
    chainWebpack(config) {
    
    
        config.resolve.alias
        //     .set('style', resolve('public/style'))
        config.output.filename('js/[name].[hash:16].js');//hash值设置
        config.output.chunkFilename('js/[id].[hash:16].js');
        // config.output.filename('css/[name].[hash:16].css');//hash值设置
    },
    configureWebpack: () => {
    
    
    },
    // css相关配置
    css: {
    
    
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
    
    },
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    parallel: require('os').cpus().length > 1,//是否为 Babel 或 TypeScript 使用 thread-loader
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {
    
    },
    // webpack-dev-server 相关配置
    devServer: {
    
    
        
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8888,
        https: false,
        hotOnly: false,
        // 设置代理
        proxy: {
    
    
            '/api': {
    
    
              target: 'http://localhost:3000/', //对应自己的接口
              changeOrigin: true,
              ws: true,
              pathRewrite: {
    
    
                '^/api': ''
              }
            }
          }, 
       
    },
    // 第三方插件配置
    pluginOptions: {
    
    
        // ...
    }
}

好了脚手架基本介绍就算Ok了！下来我们来补充下框架原理

什么是vue？

vue是一套基于MVVM模式设计的一套前端框架。

作者：尤雨溪 ( 华人 )

前Google员工

是一套构建用户界面的渐进式的自底向上增量开发MVVM框架，Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

特点：

轻量级
高效率
易上手
简单易学
文档全面而简洁

vue的开发核心思想是什么？

以数据为中心，面向对象的开发逻辑
数据驱动和组件化

什么是数据驱动？

就是以数据为中心，先有数据再有dom

对于Vue是一套渐进式框架的理解?

每个框架都会有自己的一些特点，会对开发者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

可以在原有大系统的上面，把一两个组件改用vue实现，也可以整个用vue全家桶开发不会做职责之外的事

对于Vue自底向上增量开发的设计的理解?

先写一个基础的页面，把基础的东西写好，再逐一去添加功能和效果，由简单到繁琐的这么一个过程。

Vue.js 目的

Vue.js的产生核心是为了解决如下三个问题

解决数据绑定问题。
Vue.js主要的目的是为了开发大型单页面应用。
支持组件化，也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页面的复用性达到最高

什么事单页面应用？
在开发的过程中我们常会见到两种页面

一种为SPA 单页面应用（single page application）

缺点：首屏加载比较慢

优点：其他页面加载都非常快

另一种为MPA 多页面应用（multiple page application）

缺点:加载速速度比较慢

每个页面都需要重新请求服务

MVC 架构设计模式

他是早期的一种设计模式主要解决了前端视图与数据的彻底分离
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Pifwko2-1602643783636)(yang7615221.gz01.bdysite.com/img/vueMvc.png)]

如图：当视图一旦改变就会发送给通过控制器（Controller）然后控制器会通知模型从而模型改变

它是单向的

它的特点就是：一旦视图发生了改变，不会立即通知模型而是要通过控制器请求，所以这样也就分离了视图和模型（数据）

mvc这种模式可以分为三部分：

模型（Model）数据的储存和处理，再传递给视图层相应或者展示

视图（View）前端的数据展示

控制器（Controller）对数据的接收和触发事件的接收和传递

MVVM 架构设计模式

Vue中实现了mvvm这种设计模式

MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器MVC的C层）

1、 M：模型层，主要负责业务数据相关；

2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；

3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A1TCBncw-1602643783642)(yang7615221.gz01.bdysite.com/img/vueMvvm.png)]

如图一旦视图改变就会通知viewmodel,viewmodel会发送给模型然后模型改变这个过程是双向的也就是说模型（数据）一旦发生改变它同样会通知给viewmodel从而发送给视图，视图改变

MVC 与 MVVM 的区别

MVC的是单向的而MVVM是双向的

MVVm的价值：实现了数据与页面的彻底分离
实现了数据的双向绑定

数据双向绑定的原理？

把需要双向数据绑定的数据放在data中，vue将会采用一种数据劫持的机制，vue的compler(内核中的一种编译器)会劫持data中的每一个数据交给es6的proxy(2.6版本)（object.definepropety）来动态添加set和get方法，然后通过set方法给没个数据添加监听器，让这些数据变成可观测的对象!

(dirty checking) 在劫持到数据后会观察和没有劫持之前是否有变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
    <script>
        var obox = document.getElementById("box")
        var obj = {}
        // obj.name ="kerwin"
        Object.defineProperty(obj,"myname",{
            get(){
                console.log("被访问")
            },
            set(data){
                console.log("被修改",data)
                obox.innerHTML = data
            }
        })
    </script>
</body>
</html>

在控制台上输入obj回车

会发现出现你监听的myname属性和set方法和get方法

在控制台输入obj.myname发现get方法被调用

在控制台输入obj.myname=“xiaoming” 发现set方法被调用

所以说一旦数据改变视图就会变

虚拟DOM

数据在创建的时候先会创建虚拟DOM（用来模拟真实DOM）然后映射出真实DOM，假如说你删除了一个节点，会在创建一份虚拟DOM节点，然后两份虚拟DOM通过key值会做出比较，然后留下相同的，能复用的进行复用，没有的作出删除。

这样其实也能作出页面的优化

能复用的节点尽量复用

我们一般理想的key值为:key=data.id