Vue.js学习第十天——webpack中VueCLI3的创建及ES6相关
Vue.js学习第十天——webpack中VueCLI3的创建及ES6相关
一. runtime-compiler和runtime-only的区别
在安装CLI2的版本的时候，我们同时安装了一个选择runtime-compiler另一个选择runtime-only的版本，我们现在来对比一下它们的区别
runtime-compiler版本：
import Vue from 'Vue'
import App from './App'
Vue.config.productionTip = false;
new Vue({
el: '#app',
template: ' runtime-only版本：
import Vue from 'Vue'
import App from './App'
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App)
})
我们发现在main.js文件中两者在创建Vue实例的属性和参数是不一样的，下面我们可以来分析一下两者的不同，实际上，在runtime-compiler版本中Vue内部的处理过程是这样的：
- Vue将template中的各个元素解析成AST(Absoult Syntax Tree)抽象语法树；
- 抽象语法树被编译成render函数；
- render函数被渲染成virtual dom虚拟dom元素；
- 浏览器将虚拟dom元素展示在界面上；
而我们的runtime-only版本会省略第一、二步，直接通过render函数渲染成虚拟dom，并展示在界面上，由此我们可以发现，runtime-only版本的性能较高，代码量也较少，所以在选择的时候它会提示我们选择runtime-only版本的文件会少6kb。
以上的h函数实际上就类似于createElement函数，它有两种用法：
-
createElement('标签名',{标签的类型},[标签的值])例如：render : function (createElement){ return createElement('h2',{class:'box'},['hello']); } -
createElement(组件的名称)例如：render : function (createElement){ return createElement(App); }
在项目运行时，runtime-only版本中会将template预编译成JavaScript，一旦打包时，已经是编译完成的版本，浏览器不用做编译的步骤；runtime-compiler版本中并不是在打包时进行编译的，而是在客户端使用其自带的compiler进行编译。
那么，runtime-compiler版本中的.vue文件中的template是由谁处理的呢？
实际上是由 vue-template-compiler 处理的。所以现在当我们了解了它们的区别后，会发现选择runtime-only更加合理。
二. VueCLI3的创建及使用
-
安装命令：
vue create my-project -
配置：脚手架3的配置相较于脚手架2来说更加简洁一些，我们在选择安装的其他插件的时候勾选一个Babel即可；
-
与CLI2有哪些改变？
- vue-cli3是基于webpack4打造，vue-cli2还是webpack3;
- vue-cli3的设计原则是“0配置”，移除了配置文件根目录下的build和config等目录；
- vue-cli3提供了vue ui命令，提供了可视化的配置，更加人性化；
- vue-cli3移除了static文件夹，新增public文件夹，并且index.html移动到public中。
-
配置文件的查看与修改：
方法一：通过命令
vue ui通过可视化界面来修改配置文件； 方法二：在 node_modeules/@vue/cli-service/webpack.config.js;
方法三：在自己项目的根目录下，创建vue.config.js文件，添加自己的配置即可。
三. ES6语法相关
1. 箭头函数的使用和this的指向
使用就不赘述了，注意一下，没有参数的时候不用写（），没有返回值的时候不用 { }即可
这里讲一下箭头函数中this的指向，箭头函数中的this引用的就是最近作用域中的this，见以下 案例：
<script>
const obj = {
aaa() {
setTimeout(function () {
setTimeout(function () {
console.log(this);
})
setTimeout(() => {
console.log(this);
})
})
setTimeout(() => {
setTimeout(function () {
console.log(this);
});
})
setTimeout(() => {
console.log(this);
});
}
}
obj.aaa();
</script>
这里前三个的this指向的都是window，最后一个this指向的是obj对象，当我们使用funciton时，内部自动会传入window对象，所以不论怎么变化，funciton中的this指向的都是window，而箭头函数的this就会往他上一级找，直到找到有this的定义，类似于冒泡出去。
2.作用域的问题
在ES5之前只有函数有作用域的概念，而for循环和if都没有块级作用域，到ES6之后，使用let就 会有块级作用域，所以在ES6中我们优先使用const，只有需要改变某一个标识符的时候才使用let。
3.高阶函数
1.filter:对数据进行过滤，filter中的回调函数必须返回一个布尔值
true:函数内部会自动将这次回调的n创建一个新的数组；
false:函数内部会自动过滤掉这次的n
2. map: 对数据进行相关处理
3.reduce：对数组中的数据进行汇总，详情见下面的一个例子：
例子中要求先将小于100的数筛选出，再对小于100的数乘以2，最后将乘以2的数字相加
<script>
const array = [10,20,30,50,111,20,30,555,666,20];
// --------------写法一--------------------------
// // 1. filter的使用 必须返回的布尔值
// // 若返回true 函数内部会自动将这次回调的数据创建一个新的数组并保存
// // 若返回false 函数内部会过滤掉这次的数据
// let array2=array.filter(function(n){
// return n<100;
// });
// console.log(array2);
// //2. map的使用 对数据进行相关处理
// let array3 = array2.map(function(n){
// return n*2;
// //return 100;
// });
// console.log(array3);
// //3.reduce的使用 对数据进行汇总
// //array3=[20,40,60,100,40,60,40]
// //第一次： pre:0 n:20
// //第二次： pre:20 n:40
// //第三次: pre:60 n:60 ......
// let total = array3.reduce(function(previous,n){
// return n+previous;
// },0);
// console.log(total);
// --------------写法二--------------------------
// let total = array.filter(function(n){
// return n<100;
// }).map(function(n){
// return n*2;
// }).reduce(function(pre,n){
// return pre+n;
// },0);
// console.log(total);
// --------------写法三--------------------------
let total = array.filter(n => n<100).map(n => n*2).reduce((pre,n) => pre+n);
console.log(total);
</script>