// 引入Vue3的ref函数，它可以将基本数据类型（如字符串、数字、布尔等）变成响应式数据

import { ref } from 'vue';

// 创建一个响应式的字符串

const message = ref('Hello, Vue3!');

// 在模板中可以直接使用message.value来访问和修改数据

// 引入Vue3的reactive函数，它主要用于将对象或数组变成响应式数据

import { reactive } from 'vue';

// 创建一个响应式的对象

const user = reactive({

name: '小明',

age: 25

});

// 在模板中可以直接使用user.name和user.age来访问数据

// 引入shallowRef函数

import { shallowRef } from 'vue';

// 创建一个浅响应式的对象，只有对ref本身的赋值会触发更新，对象内部属性变化不会触发

const shallowObj = shallowRef({

data: '初始数据'

});

// 修改内部属性，不会触发视图更新

shallowObj.value.data = '新数据';

// 重新赋值ref，会触发视图更新

shallowObj.value = {

data: '真正更新的数据'

};

// 引入shallowReactive函数

import { shallowReactive } from 'vue';

// 创建一个浅响应式的对象，只有对象第一层属性变化会触发更新，嵌套属性变化不会触发

const shallowUser = shallowReactive({

name: '小红',

address: {

city: '北京'

}

});

// 修改第一层属性，会触发视图更新

shallowUser.name = '小蓝';

// 修改嵌套属性，不会触发视图更新

shallowUser.address.city = '上海';

<!-- 父组件模板 -->

<template>

<div>

<ChildComponent :message="parentMessage" @childEvent="handleChildEvent"></ChildComponent>

</div>

</template>

<script>

import { ref } from 'vue';

import ChildComponent from './ChildComponent.vue';

export default {

components: {

ChildComponent

},

setup() {

// 定义一个响应式数据，作为父组件传递给子组件的值

const parentMessage = ref('来自父组件的数据');

// 定义一个方法，用于接收子组件传递过来的事件

const handleChildEvent = (data) => {

console.log('接收到子组件传来的数据:', data);

};

return {

parentMessage,

handleChildEvent

};

}

};

</script>

<!-- 子组件模板 -->

<template>

<div>

<p>{{ message }}</p>

<button @click="sendDataToParent">向父组件传值</button>

</div>

</template>

<script>

import { defineComponent } from 'vue';

export default defineComponent({

// 定义props，接收父组件传递过来的数据

props: {

message: {

type: String,

required: true

}

},

setup(props, { emit }) {

// 定义一个方法，用于向父组件发送事件并传递数据

const sendDataToParent = () => {

emit('childEvent', '来自子组件的数据');

};

return {

sendDataToParent

};

}

});

</script>

npm install mitt

// 创建一个mitt实例，作为事件总线

import mitt from'mitt';

const emitter = mitt();

// 兄弟组件A，发送事件

import { onMounted } from 'vue';

export default {

setup() {

onMounted(() => {

// 发送一个名为'someEvent'的事件，并传递数据

emitter.emit('someEvent', '这是来自组件A的数据');

});

return {};

}

};

// 兄弟组件B，接收事件

import { onMounted } from 'vue';

export default {

setup() {

onMounted(() => {

// 监听'someEvent'事件，并处理接收到的数据

const handler = (data) => {

console.log('接收到组件A的数据:', data);

};

emitter.on('someEvent', handler);

// 在组件卸载时，记得移除事件监听，避免内存泄漏

return () => {

emitter.off('someEvent', handler);

};

});

return {};

}

};

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {

setup() {

// 组件挂载完成后调用

onMounted(() => {

console.log('组件已挂载');

});

// 组件更新后调用

onUpdated(() => {

console.log('组件已更新');

});

// 组件卸载前调用

onUnmounted(() => {

console.log('组件即将卸载');

});

return {};

}

};

import { ref, computed } from 'vue';

export default {

setup() {

const num1 = ref(1);

const num2 = ref(2);

// 定义一个计算属性，它会根据依赖的响应式数据自动更新

const sum = computed(() => {

return num1.value + num2.value;

});

return {

num1,

num2,

sum

};

}

};

import { ref, watch } from 'vue';

export default {

setup() {

const message = ref('初始值');

// 定义一个侦听器，监听message的变化

watch(message, (newValue, oldValue) => {

console.log('值发生变化了:', newValue, oldValue);

});

return {

message

};

}

};

// 定义动态路由

const routes = [

{

path: '/user/:id',

component: UserComponent

}

];

// 在Vue Router实例中使用这些路由

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({

history: createWebHistory(),

routes

});

// 全局前置守卫，在每次路由跳转前执行

router.beforeEach((to, from, next) => {

// 可以在这里进行权限验证等逻辑

if (/* 权限验证通过 */) {

next();

} else {

next('/login'); // 跳转到登录页面

}

});

<!-- 根据条件决定是否显示，切换频繁用v-show更好 -->

<div v-show="isShow">这是一个可能会频繁显示隐藏的元素</div>

<!-- 根据条件决定是否渲染，初始渲染不需要时用v-if更好 -->

<div v-if="isCreate">这是一个按需创建的元素</div>

<ul>

<li v-for="item in list" :key="item.id">{{ item.name }}</li>

</ul>

npm install pinia

// 创建一个Pinia store

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {

state: () => ({

count: 0

}),

getters: {

doubleCount: (state) => state.count * 2

},

actions: {

increment() {

this.count++;

}

}

});

<template>

<div>

<p>计数: {{ counterStore.count }}</p>

<p>双倍计数: {{ counterStore.doubleCount }}</p>

<button @click="counterStore.increment">增加计数</button>

</div>

</template>

<script>

import { useCounterStore } from './stores/counter';

export default {

setup() {

const counterStore = useCounterStore();

return {

counterStore

};

}

};

</script>

// 定义一个自定义指令，用于自动聚焦输入框

import { Directive } from 'vue';

const vFocus: Directive = {

mounted(el) {

// 在元素挂载完成后，让元素自动获取焦点

el.focus();

}

};

export default {

directives: {

focus: vFocus

},

setup() {

return {};

}

};

<input v-focus type="text" placeholder="自动聚焦">

npx nuxi init my-nuxt-app

cd my-nuxt-app

npm install

npm init vitepress@latest

npm install --save-dev @vue/test-utils @testing-library/jest-dom jest @babel/core @babel/preset-env @vue/babel-preset-jsx

// 测试一个Vue组件

import { mount } from '@vue/test-utils';

import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {

it('should render correctly', () => {

const wrapper = mount(MyComponent);

expect(wrapper.html()).toContain('预期的文本');

});

});