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>
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
暂无评论数据