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: '<App/>',
  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>
发布了28 篇原创文章 · 获赞 22 · 访问量 1910

猜你喜欢

转载自blog.csdn.net/qq_43709292/article/details/104333264
今日推荐