生命周期
vue2 --------------- vue3
beforeCreate -> setup()
Created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroyed -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
vue2定义数据变量是data(){},创建方法要在methods:{},而在vue3中直接在setup(){}中,定义数据以及方法,然后return
<script>
import {reactive,toRefs,} from 'vue'
export default{
name:'init',//模板名称
//setup相当于vue2中的 beforecreate和create
setup() {
const data = reactive({
data_1:''
})
const handapp = () =>
{
console.log('进入事件');
}
return {
...toRefs(data),
handapp
}
}
}
</script>
<style scoped>
</style>
vue3删除了this的使用
本文链接:https://www.cution.cn/48.html
https://www.pexels.com/zh-cn/collections/1379530-l47756n/
https://www.pexels.com/zh-cn/collections/1379530-f17napd/
https://www.pexels.com/zh-cn/collections/1379530-h8ytruy/
https://www.pexels.com/zh-cn/collections/1379530-8jblapw/
https://www.pexels.com/zh-cn/collections/1379530-rq09wrw/
https://www.pexels.com/zh-cn/collections/1379530-jjkewjv/
https://www.pexels.com/zh-cn/collections/1379530-bwriptj/
https://www.pexels.com/zh-cn/collections/1379530-tmawq1m/
https://www.pexels.com/zh-cn/collections/1379530-0sy22lm/
https://www.pexels.com/zh-cn/collections/1379530-yooiscz/
https://www.pexels.com/zh-cn/collections/1379530-dewn8cg/
https://www.pexels.com/zh-cn/collections/1379530-cgtat9t/
https://www.pexels.com/zh-cn/collections/1379530-9jdvtks/
https://www.pexels.com/zh-cn/collections/1379530-pevbeef/
https://infogram.com/1379530-1h7v4pdmyydjj4k?live
https://infogram.com/1379530-1h7v4pdmyy3xj4k?live
https://infogram.com/1379530-1h7v4pdmyy3784k?live
https://infogram.com/1379530-1hnp27exrr5py4g?live
https://infogram.com/1379530-1hnq41oxee31p23?live