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: '',
  components: {
      APP
  }
})

​ 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内部的处理过程是这样的：

1. Vue将template中的各个元素解析成AST(Absoult Syntax Tree)抽象语法树；
2. 抽象语法树被编译成render函数；
3. render函数被渲染成virtual dom虚拟dom元素；
4. 浏览器将虚拟dom元素展示在界面上；

​ 而我们的runtime-only版本会省略第一、二步，直接通过render函数渲染成虚拟dom，并展示在界面上，由此我们可以发现，runtime-only版本的性能较高，代码量也较少，所以在选择的时候它会提示我们选择runtime-only版本的文件会少6kb。

​ 以上的h函数实际上就类似于createElement函数，它有两种用法：

1. createElement('标签名',{标签的类型},[标签的值])例如：

   render : function (createElement){
      return createElement('h2',{class:'box'},['hello']);
   }
   

2. 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有哪些改变？

  1. vue-cli3是基于webpack4打造，vue-cli2还是webpack3;
  2. vue-cli3的设计原则是“0配置”，移除了配置文件根目录下的build和config等目录；
  3. vue-cli3提供了vue ui命令，提供了可视化的配置，更加人性化；
  4. 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>