vue3响应式高阶用法，中高级前端必会的性能优化技巧
Vue 3 的响应式系统是前端开发中一个非常重要的特性，它使得数据和视图之间的同步变得非常自然和高效。为了充分利用 Vue 3 的响应式系统并进行性能优化，了解和掌握一些高阶用法是非常必要的。以下是一些中高级前端开发者必须掌握的 Vue 3 响应式高阶用法和性能优化技巧：
1. shallowRef 和 shallowReactive
`
1. 说说Vue2中的响应式原理？
Vue2响应式原理
数据劫持**：Vue2通过Object.defineProperty实现数据劫持，为对象的每个属性设置get和set方法，进行数据监听。
依赖收集**：当属性被访问时，触发get函数，将依赖它的组件添加到依赖收集器中。
通知更新**：当属性被赋值时，触发set函数，通知依赖它的组件进行更
Vue是做什么的
Vue.js（读音 /vjuː/，类似于 view）是一个用于构建用户界面的渐进式框架。它的主要目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue专注于视图层，并具备以下特点：
数据驱动：Vue使得数据改变能够自动驱动视图更新，无需手动操作DOM来改变视图。
视图组件化：Vue支持将网页拆分成一个个区块，每个区块可以看作是一
. 解释Vue 2中的响应式数据绑定是如何工作的
Vue 2中的响应式数据绑定通过使用JavaScript代理来实现。
响应式原理
数据代理**：Vue 2使用Object.defineProperty对数据对象的属性进行代理，从而能够拦截对这些属性的访问和修改操作。
依赖收集**：当组件依赖于某些数据时，Vue会记录这些依赖，当数据变化时，能够通知到这些依赖的组件。
更新
<script lang="ts" setup>
import { computed, ref } from 'vue'
const search = ref('')
const filterTableData = computed(() =>
tableData.filter(
(data) =>
!search.value ||
data.name.toLowerCase().includes(search.value.toLowerCase())
)
)
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}
]
</script>
Vue 3 Script Setup 语法示例
创建响应式引用**：使用 ref 创建 search 响应式引用，用于存储搜索框的值。
计算属性过滤数据**：通过 computed 创建 filterTableData，根据 search.value 过滤 tableData 数组。
定义数据类型**：
<td>
<div class="btn-group">
<button type="button" class="btn btn-info" style="margin-right:3px ;">查看</button>
<button type="button" class="btn btn-warning" style="margin-right:3px ;">编辑</button>
<button type="button" class="btn btn-danger">删除</button>
</div>
</tr>如何加响应按钮，链接
响应按钮链接添加方法
使用 ` 标签代替 **：对于需要链接功能的按钮，可以使用 标签代替 标签，并添加 role="button"` 属性以提高可访问性。
保持按钮类**：即使使用 ` 标签，也应该保持 .btn` 类以保持按钮的样式和行为。
添加 `
谈谈vue
Vue是一个用于构建用户界面的开源JavaScript框架。
核心概念
MVVM模式**：Vue采用Model-View-ViewModel模式，其中Model负责业务逻辑和服务器交互，View负责UI展示，ViewModel作为数据和视图之间的桥梁。
特点
组件化**：Vue支持组件化开发，提高代码复用性和开发效率。
*
帮我优化下下面代码，我要更新status。监听数据变化，更新status.
<template>
<div :class="['node', status]">
<img :src="image.logo" alt="logo" @click="setClick"/>
<span class="label">{{ label }}</span>
<span class="status">
<img v-if="status === 'success'" :src="image.success" alt="success" />
<img v-if="status === 'failed'" :src="image.failed" alt="failed" />
<img v-if="status === 'running'" :src="image.running" alt="running" />
</span>
</div>
</template>
<script setup>
import { inject } from 'vue'
import logoSet from '@/assets/img/set.png'
import statusSuccess from '@/assets/img/success.png'
import statusFailed from '@/assets/img/failed.png'
import statusRunning from '@/assets/img/running.png'
// 注入依赖
const getNode = inject('getNode');
const data = getNode()?.getData() || {}
const { label, status = 'default' } = data
//监听data变化，更新状态
getNode.on('change:data', ({ data }) => {
const { status } = data
status = status
})
const image = {
logo: logoSet,
success: statusSuccess,
failed: statusFailed,
running: statusRunning
}
const setClick=()=>{
// alert('111')
}
</script>
代码优化建议
使用 Vue 3 的响应式 API**：Vue 3 中推荐使用 ref 或 reactive 来创建响应式状态。
简化模板中的条件渲染**：避免在模板中使用多个 v-if 来渲染图片，可以使用计算属性来简化。
优化事件监听**：确保事件监听逻辑正确，并且使用 Vue 3 的 watch 函数来监听
CSS背景图片如何根据电脑不同尺寸图片也跟着放大或者缩小
利用CSS属性实现背景图片自适应。
背景图片自适应方法
使用background-size属性**：通过设置background-size: cover;或background-size: contain;，可以控制背景图片的缩放方式。cover值确保图片覆盖整个容器，可能会裁剪图片；contain值确保图片完整显示在容器内