巧用 ES6，轻松优化 Vue 代码

最新推荐文章于 2023-06-18 20:24:06 发布

z-robot

最新推荐文章于 2023-06-18 20:24:06 发布

阅读量243

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/z_robot/article/details/113440141

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了JavaScript ES6中的简写方法定义、解构、从this解构、作用域插槽以及新数组方法的使用，展示了如何提高代码的简洁性和效率。同时，通过比较箭头函数和传统函数在处理this上下文时的区别，阐述了箭头函数的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简写方法定义


// Without shorthand（没有简写）
{
  methods: {
    getValue: function() { // ... }
  },
  computed: {
    halfValue: function() { // ... }
  },
  created: function() { // ... }
}

// With ES6 shorthand（使用ES6简写）
{
  methods: {
    getValue() { // ... }
  },
  computed: {
    halfValue() { // ... }
  },
  created() { // ... }
}

解构

const person = { name: 'Jake', email: 'jake@example.com', phone: '555-555-5555' }

// With destructuring（使用解构）
const { name, email, phone } = person

// Without destructuring（没有解构）
const name = person.name
const email = person.email
const phone = person.phone

从 this 解构

data() {
  return {
    endpoint: 'example.com/api',
  }
},
methods: {
  postForm() { // this is just an example method we can call in submitForm }
  submitForm() {
    // Without destructuring（没有解构）
    const endpoint = this.endpoint
    const postForm = this.postForm

    // With destructuring（使用解构）
    const { endpoint, postForm } = this
  }
}

作用域插槽

<!-- Without Destructuring（没有解构） -->
<User v-slot="slotProps">
  <div>Name: {{ slotProps.name }}</div>
  <div>Email: {{ slotProps.email }}</div>
</User>

<!-- With Destructuring（使用解构） -->
<User v-slot="{ name, email }">
  <div>Name: {{ name }}</div>
  <div>Email: {{ email }}</div>
</User>

新数组方法

computed: {
  // Without "filter" functional array method（不使用数组方法）
  oldFilteredItems() {
    const filtered = []
    for (const item in this.items) {
      if(item.value > 10) {
        filtered.push(item)
      }
    }
    return filtered
  },
  // With "filter" functional array method（使用数组方法）
  filteredItems() {
    return this.items.filter((item) => item.value > 10)
  }
}

箭头函数

data() {
  return {
    scrolled: false
  }
},
mounted() {
  window.addEventListener('scroll', function() {
    this.scrolled = true
  })
}

mounted() {
  window.addEventListener('scroll', () => {
    this.scrolled = true
  })
}