简单整理一下vue2和vue3【一】

<script setup>
import { defineEmits } from 'vue'
//显式声明emit,触发多个事件时以数组的形式声明
const emit = defineEmits(['emit1', 'emit2'])
const handleChange = (val) => {
    emit('emit1', val.emit1)
    emit('emit2', val.emit2)
}
script>
 
<common-item @emit1="getEmit1" @emit2="getEmit2">common-item>
<script setup>
const getEmit1 = (val) => {
    console.log('emit1',val)
};
const getEmit2 = (val) => {
    console.log('emit2',val)
};
script>

组件B:

localStorage

这个兄弟不归vue管，没有什么你的我的，用起来也比较简单，存取操作。

Window.localStorage - Web API 接口参考 | MDN只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

计算属性computed

// html
<div>{{ total(3) }}div>
<div v-if="isShow">测试元素div>
// js
computed: {
    total() {
        return function (n) {
            return n * this.num
        }
    },
    isShow: function() {
        return this.role === 'admin' && this.age > '18'
    }
}
 
// html
<div>{{ total(3) }}div>
<div v-if="isShow">测试元素div>
// js
<script setup>
import { computed } from 'vue'
const total = computed(() => (n) => {
    return n * this.num
})
const isShow = computed(() => {
    return this.role === 'admin' && this.age > '18'
})
script>

watch

watch: {
    formData: {
        handler(newForm, oldForm) {
            console.log(newForm)
        },
        immediate: true,
        deep: true
    }
}
 
<script setup>
import { watch } from 'vue'
watch(
    () => formData,
    (newForm, oldForm) => {
        console.log(newForm)
    },
    { immediate: true, deep: true }
)
script>

生命周期钩子

我们可以使用生命周期钩子在组件各个生命阶段添加逻辑，如常见的onMounted。

vue2图示：Vue 实例 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

vue3图示：生命周期钩子 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/guide/essentials/lifecycle.html

生命周期钩子：

组合式 API：生命周期钩子 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/api/composition-api-lifecycle.html

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy-> onBeforeUnmount
• destroyed-> onUnmounted

nextTick

data(){
    return {
        visible: false
    }
}
// 直接使用
this.$nextTick(() => {
    // 执行操作
    this.visible = true
    this.getData()
})
 
<template>
    <div class="main-content">
        <p v-if="visible">hellop>
    div>
template>
<script setup>
import { ref, nextTick } from 'vue'
const visible = ref(false)
// 使用
nextTick(() => {
    // 执行操作
    visible.value = true
    this.getData()
})
script>
 
官方：
const count = ref(0)
async function increment() {
  count.value++
  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0
  await nextTick()
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}