zoukankan      html  css  js  c++  java
  • 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;

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

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

  • 相关阅读:
    pta ——还原二叉树
    pta ——Topological Sort(拓扑排序)
    pta Two Stacks In One Array(简单版双向数组)
    pta Percolate Up and Down(最小堆的插入维护和删除维护)
    pta 切分表达式——写个tokenizer吧
    正则表达式基本语法详解
    pat 是否同一棵二叉搜索树
    关于java中字符、字符串、整数相加输出的小整理
    纯C语言实现的AVL树(插入&删除&前序遍历输出)
    pat Deque(双端队列)
  • 原文地址:https://www.cnblogs.com/hongsusu/p/8525394.html
Copyright © 2011-2022 走看看