那些被 Vue3 废弃的特性（小白必看）

1、transition 类名变更

在Vue2中，transition 组件，内置的过渡类名分别有：

• v-enter:作用于开始的一帧。
• v-enter-active:作用与整个过程。
• v-enter-to:作用于结束的一帧。
• v-leave：离开过渡的开始状态，作用于开始的一帧。
• v-leave-active：作用于离开的整个过程。
• v-leave-to：作用于离开的最好一帧。

//使用案例：<template> <transition name=”box” >  <div class=”chart” v-if=”show”></div> </transition></template><style> .chart{  width:500px;  height:200px;  background:lightcoral;}.box-enter-active,.box-leave-active{ transition:all 2s;}.box-enter,.box-leave-to{  opacity:0}.box-enter-to,.box-leave{  opacity:1}     </style>在 Vue3 中 transition 类名变更有：

• v-enter –> v-enter-from
• v-leave –> v-leave-from

2、Event api 被移除

2.1、keyCode作为 v-on 的修饰符被移除

在vue2 中，使用 keyCode 指代某个键，如：

<input @keyup.13=”submit” type=”text” > 回车键盘弹起时执行 submit 事件。

而 vue3 不再支持，只能使用 alias的方式，将keyCode替换成它的别名。

<input @keyup.enter=”submit” type=”text” >
2.2、$on、$off 和 $once 被移除

$on 用于兄弟组件之间的数据传输。如：

//组件ApostValue(){ Event.$emit(‘aevent’,’传递的值’)}//组件Bmounted(){ Event.$on(‘aevent’,(val)=>{   //val就是传递过来的值 })}$off 是移除自定义事件的监听

postValue(){ this.$emit(‘aevent’,’传递的值’) this.$off(‘aevent’,()=>{  //移除监听器成功的回调，可加可不加 })}// 父组件的 @aevent 中的事件只会执行一次$once 监听一个自定义事件，但是只能触发一次，一旦触发后，监听器就会被移除。

<button @click.once=”handleClick”></button>在Vue3中，被认为不应该由 vue 提供，因此被移除了可以，可以使用其他的三方库实现。如mitt.js


3、根容器区别

innerHTML 与 outerHTML 的区别

innerHTML 从开始到结束的全部内容，不包含 html 标签 ，而 outerHTML 包含标签。

vue2 与 vue3 根容器区别

vue2 中应用程序根容器的 outerHTML 会被根组件的模板替换，或编译为模板。

vue3 中使用根容器的 innerHTML取代，作为模板。

可以给 <div id=”APP”></div> 添加一个类名，查看元素就可以看出来。


4、filter 过滤器被移除

在Vue2中，过滤器分为两种：局部过滤器 和 全局过滤器。

全局过滤器：

Vue.filter( ‘dFor’, msg => { return msg.replace(/AA/g,’xxxxxx’)})局部过滤器：

export default { filters:{  dataFormat(s){   return s+’aaa’  } }}全局和局部过滤器相同名时，就近原则，使用局部过滤器，一个表达式可使用多个过滤器，使用”|”隔开，按顺序执行。

但是在vue3中，将 filter 移除后，推荐使用计算属性来展示，还可以全局注册过滤计算属性。


5、watch 监听器改变

组件的 watch 选项和实例方法 $watch 不再支持点分割字符串路径，可以使用计算函数作为 $watch 参数实现。

this.$watch(()=>{        },()=>{})