Vue3.0的新特性 (9) data、mixin和filter

原创已于 2022-08-12 14:51:46 修改 · 置顶 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue3

于 2022-03-11 09:55:31 首次发布

vue 专栏收录该内容

28 篇文章

订阅专栏

Vue3中对data处理方式进行了调整，仅接受function并进行浅拷贝合并，避免了Vue2中对象数据类型的共享问题。同时，Vue3移除了过滤器filter，推荐使用方法调用或计算属性computed实现类似功能。这一变化影响了组件数据管理和文本内容的显示方式，开发者需要适应新的API和最佳实践。

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

在Vue2.x中，我们可以定义data为object或者function，但是我们知道在组件中如果data是object的话会出现数据互相影响，因为object是引用数据类型；

在Vue3中，data只接受function类型，通过function返回对象；同时Mixin的合并行为也发生了改变，当mixin和基类中data合并时，会执行浅拷贝合并：

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1,
        address: {
          prov: 2,
          city: 3,
        },
      }
    }
  }
}
const Component = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2,
        address: {
          prov: 4,
        },
      }
    }
  }
}

// vue2结果：
{
  id: 2,
  name: 'Jack',
  address: {
    prov: 4,
    city: 3
  }
}

// vue3结果：
user: {
  id: 2,
  address: {
    prov: 4,
  },
}

我们看到最后合并的结果，vue2.x会进行深拷贝，对data中的数据向下深入合并拷贝；而vue3只进行浅层拷贝，对data中数据发现已存在就不合并拷贝。

在vue2.x中，我们还可以通过过滤器filter来处理一些文本内容的展示：

<template>
  <div>{{ status | statusText }}</div>
</template>
<script>
  export default {
    props: {
      status: {
        type: Number,
        default: 1
      }
    },
    filters: {
      statusText(value){
        if(value === 1){
          return '订单未下单'
        } else if(value === 2){
          return '订单待支付'
        } else if(value === 3){
          return '订单已完成'
        }
      }
    }
  }
</script>