petite-vue不止是变得更小,它还是渐进式增强的最佳实践。

Vue不构建或构建都能使用。当通过构建使用时(例如使用单文件组件),Vue预编译所有的模板,所以运行时没有再处理模板。多亏了树摇(three-shaking),我们可以在Vue中提供可选的功能,它们在不使用时并不会增大你打包生成的文件。用构建方式使用这是vue的使用的最佳实践,它更适合构建具有相对繁重交互的 SPA 或应用程序。

通过不构建的方式使用Vue并且挂载到 DOM 内模板,是很不推荐的使用方式,这是因为:

    • 我们需要把Vue模板编译器下载到浏览器。(额外多13kb大小)
    • 编译器需要从实例化的DOM中获取模板字符串
    • 编译器将字符串编译成 JavaScript 渲染函数
    • Vue将通过渲染函数新生成的DOM替换到已存在的DOM模板上。

petite-vue通过遍历现有的 DOM 并直接将细粒度的反应效果应用到元素上来避免所有这些开销。DOM就是模板,这意味着petite-vue 在渐进式增强场景中更加的高效。

这也是 Vue 1 的工作方式。这种方法与 DOM 耦合,因此不适合与平台无关的渲染或 JavaScript SSR。我们也失去了使用渲染函数进行高级抽象的能力。但是,正如您可能知道的那样,在渐进增强的场景中不太会需要这些功能。

翻译资料:Comparison with standard Vue.https://github.com/vuejs/petite-vue#comparison-with-standard-vue

总结:

vue不构建使用时,需要从实例化的DOM中读取模板字符串,编译成渲染函数,再替换到已存在的DOM上。

petite-vue是直接遍历DOM,若有更新,则直接应用到DOM上。

petite-vue使用场景:开发大量静态少量交互的页面。它为渐进式增强而生。

If you have strict CSP requirements, you should probably use standard Vue and pre-compile the templates.

推荐学习资料:

【1】如何在不看源码情况下学petite-vue源码.https://zhuanlan.zhihu.com/p/389045348

【2】introduction-to-petite-vue.https://blog.logrocket.com/introduction-to-petite-vue

petite-vue和Vue的比较的更多相关文章

  1. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  2. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  3. vue学习:vue+webpack的快速使用指南(新手向)

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

  4. Vue 项目 Vue + restfulframework

    Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...

  5. 【vue】vue +element 搭建项目,组件之间通信

    父子组件通信 父 通过props属性给 子传递数据 子 操作 父  this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...

  6. 【vue】vue +element 搭建项目,vuex中的store使用

    概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...

  7. vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader) 引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1.v ...

  8. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  9. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  10. import Vue form 'vue’的意思

    1.import Vue form ‘vue’ 写全的话是import Vue from ‘…/nodemouls/vue/list/vue.js’: 此时在webpack.base.conf.js中 ...

随机推荐

  1. JS数据结构与算法-概述

    JS数据结构与算法概述 数据结构: 计算机存储, 组织数据的方式, 就像锅碗瓢盆 算法: 一系列解决问题的清晰指令, 就像食谱 两者关系: 程序 = 数据结构 + 算法 邂逅数据结构与算法 什么是数据 ...

  2. 抓包整理————ip 协议一[十二]

    前言 简单介绍一下ip协议. 正文 先来看下ip协议在网络层的哪一层: 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 ip 层就在网络层: 其实很好想象哈,就是因为每台机器起码有一个ip ...

  3. SpringCloud——Eureka Feign Ribbon Hystrix Zuul等关键组件的学习与记录

    SpringCloud--Eureka Feign Ribbon Hystrix Zuul等关键组件的学习与记录 前言:本篇是对近日学习狂神SpringCloud教程之后的感想和总结,鉴于对Sprin ...

  4. MySQL数据库:6、约束的概述及语法

    Python基础之MySQL数据库 目录 Python基础之MySQL数据库 一.约束概述 1.为什么要约束 2.什么是约束 3.约束的分类 4.查看当前表已有的约束 二.约束语法及用法 1.无符号 ...

  5. 轻松玩转awk

    awk的处理方式 awk一次处理一行内容 awk对每行可以进行切片处理 例如 awk -F ':' '{print $1}' /etc/password -F指定每一行分割符号,这样就把被每行被:分割 ...

  6. windows 搭建iis文件服务器

    1.运行打开控制面板->程序->启用或关闭Windows功能,勾选下面所有的选项. 注意,必须安装功能所需文件. 等待 关闭即可. 2.在控制面板找到管理工具,不同版本的Windows不尽 ...

  7. javaweb string

    今天遇到一个跨域请求jsonp格式报错,其原因是其中一个参数过从我方数据库取出就带有换行格式的,类似于: 这条数据竟然自带格式换行. 而我们现常用的trim()只能去掉字符串的头部和尾部的空格, 而要 ...

  8. sql注入的一丢丢

  9. 干电池升压3.3V芯片

    PW5100适用于一节干电池升压到3.3V,两节干电池升压3.3V的升压电路,PW5100干电池升压IC. 干电池1.5V和两节干电池3V升压到3.3V的测试数据 两节干电池输出500MA测试: PW ...

  10. week_4

    Andrew Ng 机器学习笔记---by Orangestar Week4_Neural Networks : Representation 1. Non-linear Hypotheses 当特征 ...