ref与reactive的差异区别

ref和reactive都是Vue3中的响应式数据处理方式，但它们有以下几个差异区别：

1. 数据类型：ref操作基本类型数据，而reactive操作对象（或数组）类型数据。
2. 原理实现：ref通过Object.defineProperty()的get和set实现数据代理，而reactive使用Proxy

相关问题

watch与watchEffect的区别

### Vue.js `watch` vs `watchEffect`: 区别、使用场景与响应式特性

#### 一、概念区分

- **`watchEffect`**: 自动追踪依赖的数据源，在任何被侦听的响应式属性发生变化时立即重新运行整个函数[^1]。

- **`watch`**: 更加灵活，允许指定要观察的具体数据源，并且可以选择在数据变化时触发回调函数的行为。可以监听单个或多个数据源的变化，并提供旧值和新值作为参数传递给回调函数[^2]。

#### 二、使用方式对比

对于简单的副作用逻辑，可以直接使用`watchEffect`来实现自动化的反应机制：

import { ref, watchEffect } from 'vue'

const count = ref(0)

// 当count改变时会自动执行此函数
watchEffect(() => {
    console.log(`current count is ${count.value}`)
})

而当需要更精确控制何时以及如何响应状态变更时，则应该选用`watch`:

import { reactive, watch } from 'vue'

const state = reactive({
    firstName: '',
    lastName: ''
})

// 只有firstName发生更改才会调用该回调
watch(
    () => state.firstName,
    (newValue, oldValue) => {
        console.log('first name changed', newValue, oldValue)
    }
)

#### 三、性能考量

由于`watchEffect`会在每次组件渲染周期内都尝试收集最新的依赖关系并可能多次触发更新，因此如果只关心特定变量的变化而不希望频繁触发不必要的计算开销的话，推荐优先考虑使用`watch`[^3]。

#### 四、初始化行为差异

另一个值得注意的地方在于两者初次加载页面时的表现形式：`watchEffect`默认情况下会在定义之后立刻同步执行一次；相反地，除非显式设置了`immediate:true`选项，否则普通的`watch`不会这样做。

vue3.0和2.0的差异

Vue 3.0相较于Vue 2.0有许多显著的变化和增强。以下是主要的区别：

1. **TypeScript支持**：Vue 3.0引入了对TypeScript的原生支持，使得类型检查和静态分析更加方便。

2. **Composition API**：这是一个新的API设计，取代了之前的选项式API（Options API），提供了一种更直观、模块化的方式来组织组件的逻辑和数据处理。

3. **Ref 和 RefValue**：Vue 3.0中引入了新的`ref`和`reactive`对象，用于响应式的创建和管理变量，它们比Vue 2.x中的`vm.$data`更为高效。

4. **Reactivity System**：核心的响应式系统进行了优化，提升了性能，并提供了新的`unref()`和`shallowRef`方法。

5. ** vnode 渲染效率提升**：Vue 3.0采用了更为高效的VNode更新策略，如异步队列和自定义渲染函数等。

6. **SSR（服务器端渲染）改进**：Vue 3.0的服务器端渲染支持更好，例如服务端插件和可缓存的渲染结果。

7. **不再支持IE浏览器**：Vue 3.0移除了对 Internet Explorer 的兼容性支持，主要集中在现代浏览器上。

8. **钩子函数的变化**：组件生命周期钩子如`created`, `mounted`, 等在2.0的基础上有了微调，例如`setup`函数替代了`mounted`前的行为。

相关问题--
1. Composition API 在Vue 3.0中的具体应用是什么？
2. 使用 Ref 和 RefValue 有什么优势？
3. 如何从 Vue 2.x 迁移到 Vue 3.0以利用这些新特性和优化？