Ruin/vue-frame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Ruin
2022-03-10 17:51:37 +08:00
parent db6e49ad10
commit 07be80f1d4
1 changed files with 8 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/home/index.vue
View File

@@ -4,7 +4,7 @@
* @Author: Ruin 🍭 * @Author: Ruin 🍭
* @Date: 2022-03-10 10:11:06 * @Date: 2022-03-10 10:11:06
* @LastEditors: 刘引 * @LastEditors: 刘引
* @LastEditTime: 2022-03-10 11:56:34 * @LastEditTime: 2022-03-10 13:02:31
--> -->
<template> <template>
<div class="root-home"> <div class="root-home">
@@ -15,7 +15,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeMount, onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue'; import { onBeforeMount, onDeactivated, onMounted, onUpdated, reactive, ref } from 'vue';
let res = ref('我是响应式数据') let res = ref('我是响应式数据')
let moreRes = reactive([{ title: '我是复杂数据' }, { title: '我是复杂数据' }, { title: '我是复杂数据' }]) let moreRes = reactive([{ title: '我是复杂数据' }, { title: '我是复杂数据' }, { title: '我是复杂数据' }])
const getData = () => { const getData = () => {
@@ -32,24 +32,18 @@ const changeData = () => {
console.log('触发'); console.log('触发');
} }
// localStorage.setItem('key', res) // localStorage.setItem('key', res)
// dom结构还未完成渲染
onBeforeMount(() => { onBeforeMount(() => {
console.log('触发'); console.log('dom渲染之前触发');
}) })
// dom结构渲染完成
onMounted(() => { onMounted(() => {
console.log('dom渲染完毕'); console.log('dom渲染完毕时触发')
}) })
// 在界面数据更改时会触发
onUpdated(() => { onUpdated(() => {
console.log('触发'); console.log('在界面数据更改时会触发');
}) })
onUnmounted(() => { onDeactivated(() => {
// res.value = '我的值被更改' console.log('组件销毁时触发');
// console.log(res.value);
}) })