// 引入shallowReactive函数

import { shallowReactive } from 'vue';

// 创建一个浅层响应式对象

const userInfo = shallowReactive({

name: '前端小白',

address: {

city: '北京',

district: '朝阳区'

},

hobbies: ['代码', '摸鱼']

});

// 修改顶层属性会触发响应

userInfo.name = '前端大神';

// 修改嵌套属性不会触发响应（注意！）

// userInfo.address.city = '上海';

import { reactive, toRefs } from 'vue';

// 创建一个响应式对象

const user = reactive({

name: '张三',

age: 25,

email: 'zhangsan@example.com'

});

// 使用toRefs将响应式对象转换为多个ref

const { name, age, email } = toRefs(user);

// 修改数据，依然保持响应式

name.value = '李四';

import { ref, watchEffect } from 'vue';

const count = ref(0);

const doubleCount = ref(0);

// watchEffect会自动收集依赖，并且在数据变化后执行

watchEffect(() => {

doubleCount.value = count.value * 2;

// 只有count变化时，这里的代码才会重新执行

});

count.value++; // 触发watchEffect重新计算

<template>

<Suspense>

<!-- 加载成功显示的内容 -->

<template #default>

<AsyncComponent />

</template>

<!-- 加载中显示的占位符 -->

<template #fallback>

<div>拼命加载中...请稍后~</div>

</template>

</Suspense>

</template>

<script>

import { defineAsyncComponent, Suspense } from 'vue';

// 定义异步组件

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

export default {

components: {

Suspense,

AsyncComponent

}

};

</script>

<template>

<button @click="showModal = true">打开弹窗</button>

<!-- 将弹窗传送到body下 -->

<Teleport to="body">

<div v-if="showModal" class="modal">

<h2>我是一个神奇的弹窗</h2>

<button @click="showModal = false">关闭</button>

</div>

</Teleport>

</template>

<script>

import { ref } from 'vue';

import { Teleport } from 'vue';

export default {

components: {

Teleport

},

setup() {

const showModal = ref(false);

return {

showModal

};

}

};

</script>

import { createApp } from 'vue';

const app = createApp({});

// 注册自定义指令v-copy

app.directive('copy', {

mounted(el, binding) {

// 给元素绑定点击事件

el.addEventListener('click', () => {

// 创建临时textarea元素

const textarea = document.createElement('textarea');

// 设置要复制的内容

textarea.value = binding.value;

// 将textarea添加到页面

document.body.appendChild(textarea);

// 选中内容

textarea.select();

// 执行复制命令

document.execCommand('copy');

// 移除textarea

document.body.removeChild(textarea);

});

}

});

app.mount('#app');

<template>

<button v-copy="textToCopy">复制这段文字</button>

</template>

<script>

import { ref } from 'vue';

export default {

setup() {

const textToCopy = ref('这是一段神奇的文字');

return {

textToCopy

};

}

};

</script>

// 创建一个Pinia插件

const myPlugin = (context) => {

// context包含store、app等信息

const { store } = context;

// 给store添加一个自定义方法

store.$myMethod = () => {

console.log('这是插件添加的自定义方法');

};

};

import { createPinia } from 'pinia';

const pinia = createPinia();

// 使用插件

pinia.use(myPlugin);

export default pinia;

// 使用插件的store

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {

state: () => ({

count: 0

}),

actions: {

increment() {

this.count++;

}

}

});

<template>

<button @click="increment">+1</button>

<button @click="store.$myMethod">调用插件方法</button>

<p>Count: {{ count }}</p>

</template>

<script>

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

import { useStore } from 'pinia';

export default {

setup() {

const store = useStore();

const counterStore = useCounterStore();

return {

count: counterStore.count,

increment: counterStore.increment,

store

};

}

};

</script>

<template>

<ul>

<!-- 只有当item.id或item.name变化时，才会重新渲染 -->

<li v-for="item in list" :key="item.id" v-memo="[item.id, item.name]">

{{ item.name }} - {{ item.age }}

</li>

</ul>

</template>

<script>

import { ref } from 'vue';

export default {

setup() {

const list = ref([

{ id: 1, name: 'Alice', age: 25 },

{ id: 2, name: 'Bob', age: 30 }

]);

return {

list

};

}

};

</script>

import { ref } from 'vue';

import { useIntersectionObserver } from '@vueuse/core';

export default {

setup() {

const imgRef = ref(null);

const isVisible = ref(false);

// 监听元素是否进入可视区域

const { stop } = useIntersectionObserver(

imgRef,

([{ isIntersecting }]) => {

isVisible.value = isIntersecting;

if (isIntersecting) {

// 元素可见时执行加载逻辑

console.log('图片进入可视区域，开始加载');

stop(); // 停止监听

}

},

{

threshold: 0.1 // 元素10%进入可视区域即触发

}

);

return {

imgRef,

isVisible

};

}

};

<template>

<img ref="imgRef" :src="isVisible? '
https://example.com/image.jpg' : ''" alt="懒加载图片">

</template>

import { ref } from 'vue';

// 自定义一个表单验证的Hook

function useFormValidation() {

const username = ref('');

const password = ref('');

const errors = ref({});

const validate = () => {

const newErrors = {};

if (!username.value) {

newErrors.username = '用户名不能为空';

}

if (!password.value) {

newErrors.password = '密码不能为空';

}

errors.value = newErrors;

return Object.keys(newErrors).length === 0;

};

return {

username,

password,

errors,

validate

};

}

export default useFormValidation;

<template>

<form>

<input v-model="form.username" placeholder="用户名">

<p v-if="form.errors.username">{{ form.errors.username }}</p>

<input v-model="form.password" placeholder="密码">

<p v-if="form.errors.password">{{ form.errors.password }}</p>

<button @click="submitForm">提交</button>

</form>

</template>

<script>

import useFormValidation from './useFormValidation';

export default {

setup() {

const form = useFormValidation();

const submitForm = () => {

if (form.validate()) {

console.log('表单验证通过，提交数据');

}

};

return {

form,

submitForm

};

}

};

</script>