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

在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>

最常见的就是处理一些订单的文案展示等；然而在vue3中，过滤器filter已经删除，不再支持了，官方建议使用方法调用或者计算属性computed来进行代替。

写在最后的话，如果文章对您有帮助请点下赞，收藏下防止忘记可以回看