vue 同时调两个方法_Vue 两个版本的区别和使用方法

详细可参考：vue不同的构建版本

一、两个版本对应的文件名

• 完整版，文件名为vue.js
• 只包含运行时版（非完整版），文件名为vue.runtime.js

两个版本的对比：

这两个版本最大的区别在于：完整版含有complier(编译器)，而非完整版则没有，因此完整版文件体积比非完整版大了30%左右

• 完整版：同时包含编译器和运行时的版本。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
• 运行时版本：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

• 为了保证用户体验，需要用户下载的JS文件体积更小，所以使用非完整版
• 为了保证开体验，开发者可直接在Vue文件里写HTML标签，不写h函数
• 非完整版只支持h函数，为了解决这个问题，我们使用vue-loader把vue文件里的HTML转为h函数

二、template 和 render

template----html的方式做渲染； render----js的方式做渲染

render是一种编译方式，render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。 h就是createElement()方法

• 完整版：不需要去写render函数，使用template，代码写法如下：

new Vue({
    el:"#app",
    tempalte:`<div>{{n}}</div>`,
    data(){
        retrun {
           n:0
        }
    }
})

这样子就可以将n渲染在index.html里的{{n}}

• 运行版（非完整版）：需要render函数，配合单文件组件使用，

脚手架搭建的项目默认配置的是非完整版

import Vue from 'vue'import App from './App.vue'
new Vue({
  render: h => h(App)
}).$mount("#app");

这里面的App就是单文件组件

建议：总是使用非完整版，然后配合vue-loader和vue单文件组件（随心写html代码，render函数直接引入，开发体验棒！）。

三、如何用codesandbox.io写 Vue 代码

CodeSandbox是一个免费的在线代码编辑器，主要聚焦于创建 Web 应用项目。当前已经进化为可以同时支持浏览器端以及服务端的 web 应用。

1、点击进入网站：

点击右上角 create Sanbox

点击Vue,如果你想用别的框架，也可以点击react或则angular

项目创建完成，可以 写代码啦