setup()中使用生命周期函数
在生命周期钩子前加上on来访问 并且需要保持小驼峰的命名方式,setup
中的生命周期函数不包括beforeCreate
和created。
onMounted:比以前的mounted有优势,以前生命周期函数只能存在一个,现在可以存在多个,可以根据业务需要拆分。
<template>
<div>
</div>
</template>
<script>
import { onMounted } from 'vue'
export default {
setup(){
onMounted(() =>{
console.log("生命周期函数:onMounted")
} )
onMounted(() =>{
console.log("生命周期函数:onMounted")
} )
}
}
</script>
<style>
</style>
Provide / Inject
▣ provide() / inject()实现嵌套组件之间的数据传递
▣只能在setup()函数中使用
▣父组件中使用provide()向下传递数据
▣子组件中使用inject()获取上层传递过来的数据
▣不限层级(只能父组件向子组件传递数据,不能反向)
<template>
<v3_special msg="数据"></v3_special>
<!-- 路由的显示入口 -->
<!-- <router-view> -->
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- </router-view> -->
<router-view></router-view>
</template>
<script>
import v3_special from "./views/Vue3_Sp2.vue"
import { provide } from 'vue'
export default {
name: 'App',
components: {
v3_special
},
setup(){
provide("key","我是key对应的值,来自父组件")
},
data(){
return{
title:"数据传递标题",
age:20,
names:["iren","maike"],
zi_to_fu_text:""
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script>
import { onMounted, inject } from 'vue'
export default {
setup(){
onMounted(() =>{
console.log("生命周期函数:onMounted");
} )
const msg = inject("key");
return{
msg
}
}
}
</script>
<style>
</style>
Fragment 不再限于模板中的单个根节点
以前外层只允许一个根节点,即最外层会包一个div,现在可以不用。
以前: 现在:文章来源:https://www.toymoban.com/news/detail-768845.html
文章来源地址https://www.toymoban.com/news/detail-768845.html
到了这里,关于vue3新特性 Ⅱ的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!