Final Cut Pro 10.6.10中文用法儿

1.vite构建vue

npm init vite@latest

2.src下创建router文件夹，router文件夹创建index.js文件

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/about",
        name: "About",
        component: () =>
            import(/* webpackChunkName: "about" */ "../views/About.vue"),
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

2.src下创建views文件夹，views文件夹创建About.vue、Home.vue两个路由文件

3.安装插件AutoImport（自动导入 Vue 相关函数，如：ref, reactive, toRef 等），并设置可以让@来代替src使用。

npm i unplugin-auto-import -D

vite.config.js写法如下

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from "unplugin-auto-import/vite"; //自动导入 Vue 相关函数，如：ref, reactive, toRef 等
import { resolve } from 'path';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router']
    })
  ],
  define: {
    'process.env': {},
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
});

ref：响应式数据，在使用时候需要：str.value

let str = reactive('1');

 reactive：响应式数据，不需要.value，只能写对象或者数组

let str = reactive(['a','b','c']);

toRefs：结构响应式数据

let obj = reactive({
    name: '张三',
    age: 20
})

let { name, age } = toRefs(obj)

const btn = () => {
    name.value = '李四'
}

computed：计算属性

// 第1种写法
let changeStr = computed(() => {
    return str.value;
})

// 第2种写法
let changeStr2 = computed({
    get() {
        return str.value;
    },
    set(val) {
        str.value = val
    }
})

watch：监听事件

// (1)监听第一个
let str = ref('这是第一个数据');
watch(str, (newVal, oldVal) => {
    console.log(newVal, oldVal);
})

// (2)同时监听多个(用得不多)-------------------------
let str2 = ref('这是第二个数据');
watch([str, num], (newVal, oldVal) => {
    console.log(newVal, oldVal);
})

// (3)初始化监听-------------------------------------
let str3 = ref('这是第三个数据');
watch(num, (newVal, oldVal) => {
    console.log(newVal, oldVal);
}, {
    immediate: true
})

// (4)监听对象--------------------------------------
watch(obj, (newVal) => {
    console.log(newVal);
}, {
    immediate: true
})

// (5)监听具体的某一个key值，并且深度监听-----------
let obj = reactive({
    a: 1,
    b: 2,
    m: {
        c: 3
    }
})
const btn = () => {
    obj.a = 'xxx';
}
watch(() => obj.a, (newVal, oldVal) => {
    console.log(newVal, oldVal);
}, {
    immediate: true,
    deep: true
})

// (6)立即执行监听函数------------------------------
let str4 = ref('这是第四个数据');
watchEffect(() => {
    console.log(str4.value);
})

// (7)监听路由--------------------------------------
let router = userRouter();
watch(() => router.currentRoute.value, (newVal) => {
    console.log(newVal);
}, {
    immediate: true
})

生命周期钩子

<template>
    首页Home.vue
</template>

<script setup>
import axios from 'axios';
let str = ref("这是数据")

// 请求接口
onBeforeMount(() => {
    axios({
        url: "http://testapi.xuexiluxian.cn/api/slider/getSliders"
    }).then(res => {
        console.log(res);
    })
})

// 生命周期钩子 
// onBeforeMount 
// onMounted 
// onBeforeUpdate 
// onUpdated 
// onBeforeUnmount 
// onUnmounted 
// onErrorCaptured 
// onRenderTracked 
// onRenderTriggered 
// onActivated 
// onDeactivated 

 
// 获取dom
onMounted(() => {
    console.log("获取dom", str.value);
})

// 修改前
onBeforeUpdate(() => {
    console.log("修改前");
})

// 修改后
onUpdated(() => {
    console.log("修改后");
})

// 销毁前
onBeforeUnmount(() => {
    console.log("销毁前");
})

// 销毁后
onUnmounted(() => {
    console.log("销毁后");
})

</script>