在前端开发的世界里Vue.js 就像是我们手中的一把瑞士军刀，锋利且多变。然而当我们从熟悉的 Vue 2 跨越到 Vue 3 时hen多开发者心里其实多少是有点犯嘀咕的。那些曾经让我们爱不释手的“老伙计”——比如混入和过滤器，它们还好吗？还在原来的位置等着我们吗？说实话，这不仅仅是语法的升级，geng像是一场关于代码组织哲学的洗牌。今天咱们就撇开那些枯燥的官方文档，用一种geng接地气的方式，好好聊聊这两个特性在 Vue 2 和 Vue 3 中到底经历了怎样的“悲欢离合”。

还记得在 Vue 2 的黄金时代里mixins 是多么的流行吗？那时候，Ru果你有几个组件dou需要用到同一段逻辑，或者共享一些数据，混入简直就是救命稻草。它就像是一个万Neng的收纳袋，把 data、methods、生命周期钩子一股脑地装进去，然后在需要的时候，往组件里一倒，完事。

在 Vue 2 中，混入的核心逻辑其实非常简单粗暴：对象合并。当你把一个混入对象引入到组件中时Vue 会把混入对象里的选项和组件本身的选项进行“混合”。

这里有个hen有意思的细节，也是新手Zui容易踩坑的地方：优先级的问题。你Ke以把它想象成一场权力的游戏。当混入对象和组件自身拥有同名的属性时比如 data 里的数据，组件自身的属性通常会“无情地”覆盖掉混入进来的属性。不过对于生命周期钩子这种东西，Vue 又变得格外仁慈，它们不会覆盖，而是像排队一样，把混入的钩子和组件的钩子依次执行，而且混入的钩子会先被调用。

咱们来kan一段 Vue 2 风格的代码，感受一下那个时代的氛围：

// 定义一个通用的混入对象，比如叫 commonLogic.js
export const commonLogic = {
  data {
    return {
      msg: '我是来自混入的消息',
      color: 'green'
    }
  },
  methods: {
    sayHello {
      console.log;
    }
  },
  mounted {
    console.log;
  }
}
// 在组件中使用它
import { commonLogic } from './commonLogic';
export default {
  mixins: , // 像Zuo三明治一样夹进去
  data {
    return {
      title: '组件自己的标题',
      // Ru果这里也有个 msg，那上面的 msg 就被顶替了
      message: '这是组件独有的数据'
    }
  },
  methods: {
    // 组件自己的方法
    bindUpdateColor {
      this.color = 'blue'; // 我们Ke以直接修改混入里定义的数据
    }
  }
}

kan到没？这种方式在项目初期简直爽歪歪，代码复用变得轻而易举。但是随着项目越来越庞大，问题也随之而来。你可Neng会盯着一个变量发呆半天：“这玩意儿到底是谁定义的？是我自己写的，还是哪个混入偷偷塞进来的？”这种隐式依赖，就是 Vue 2 混入Zui大的痛点，像一团迷雾笼罩着代码。

到了 Vue 3，官方虽然保留了混入的功Neng，但它的地位Yi经大不如前了。为什么？因为 Composition API横空出世了。

Vue 3 推崇的是一种geng显式、geng函数式的代码组织方式。与其把一堆东西塞进一个对象里再合并，不如直接把逻辑封装成函数。这就像是从“大杂烩”变成了“点餐”，你需要什么功Neng，就引入什么函数，清清楚楚。

在 Vue 3 中，Ru果你非要用混入，也行，但写法上得配合 setup 函数。不过大多数时候，我们会用自定义 Hook 来替代它。kan下面这个例子，你会发现它比传统的对象混入geng纯粹：

// 定义一个组合函数，其实就是逻辑复用的新形态
import { ref, computed } from 'vue';
export default function useCounter {
  const count = ref;
  const plusOne = computed => count.value + 1);
  function hello {
    console.log;
  }
  // 把需要暴露给外部的数据和方法 return 出去
  return { count, plusOne, hello };
}
// 在 Vue 组件的 setup 中使用
import useCounter from './useCounter';
export default {
  setup {
    // 解构出来这就是你的“混入”了但来源一目了然
    const { count, plusOne, hello } = useCounter;
    return { count, plusOne, hello };
  }
}

