Vue项目搭建及原理四

四.Vue-cli工作原理及Vue实例创建,工作原理

（一）Vue-cli原理

1.webpack其实使用了node.js的express网页服务器来进行处理网页相关的数据,相当于使用一个类似apache这样的web服务器来执行解析html等文件,只是这里换成了node.js的express,并且可以执行js文件

2.利用http-proxy-middleware实现转发所有请求代理到后端真实API地址，以实现前后端开发完全分离

3.开发环境下，静态资源都在内存中，通过webpack-hot-middleware监听资源变动，做到热更新
4、打包vue文件是vue-loader干的事，根据<template>这类标签将文件内容拆分，然后分别用其他loader打包编译

Vuejs 实例创建及工作原理

1.实例创建

和其他现代前端框架一样，Vue.js也是以__JavaScrip__作为应用的入口，HTML只是提供一个渲染 的锚点 —— 这便利于Vue.js迁移到浏览器之外的其他平台，比如移动设备，或者服务器。

创建一个Vue.js的Hello World示例相当简单

1.Vue引入

#不使用构建工具

直接引入vue.js库

<script src="lib/vue.js"></script>

#使用构建工具

可以利用 webpack 或 Browserify 类似的构建工具

都将暴露全局类——Vue，你可以用它来创建一个Vue实例。

2.创建Vue实例

Vue是一个封装了响应式开发、模板编译等诸多特性的基础类，你通过提供一些 配置项，来创建一个实例:

var vm = new Vue({...});

一个常见的配置项是template，以类似HTML的语法来编制视图的结构：

var vm = new Vue({

template: '<h1>Hello,Vue.js 2</h1>'})

el: '#app'})

3、渲染Vue实例

要将Vue实例渲染到HTML页面中，采用Vue实例的$mount()方法，这个方法 的名称，意味着渲染实际上是将Vue实例生成的（虚拟）DOM子树，挂接到页面DOM中。

容易理解，$mount()方法需要指定一个定位用的DOM节点———锚点：

vm.$mount(root_element);

Vue.js会将渲染出的DOM子树，插入锚点元素之前（并最终删除这个锚点元素）。

可以使用CSS选择符或者指定一个HTMLElement来声明锚点。例如， 下面的示例将Vue实例挂接到id为app的DOM对象处：

vm.$mount('#app');

4.工作原理

1.如果Vue.js检测到你指定了el配置项，将在内部自动地执行渲染 —— 这时你 不再需要额外调用$mount()方法

2.vue.js 采用数据劫持-发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

需要利用Object.defineProperty，将要观察的对象，转化成getter/setter，以便拦截对象赋值与取值操作，称之为Observer；

需要将DOM解析，提取其中的指令与占位符，并赋与不同的操作，称之为Compiler；

需要将Compile的解析结果，与Observer所观察的对象连接起来，建立关系，在Observer观察到对象数据变化时，接收通知，同时更新DOM，称之为Watcher；

最后，需要一个公共入口对象，接收配置，协调上述三者

本文章为作者原创文章，如有转载请注明出处