Vue的完整版与非完整版

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

一.Vue 两个版本的区别

Vue包含两个版本：

1. 完整版Vue (引入vue.js)
2. 非完整版Vue（引入vue.runtime.js）

两个版本的区别：

实践出真知=>选择非完整版Vue的理由：

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

二.template与render的使用

1.完整版template, 引入vue.js

new window.Vue({
  el: "#app",//我要对这个div进行一个mvc的封装
  template: `
    <div @click="add">
      {{n}}
      <button> +1 </button>
    </div>
  `,
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

2.非完整版render, 引入vue.runtime.js

运行时版本 使用vue-cli创建的目录默认会使用这个vue.runtime.js

用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。 这种方式不能直接从HTML页面里面获取数据，需要使用 render 函数

new window.Vue({
  el: "#app",
  render(h){// vue 会给 render 传一个参数这个参数是一个可以创建html的函数
    return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
  },
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

这种方式更加的灵活独立，因为运行时版本相比完整版体积要小大约 30%，这样用户在使用产品时就会效果更好，所以应该尽可能使用这个版本。 但是这种使用 render 函数的方式显得很麻烦,因此 webpack 提供了 vue-loader 当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

vue-loader可以把 html模板编译成 render函数的js代码，这样在我们最后build的时候就会产生一个运行时的版本，从而使体积最小

只需要写成.vue文件

//  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++
    }
  }
}
</script>

<style scoped>
  .red{
    color: red;
  }
</style>

vue-loader会把这个demo.vue文件变成一个对象,使用render函数渲染这个对象即可

new Vue({ 
  el:'#app',
  render(h) {     
    return  h(demo)
  },
})

这种形式也叫vue单文件组件

因为这种方式是js动态创建的dom，所以这种方式会引起SEO不友好的问题

三.SEO(搜索引擎优化)

所谓的搜索引擎优化就是搜索引擎不停的 curl 一个页面，搜索引擎根据 curl 的内容去分析猜测页面内容

优化的方式：

1. 把title、description、keyword、h1、a 写好即可
2. 原则:让curl能得到页面的信息，SEO就能正常工作