关于vue的目录结构、特性和优缺点_vue目录结构components套component好不好

一、Vue.js 目录结构
1、build ：项目构建(webpack)相关代码
2、config：配置目录，包括端口号等。我们初学可以使用默认的。
3、node_modules：npm 加载的项目依赖模块
4、static：静态资源目录，如图片、字体等。
5、test：初始测试目录，可删除
6、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等。
7、index.html：首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
8、package.json：项目配置文件。
9、README.md：项目的说明文档，markdown 格式
10、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1、assets: 放置一些图片，如logo等。
2、components: 目录里面放组件文件，可以不用。
3、App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
4、main.js: 项目的核心文件。
关于src，除了上面四个上面已有的几个目录及文件，为了规范和管理，以及跨域连接后台，通常还可以建立以下几个目录及文件：
1、vue.config.js：是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载.。
2、pages：存放所展示页面的组件。
3、router：存放一个index.js（可自定义）文件用于定义(嵌套)路由和创建router实列。实现多视图的单页Web应用（single page web application，SPA）
4、service：业务层，也是存放一个index.js文件（可自定义），用来发送请求（通常使用axioa来完成ajax请求）。

二、vue为什么是框架，vue优缺点？谈谈你对框架和库的理解？
1、vue优缺点：
1）、优点：
（1）具有自动化UI状态管理、虚拟DOM、组件化开发、双向绑定、借鉴MVVM模式、单向数据流等特性；
（2）性能好、简单易用、前后端分离、单页面应用用户体验好；
（3）当前端和数据做一些操作的时候，可以通过AJAX请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据；
（4）Vue.js是一个构建数据驱动的 web 界面的渐进式框架（声明式渲染（声明每个字段，展现功能和信息） ->组件系统（把公共的头部和尾部抽出来，做成组件） ->客户端路由（单页面应用程序） ->大规模状态管理（使用vue-resource去管理项目复杂、大规模使用组件的页面状态） ->构建工具（项目完成后需要构建工具来build我们的系统，来提高我们的效果，最后形成完成的项目））。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统
2）、缺点：
它不适于seo优化，而且封装的比较厉害，报错不明显，适合单人开发，适合中小型项目
2、框架和库：
1）、库是将代码集合成一个产品，我们可以调用库中的方法实现自己的功能。
2）、框架则是为解决一类问题而开发的产品，我们在指定的位置编写好代码，使用时框架帮我们调用。
总之：框架与库之间最本质区别在于控制权：you call libs, frameworks call you.

三、了解vue的特性
1、自动化UI状态管理：

2、虚拟（virtual）DOM：
a、提供与真实DOM节点所对应的虚拟节点vnode；
b、将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图；

3、组件化开发：
a、页面级别的组件（通常是pages目录下的.vue组件，是组成整个项目的一个大的页面）；
b、业务上可复用的基础组件（通常是在业务中被各个页面复用的组件，这一类组件通常都写到components目录下，然后通过import在各个页面中使用）；
c、与业务无关的独立组件（通常是与业务功能无关的独立组件。这类组件通常是作为基础组件，在各个业务组件或者页面组件中被使用）；

4、双向绑定：
vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的。
实现步骤：
a、实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者；
b、实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图；
c、实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者；

5、MVVM模式：
a、MVVM三个部分：
1、 M：模型层（Model），主要负责业务数据相关；
2、 V：视图层（View），顾名思义，负责视图相关，细分下来就是html+css层；
3、 VM：（ViewModel）V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
b、MVVM支持双向绑定（使用Object.defineProperty实现），意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

6、单向数据流：
a、父级 prop 的更新会向下流动到子组件中，但是反过来则不行，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值；
b、这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告；