v3 随手记

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

注意我们使用了 <script type="module">，且导入的 CDN URL 指向的是 Vue 的 ES 模块构建版本。

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

vue3：
除了components，全部包到setup()函数中，或者 <script setup>
import { nextTick,onMounted } from 'vue'; // 显式导入
const state = reactive({}），let qrcodelen = computed(() => {}），const methods = {}， onMounted(() => {}），
<script setup>不需要这一步
return{...toRefs(state), ...methods,qrcodelen}

let job=ref({})，function say(){ job.value.salary='12k' }，相当于state，

import { useRouter } from "vue-router";
const router = useRouter();
router.push("/shopIntegral/createRule");

import { toRefs, defineProps } from 'vue'
const props = defineProps({
  //子组件接收父组件传递过来的值
  info: String,
})
//使用父组件传递过来的值
const {info} =toRefs(props)


日期组件
const disabledDate = (time: Date) => {
    // console.log(time);
    let curDate = new Date();
    let preDate = new Date(curDate.getTime() - 48 * 60 * 60 * 1000);
    let nextDate = new Date(curDate.getTime() + 30 * 24 * 60 * 60 * 1000);
    return time.getTime() < preDate || time.getTime() > nextDate
};



// deepClone
export function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {}
    if (obj && typeof obj === 'object') {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (obj[key] && typeof obj[key] === 'object') {
                    objClone[key] = deepClone(obj[key])
                } else {
                    objClone[key] = obj[key]
                }
            }
        }
    }

    return objClone
}

// 可以多元素
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

异步组件（Suspense）

Vue3 提供 Suspense 组件，允许程序在等待异步组件加载完成前渲染兜底的内容，如 loading ，使用户的体验更平滑。使用它，需在模板中声明，
并包括两个命名插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。

<tempalte>
  <suspense>
    <template #default>
      <List />
    </template>
    <template #fallback>
      <div>
        Loading...
      </div>
    </template>
  </suspense>
</template>

Teleport

Vue3 提供 Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置。比如项目中常见的 Dialog 弹窗。
<teleport to="body">
  <div class="dialog" v-if="dialogVisible">
    我是弹窗，我直接移动到了body标签下
  </div>
</teleport>

调用子组件方法

<Son ref="RefChilde"></Son>
const RefChilde = ref();     //RefChilde 要和Son组件上的class名相同
const fnCallChild = () => {
      RefChilde.value.sonFn();      //sonFn是子组件里的方法
    };

2021.6记录点