vue3 transition、watch、挂载api的变化
transition
动画的变化就是vue3调整了一下动画类名，原来vue2是：
.v-enter{
opacity: 0;
}
.v-leave{
opacity: 1;
}这两个在vue3中改为：
.v-enter-from{
opacity: 0;
}
.v-leave-to{
opacity: 1;
}其相关属性也对应发生了变化：
leave-class被重命名为leave-from-class（可以写成leaveFromClass在渲染函数或 JSX 中）enter-class被重命名为enter-from-class（可以写成enterFromClass在渲染函数或 JSX 中）
watch
watch不再支持通过监听string类型，且这个值可以xxx.xx的形式，这种方式的watch监听。
vue3中统一改为函数返回：
this.$watch(()=> this.foo.bar,(newVal,oldVal)=> {
console.log(newValue, oldValue);
})挂载api发生变化
在vue2时，如果我们new Vue声明的组件，且$mount挂载到#app上，这个组件上存在template选项，那么template选项的html内容会完全替换#app。
new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
// or
const app = new Vue({
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
app.$mount('#app')替换前：
<body>
<div id="app">
Some app content
</div>
</body>new Vue实例化后进行替换：
<body>
<div id="rendered">Hello Vue!</div>
</body>在vue3的时候，将不会直接替换，而是使用innerHTML去渲染#app内的元素。
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
app.mount('#app')<body>
<div id="app" data-v-app="">
<div id="rendered">Hello Vue!</div>
</div>
</body>版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
暂无评论数据