vue中组件的data为什么是一个函数 vue中组件的data为什么是一个函数因为每个组件实例都需要拥有独立的数据状态，如果 data 是一个普通对象，那么所有组件实例将共享同一个对象，导致一个组件的状态变化会影响其他组件。为了避免这种情况，data 必须是一个函数。当 data 是一个函数时，每次创建组件实例时，Vue 都会调用该函数来获取数据对象的一个副本，确保每个组件实例都拥有独立的数据状态，互相之间不会影响。

vue中watch和watchEffect的区别 vue中watch和watchEffect的区别watch 特点watch 监听函数可以添加配置项，也可以配置为空，配置项为空的情况下，watch的特点为：有惰性：运行的时候，不会立即执行；更加具体：需要添加监听的属性；可访问属性之前的值：回调函数内会返回最新值和修改之前的值；可配置：配置项可补充 watch 特点上的不足： immediate：配置 watch 属性是否立即执行，值为 true 时，一旦运行就会立即执行，值为 false 时，保持惰性。 deep：配置 watch 是否深度监听，值为 true 时，可以监听对象所有属性，值为 false 时保持更加具体特性，必须指定到具体的属性上。watchEffect 特点非惰性：一旦运行就会立即执行；更加抽象：使用时不需要具体指定监听的谁，回调函数内直接使用就可以；不可访问之前的值：只能访问当前最新的值，访问不到修改之前的值；watchEffect可以主动停止侦听的

Vue2 不更新视图的原因及解决方案 Vue2 不更新视图的原因及解决方案在 Vue2 中，由于 Vue 是基于 Object.defineProperty 进行数据劫持的，它会在实例化时对 data 中的属性进行劫持，将每个属性转换为 getter 和 setter，从而实现响应式更新。1.新增属性：对于新增的属性，可以使用 Vue.set(object, key, value) 或 this.$set(object, key, value) 方法来将新增的属性转换为响应式。2.数组操作：对于数组操作，可以使用可响应式的数组方法来触发视图更新，如 push、pop、shift、unshift、splice、sort、reverse 等。如果需要手动更新数组的某个索引位置的元素，可以使用 Vue.set 或 this.$set 方法。3.对象属性的删除：对于对象属性的删除，可以使用 Vue.delete(object, key) 或 this.$delete(object, key) 方法来删除对象的属性，并触发视图更新。

vue中的组件传参 父传子props 父子传参$parent 获取父组件实例，一样可以完成父传子子传父$emit 基于vue的发布订阅机制ref 获取子组件实例，直接获取子组件中的数据跨组件provide inject 这个组合传递的基本数据类型是不响应的,只有如果传递的是对象,才会响应视图eventsBus 也可以跨组件$attr $listenervuex pinia兄弟传参eventBusvuex pinia

vue中的回流和重绘 vue中的回流和重排回流英文叫reflow，指的是当渲染树中的节点信息发生了大小、边距等问题，需要重新计算各节点和css具体的大小和位置。 回流一定会引起重绘位置的改变 translate 定位的left top margin元素位置的显示和隐藏(display:none)也会引起回流宽高的变化 边框大小的变化重绘重绘：英文叫repaint，当节点的部分属性发生变化，但不影响布局，只需要重新计算节点在屏幕中的绝对位置并渲染的过程，就叫重绘 ,重绘不一定会引起回流颜色的变化字体风格的变化背景的变化