Vue完整版和runtime版的区别详解

目录
  • 创建Vue实例的三种方式
    • 从HTML得到视图
  • 用JS构建视图
  • 使用vue-loader
  • 两者对比
  • 最佳实践
  • SEO友好

创建Vue实例的三种方式

从HTML得到视图

前提：使用完整版，CDN引入或者修改配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	// ...
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js', // 用 webpack 1 时需用 'vue/dist/vue.common.js'
      },
    },
  },
})

index.html

<div id="app">
  {{n}}
</div>

main.js

import Vue from 'vue' // 或者在index.html使用CDN引入
new Vue({
  // 挂载到app元素并以其DOM内部的HTML作为模板
  el: '#app',
  data: {
    n: 1,
  },
})
// 或者传一个字符串给template
new Vue({
  template: '<div>{{ n }}</div>'
})

用JS构建视图

需要用到render函数，参数是Vue提供的h函数，也即createElement

import Vue from 'vue'
new Vue({
  el: '#app',
  render(h) { // createElement
    return h('div', [this.n, h('button', { on: { click: this.add } }, '+1')])
  },
  data: {
    n: 0,
  },
  methods: {
    add() {
      this.n += 1
    },
  },
})

使用vue-loader

可以把*.vue文件翻译成h构建方法，但这样做HTML就只有一个div#app，SEO不友好

新建一个单文件组件 Demo.vue

<template>
  <div class="red">
    {{ n }}
    <button @click="add">+1</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        n: 0,
      }
    },
    methods: {
      add() {
        this.n += 1
      },
    },
  }
</script>
<style>
  .red {
    color: red;
  }
</style>

import Vue from 'vue'
import Demo from './Demo.vue'
console.log(Demo.render.toString())
new Vue({
  el: '#app',
  render(h) {
    return h(Demo)
  },
})

将render()函数打印出来，可以看到该函数将<template>内部代码翻译成h构建方法

完整版和运行时版的区别

完整版：运行时+编译器（compiler将模板字符串编译成JavaScript渲染函数的代码）

运行时版：没有编译器，体积小

如果把视图写在HTML或template选项会报错

两者对比

特点 视图 CDN引入 webpack或@vue/cli引入
Vue完整版 有编译器，体积大 写在HTML或template选项里 vue.js 需额外配置
Vue运行时版 无编译器 写在render函数里，用参数h创建标签 vue.runtime.js 默认使用

最佳实践

使用非完整版，配合 vue-loader 和 vue 文件

思路

  • 保证用户体验，用户下载的JS文件体积更小，但只支持h函数
  • 保证开发体验，开发者可以直接在vue文件里写HTML标签，不写h函数
  • 脏活让loader做，vue-loader把vue文件里的HTML转为h函数

SEO友好

搜索引擎优化

搜索引擎就是不停地curl，搜索引擎根据curl结果猜测页面内容

p.s. 用户访问网站看到的界面是JS渲染之后的，右键查看源代码才是curl返回的结果

如果页面都是JS创建div，curl无法获取有效信息，因此最好在title, description, keyword, h1, a写入内容（前面三个是meta标签）

总结一条原则：让curl能得到页面的主要内容和相关内容，SEO就能正常的工作

怎么提升SEO排名呢，访问量or氪金