这种方式彻底解决了“来源不明”的问题。所有的依赖dou是显式引入的，代码追踪起来简直不要太轻松。虽然 Vue 3 的 mergeOptions 依然支持混入，但Ru果你还在新项目里疯狂使用 Vue 2 风格的混入，那可真是“穿新鞋走老路”了。

说完了混入，咱们再来聊聊过滤器。这可是个让无数 Vue 2 开发者“意难平”的功Neng。那个竖线 |，曾经是我们处理文本格式化的神器。

在 Vue 2 的模板语法中，过滤器用起来简直不要太丝滑。它就像一个流水线上的工人，把上游的数据接过来加工一番，再输送到页面上。无论是转大写、格式化日期，还是货币转换，一个 | 搞定。

过滤器分为局部过滤器和全局过滤器。局部过滤器只Neng在当前组件里用，全局过滤器则一旦注册，整个项目douNeng用，就像通用的货币一样。

咱们来回忆一下 Vue 2 的经典写法：

{{ message | toLower }}

或者，你在 main.js 里全局注册一个：

// 全局注册，注意这里没有 s，叫 Vue.filter
Vue.filter {
  return value.split.reverse.join;
});

那时候，我们甚至Ke以串联使用过滤器：{{ message | filterA | filterB }}。这种语法糖确实hen甜，但也带来了一些尴尬。比如它只Neng在插值表达式 {{}} 和 v-bind 里用，你想在 v-model 或者方法里用？对不起，没门，或者得绕hen远的路。

然而到了 Vue 3，官方Zuo了一个相当果断的决定：移除过滤器。是的，你没听错，这个功Neng被彻底砍掉了。

hen多刚升级的开发者kan着报错一脸懵逼：“我的 | 怎么不管用了？”其实官方给出的理由hen充分。过滤器本质上就是一个 JavaScript 函数，而 Vue 3 有了geng强大的计算属性和普通方法，完全Neng覆盖过滤器的所有功Neng，而且geng灵活、geng易读。保留过滤器只会增加框架的复杂度，让新手在学习时多一个负担。

那么在 Vue 3 里我们该怎么实现“转小写”这种需求呢？hen简单，直接用计算属性或者方法调用。

kankan下面的 Vue 3 替代方案，你会发现虽然少了个符号，但逻辑geng清晰了：

import { computed, ref } from 'vue';
export default {
  setup {
    let message = ref;
    // 用计算属性替代过滤器
    let messageToLower = computed => {
      return message.value.toLowerCase;
    });
    // 或者直接定义一个方法
    const formatText =  => {
      return str.toLowerCase;
    };
    return {
      message,
      messageToLower,
      formatText
    };
  }
}

在模板里我们就直接写函数调用：

{{ messageToLower }}
{{ formatText }}

虽然kan起来代码量稍微多了一点点，但这是标准的 JavaScript 语法，任何懂 JS 的人一眼就Nengkan明白，不需要去专门查“Vue 过滤器怎么用”。而且，方法调用Ke以传递任意多的参数，比过滤器那种受限的参数传递方式要强得多。

回顾 Vue 2 到 Vue 3 的这段历程，混入和过滤器的命运截然不同。混入虽然还在但它的Zui佳替代者——Composition API Yi经成为了主流，引导我们写出geng健壮、geng易维护的代码；而过滤器则光荣退休，把舞台让给了geng通用的计算属性和方法。

其实技术迭代不就是这样吗？旧的、不够完美的东西终将被新的、geng优雅的设计所取代。当我们习惯了 Vue 3 的 setup 语法，习惯了用函数来组织逻辑，再回头kan Vue 2 的那些“黑魔法”，或许会有一种恍如隔世的感觉。所以别犹豫了赶紧跟上这趟列车，去享受 Composition API 带来的清爽吧！毕竟代码是写给人kan的，顺便给机器运行，Neng让自己和后来人doukan得舒服，才是硬道理。