ES2015(又名 ES6)是当前 JavaScript 语言的规范. 如果您是 JavaScript 新手或者最近没有更新 JavaScript 知识, 那么在 ES2015 中有许多新特性可以使开发变得更好, 更有趣.
如果您是 vue 开发人员, 那么您将从学习所有这些新特性中获益. 但是作为一种分类的方法, 您可以从那些专门应用于 Vue 的特性开始.
在本文中, 我将向您展示您将每天使用 Vue 的四个 ES2015 功能. 我将提供每个的解释和简要示例.
箭头功能
模板文字
模块
解构和扩展语法
1. 箭头功能
箭头函数是一种声明 JavaScript 函数的新方法. 它们提供了更短的语法, 但在其他方面也不同于常规 JavaScript 函数.
- // Regular JavaScript function
- function(parameters) {
- statements
- }
- // Arrow function
- (parameters) =>{
- statements
- }
无约束力 this
箭头函数的一个重要特性是它们不绑定值 this. 相反, 他们使用 this 封闭的上下文.
考虑需要回调函数的 JavaScript 数组方法. 例如, array.filter 允许您返回一个新数组, 只包括那些与回调定义的筛选器匹配的项.
vue.js 的一个重要特性是, 您可以 this.vueProperty 从 Vue 配置对象的上下文中轻松访问数据属性, 计算属性和方法.
但是, 如果使用常规函数进行回调, 它将为此绑定自己的值. 您不能这样引用 Vue 对象的属性. 在回调函数中, 必须在回调函数的范围内手动创建 vueProperty.
在下面的示例中, size 是一个数据属性. 在 fitlerBySizecomputed 属性中, 我们需要声明一个变量, size 以便可以在 filter 回调中使用此值:
- new Vue({
- data: {
- size: 'large',
- items: [{
- size: 'small'
- },
- {
- size: 'large'
- }]
- },
- computed: {
- filterBySize() {
- let size = this.size;
- return this.items.filter(function(item) {
- return item.size === size;
- // Note: this.size is undefined
- });
- }
- }
- });
箭头函数使用 this 封闭上下文中的对象. 在这种情况下, 它来自 filterBySize 计算属性, 它绑定了 Vue 对象 this, 这简化了 filter 回调:
- filterBySize() {
- return this.items.filter((item) =>{
- return item.size === this.size;
- });
- }
问题
虽然箭头函数可以在许多情况下有效地使用, 但这并不意味着我们在开发 Vue 时应该一直使用它们. 实际上, 您不应该将箭头函数用作 Vue 配置对象上的函数属性, 因为它们需要从 Vue 构造函数访问这个上下文.
- // Regular function
- var regular = new Vue({
- data: {
- val: 'Hello world'
- },
- computed: {
- upperCase() {
- return this.val.toUpperCase();
- }
- }
- });
- console.log(regular.upperCase); // HELLO WORLD
- // Arrow function
- var arrow = new Vue({
- data: {
- val: 'Hello world'
- },
- computed: {
- upperCase: () =>{
- return this.val.toUpperCase();
- }
- }
- });
- console.log(arrow.upperCase);
- // Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
单参数和隐式返回
在某些情况下, 您可以使箭头函数语法更加简洁. 如果您的函数只有一个参数, 则可以删除括号(). 如果你的函数中只有一个表达式, 你甚至可以删除大括号{}!
这是上面的数组过滤器回调, 实现了这些简写:
- filterBySize() {
- return this.items.filter(item =>item.size === this.size);
- }
2. 模板文字
模板文本使用反引号 (` `) 而不是双引号或单引号来定义字符串.
模板文字允许我们在 Vue.JS 中做两个超级有用的东西:
多行字符串(非常适合组件模板)
嵌入式表达式(非常适合计算属性)
多行字符串
在 JavaScript 代码中编写模板并不理想, 但有时我们需要 / 需要. 但是如果模板有很多内容呢? 在 ES2015 之前, 我们有两种选择:
首先, 把它全部放在一行:
- Vue.component({
- template: '<div><h1>{{ title }}</h1><p>{{ message }}</p></div>'
- });
当线路变长时, 这真的很难读.
- Vue.component({
- template: '<div>' + '<h1>{{ title }}</h1>' + '<p>{{ message }}</p>' + '</div>'
- });
- Vue.component({
- template: ` <div> <h1> {
- {
- title
- }
- } </h1>
- <p>{{ message }}</p> </div>`
- });/
- new Vue({
- data: {
- name: 'George'
- },
- computed: {
- greeting() {
- return 'Hello,' + this.name + ', how are you?'
- }
- }
- });
- new Vue({
- data: {
- name: 'George'
- },
- computed: {
- greeting() {
- return`Hello,
- $ {
- this.name
- },
- how are you ? `
- }
- }
- });
- export
- default {
- myVal:
- 'Hello'
- }
- import obj from './file1.js';
- console.log(obj.myVal); // Hello
- Vue.component('component1', {
- ...
- });
- Vue.component('component2', {
- ...
- });
- Vue.component('component3', {
- ...
- });
- new Vue({
- ...
- });
- export default {
- // component definition
- };
- import component1 from './component1.js';
- Vue.component('component1', component1);
- ...
- let myObj = {
- prop1: 'Hello',
- prop2: 'World'
- };
- const prop1 = myObj.prop1;
- const prop2 = myObj.prop2;
- let myObj = {
- prop1: 'Hello',
- prop2: 'World'
- };
- const {
- prop1,
- prop2
- } = myObj;
- console.log(prop1);
- // Output: Hello
- actions: {
- increment(context) {
- // context.state
- // context.commit(...)
- }
- }
- actions: {
- increment({
- commit
- }) {
- commit(...);
- }
- }
- let myObj = {
- prop1: 'Hello',
- prop2: 'World'
- };
- let newObj = {
- name: 'George',
- prop1: myObj.prop1,
- prop2: myObj.prop2
- };
- console.log(newObj.prop1); // Hello
- let newObj = {
- name: 'George',
- ...myObj
- };
- console.log(newObj.prop1); // Hello
- new Vuex.Store({
- state: {
- prop1: ...,
- prop2: ...,
- prop3: ...
- }
- });
- new Vue({
- computed: {
- prop1() {
- return store.state.prop1;
- },
- prop2() {
- return store.state.prop2;
- }...
- }
- });
- import {
- mapState
- }
- from 'vuex';
- var state = mapState(['prop1', 'prop2', 'prop3']);
- console.log(state.prop1) // { ... }
- import {
- mapState
- }
- from 'vuex';
- new Vue({
- computed: {
- someLocalComputedProp() {...
- },
- ...mapState(['prop1', 'prop2', 'prop3'])
- }
- });
来源: http://www.css88.com/web/vue-js/12004.html