移除的API
keyCode作为v-on修饰符被移除
- 非兼容：不再支持使用数字 (即键码) 作为
v-on修饰符 - 非兼容：不再支持
config.keyCodes
在 Vue 2 中，keyCodes 可以作为修改 v-on 方法的一种方式。
<!-- 键码版本 --> <input v-on:keyup.13="submit" /> <!-- 别名版本 --> <input v-on:keyup.enter="submit" />
此外，也可以通过全局的 config.keyCodes 选项定义自己的别名。
Vue.config.keyCodes = {
f1: 112
}
<!-- 键码版本 --> <input v-on:keyup.112="showHelpText" /> <!-- 自定义别名版本 --> <input v-on:keyup.f1="showHelpText" />
在vue3中建议对任何要用作修饰符的键使用 kebab-cased (短横线) 名称。
<!-- Vue 3 在 v-on 上使用按键修饰符 --> <input v-on:keyup.page-down="nextPage"> <!-- 同时匹配 q 和 Q --> <input v-on:keypress.q="quit">
config.keyCodes 现在也已弃用，不再受支持。
事件 API的变化
$on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口。上述3个方法被认为不应该由vue提供，因此被移除了。
$emit仍然包含于现有的API中，因为它用于触发由父组件声明式添加的事件处理函数
app.vue
<template>
<div>
<com @cut="fun"></com>
</div>
</template>
<script>
import com from "./components/com.vue"
export default {
components:{
com
},
methods:{
fun(){
console.log("父组件声明的添加的事件处理函数")
}
}
}
</script>
com.vue
<template>
<div>
<button @click="$emit('cut')">click</button>
</div>
</template>
如果我们要用编程式的方式派发事件，需要借助于第三方库来实现 mitt
npm install mitt
com.vue
<template>
<div>
mycom
<button @click="$emit('cut')">触发事件</button>
<button @click="fn">派发事件 someEvent</button>
</div>
</template>
<script>
import mitt from 'mitt'
export const mitter=mitt()
export default {
methods:{
fn(){
mitter.emit('someEvent',"编程式方式派发事件")
}
}
}
</script>
创建mitter事件派发器
comtwo.vue
<template>
<div>
comtwo
</div>
</template>
<script>
import {mitter} from './com'
export default {
mounted(){
// 监听事件
mitter.on('someEvent',(e)=>{
console.log(e)
})
}
}
</script>
Filters过滤器移除
在vue3中，过滤器已删除，不再支持，我们建议用方法调用或计算属性来替换它们
app.vue
<template>
<div>
<filtertest :countPrice="price"></filtertest>
</div>
</template>
<script>
import filtertest from "./components/filtertest.vue"
export default {
components:{
filtertest
},
data(){
return {
price:10000
}
}
}
</script>
filtertest.vue
<template>
<div>
{{countPrice}}
<br/>
{{changePrice}}
</div>
</template>
<script>
export default {
props:{
countPrice:{
type:Number,
required:true
}
},
computed:{ //计算属性代替过滤器
changePrice(){
return '$'+this.countPrice
}
}
}
</script>
如果在应用中全局注册了过滤器，那么在每个组件中用计算属性或方法调用来替换就没那么方便了，可以通过定义全局属性在所有组件中使用
main.js
import { createApp,createRenderer} from "vue";
import App from "./App.vue";
const app=createApp(App);
//定义全局属性
app.config.globalProperties.$filters={
currentUSD(e){
return '$'+e
}
}
app.mount("#app")
filtertest.vue
<template>
<div>
{{countPrice}}
<br/>
{{$filters.currentUSD(countPrice)}}
</div>
</template>
<script>
export default {
props:{
countPrice:{
type:Number,
required:true
}
},
}
</script>
注意：这种方法只能用于方法中，不可以在计算属性中使用
移除内联模板 Attribute
在 2.x 中，Vue 为子组件提供了 inline-template attribute，以便将其内部内容作为模板使用，而不是作为分发内容。
<my-component inline-template>
<div>
<p>它们将被编译为组件自己的模板，</p>
<p>而不是父级所包含的内容。</p>
</div>
</my-component>
inline-template的大多数用例都假设没有构建工具设置，所有模板都直接写在HTML页面中，vue3不再支持
使用script替代
使用script定义模板
<body>
<div id="app">
<my></my>
</div>
<script type="text/html" id="my-template">
<div>
hello
</div>
</script>
<script>
const {createApp}=Vue
const app=createApp({})
app.component('my',{
// 使用选择器将模板作为目标
template:"#my-template"
})
app.mount('#app')
</script>
</body>
默认slot
使用 inline-template的组件也可以使用默认slot--进行重构，这使得数据范围更加明确，同时保留了内联编写子内容的便利性
<body>
<div id="app">
<child-component v-slot="{childState}">
<div>
<h2>在父组件中定义子组件模板</h2>
<p>{{childState}}</p>
<p>{{parentData}}</p>
<div>
</child-component>
</div>
<script>
const {createApp}=Vue
const app=createApp({
data(){
return {
parentData:"父组件定义的数据"
}
}
})
app.component('child-component',{
template:`<slot :childState="childState"></slot>`,
data(){
return {
childState:"子组件定义的数据"
}
}
})
app.mount('#app')
</script>
</body>
在vue3中，slot可以渲染为具有原生fragments支持的根目录
<div id="app">
<child-component v-slot="{childState}">
<h2>在父组件中定义子组件模板</h2>
<p>{{childState}}</p>
<p>{{parentData}}</p>
</child-component>
</div>
$children实例已移除
$destroy实例已移除
propsData也被vue3移除