以上就是Vue完整版和runtime版的区别详解的详细内容，更多关于Vue完整版runtime版区别的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue-next/runtime-core 源码阅读指南详解

    写在前面 最近又抽时间把 vue-next/runtime-core 的源码陆陆续续地看完了,期间整理了很多笔记,但都是碎片化的.本来是想整理一下,写成一篇文章分享出来的,但是感觉最终的成果物只能是一篇篇幅巨长的解析文,就算我一行一行的把源码加上注释,其阅读体验也会很差,因为每个人读代码的习惯不同,思路不同.正所谓抛砖引玉,所以,我觉的写一篇向导文作为这块砖应该是足够了,希望可以帮助到想看源码但觉得无从看起.无从下手的读者. 另一方面,也算是给自己挖一个坑,因为这篇文章中涉及到的很多内容,三言两

  • vue3模块创建runtime-dom源码解析

    目录 前言 创建模块 nodeOptions patchProps patchProp patchClass patchStyle patchEvent patchAttr 总结 前言 runtime-dom 是针对浏览器的运行时,包括 DOM 操作.props(例如class.事件.样式以及其它attributes)的更新等内容:本小节我们开启 runtime-dom 的篇章. 创建模块 在 packages/runtime-dom/ 目录下创建目录文件: │ │ └─ src │ │ ├─

  • Vue.js和Vue.runtime.js区别浅析

    Vue.js和Vue.runtime.js区别浅析

    目录 区别 HTML Compiler template render() codesandbox.io 区别   Vue.js Vue.runtime.js 体积 最大 比Vue.js小40% 功能 包含HTML Compiler 不含HTML Compiler cdn引入 选择Vue.js 选择Vue.runtime.js 可见两者最大的区别就是:是否包含HTML Compiler HTML Compiler HTML Compiler 顾名思义是编译 HTML 的工具.在Vue中,页面元素

  • Vue完整版和runtime版的区别详解

    目录 创建Vue实例的三种方式 从HTML得到视图 用JS构建视图 使用vue-loader 两者对比 最佳实践 SEO友好 创建Vue实例的三种方式 从HTML得到视图 前提:使用完整版,CDN引入或者修改配置 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // ... configureWebpack: { resolve: { alias: { vue$: 'vue/

  • Vue路由钩子之afterEach beforeEach的区别详解

    vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结 使用vue-cli作为开发前提 vue-router已经配置好了 路由写法 routes: [ { path: '/cart', name: 'cart', component: cart, meta :{ title: "购物车"} //用于给定网页名 } ] vue-router 的路由跳转的方法 第一种 : 编程式的导航 <router-link to="/" tag

  • Vue 中的 computed 和 watch 的区别详解

    目录 computed 注意 应用场景 watch 总结 computed computed 看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取 computed 的值时才会重新调用对应的 getter 来计算. 1)下面是一个比较经典简单的案例 <template> <div class="hello"> {{ful

  • 项目发布Debug和Release版的区别详解

    本文为大家讲解了项目发布Debug和Release版的区别,供大家参考,具体内容如下 一.Debug和Release的区别 Debug:调试版本,包含调试信息,所以容量比Release大很多,并且不进行任何优化(优化会使调试复杂化,因为源代码和生成的指令间关系会更复杂),便于程序员调试.Debug模式下生成两个文件,除了.exe或.dll文件外,还有一个.pdb文件,该文件记录了代码中断点等调试信息 Release:发布版本,不对源代码进行调试,编译时对应用程序的速度进行优化,使得程序在代码大小

  • vue中的v-if和v-show的区别详解

    v-if和v-show的区别是前端面试中常问的基础知识点,v-if.v-show顾名思义就是用来判断视图层展示效果的.那么具体是怎么展示呢?v-if和v-show的区别又是什么呢? 首先我们可以来看一下Vue中文社区说明文档的介绍: Vue中文社区说明文档中简单来说是:初始渲染的时候进行条件判断展示: 在实际开发中我们会经常使用到v-if和v-show来进行判断展示,我们可以这么理解: <div class="tc" v-if="pload && lis

  • React DOM diff 对比Vue DOM diff 区别详解

    目录 React DOM diff 和 Vue DOM diff 的区别 React DOM diff 代码查看流程 总结 React DOM diff 和 Vue DOM diff 的区别 React 是从左向右遍历对比,Vue 是双端交叉对比. React 需要维护三个变量(我看源码发现是五个变量),Vue 则需要维护四个变量. Vue 整体效率比 React 更高,举例说明:假设有 N 个子节点,我们只是把最后子节点移到第一个,那么 React 需要进行借助 Map 进行 key 搜索找到

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ w

  • vue的style绑定background-image的方式和其他变量数据的区别详解

    问题:使用vue加载图片变量,为了图片的自适应,需设置为背景图居中排布 <tr v-for="(item,index) in dataObj"> <td class="video-msg" v-bind:id="item.videoid"> <div class="videoImg fl" v-bind:style="{backgroundImage:'url(' + item.vide

  • Vue页面切换和a链接的本质区别详解

    Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转,这和传统的<a href="path" rel="external nofollow" ></a>何其相似!但它们到底有什么具体的区别呢? 对比<a>,Link组件

随机推荐