vue3相关vue3 比 vue2 有什么优势？ composition-api 提供了更好的代码组织。引入 hook

vue3 比 vue2 有什么优势？

composition-api 提供了更好的代码组织。
引入 hooks 提供了更好的逻辑抽离。
采用了 碎片化节点 Fragment，可以同时存在多个根节点。
提供了更多的 API，组件等。
性能更好（优化了 diff 算法）。
打包体积更小（树摇更加强大）。
对 ts 支持的更好。

生命周期

setup 代替了 beforeCreate 和 created

  setup
  onBeforeMount,  onMounted,
  onBeforeUpdate,  onUpdated,
  onBeforeUnmount,  onUnmounted,

Vue3如何实现响应式？

使用Proxy和Reflect API实现vue3响应式。

Reflect API则可以更加方便地实现对对象的监听和更新，可以用来访问、检查和修改对象的属性和方法，比如Reflect.get、Reflect.set、Reflect.has等。

Vue3会将响应式对象转换为一个Proxy对象，并利用Proxy对象的get和set拦截器来实现对属性的监听和更新。当访问响应式对象的属性时，get拦截器会被触发，此时会收集当前的依赖关系，并返回属性的值；当修改响应式对象的属性时，set拦截器会被触发，此时会触发更新操作，并通知相关的依赖进行更新。

优点：可监听属性的变化、新增与删除，监听数组的变化

Vue3 中的内置组件。

`teleport`（传送）组件

可以将组件的 DOM 插到指定的组件层，而不是默认的父组件层，可以用于在应用中创建模态框、悬浮提示框、通知框等组件。

Suspense

它提供两个template slot, 刚开始会渲染一个 fallback 状态下的内容，直到到达某个条件后才会渲染 default 状态的正式内容，通过使用 Suspense 组件进行展示异步渲染就更加的简单。

<Suspense>
      <template #default>
              <!-- 异步渲染 -->
               ...  
      </template>
      <template #fallback>
          <div>
              Loading...
          </div>
      </template>
</Suspense>

vue3 新语法大全

defineProps 与 defineEmits

ref：函数可以接收原始数据类型与引用数据类型。（设置、获取值时需要加.value）。

ref 的本质是拷贝，修改数据是不会影响到原始数据。
reactive：函数只能接收引用数据类型。

toRef: 引用reactive 里的单个属性并转成 ref。本质是引用，修改响应式数据会影响原始数据。
toRefs: 用来把 reactive 对象转换成普通对象，把对象中的每一个属性，包裹成 ref 对象。

readonly 只读属性，表示响应式对象不可修改

 let nameObj = reactive({ name: '张三' });
 let readonlyObj = readonly(nameObj); // 对nameObj响应式对象设置成只读,不可修改

computed 计算属性
watch与 watchEffect

provide 与 inject

// 祖先元素 
// provide(别名, 要传递的数据和方法)
provide('myName', name)
provide('handleClick', () => {
  name.value = 'zhangsan';
})

// 后代元素
//调用 inject 方法，通过指定的别名，接收到父级共享的数据和方法
const name = inject('myName');
const handleClick = inject('handleClick');

getCurrentInstance : 获得组件实例
useAttrs ：获取属性
useSlots ：获取插槽
defineExpose：对外暴露属性或方法

script setup 是干啥的？

scrtpt setup 是 vue3 的语法糖，简化了组合式 API 的写法。使用 script setup 语法糖的特点：

属性和方法无需返回，可以直接使用。
引入组件的时候，会自动注册，无需通过 components 手动注册。
默认不会对外暴露任何属性，如果有需要可使用 defineExpose 。

watch 和 watchEffect 的区别？

watch 和 watchEffect 都是监听器，watchEffect 是一个副作用函数。

watch ：既要指明监视的数据源，也要指明监视的回调。
而 watchEffect 可以自动监听数据源作为依赖。不用指明监视哪个数据，监视的回调中用到哪个数据，那就监视哪个数据。
watch 可以访问改变之前和之后的值，watchEffect 只能获取改变后的值。
watch 运行的时候不会立即执行，值改变后才会执行，而 watchEffect 运行后可立即执行。这一点可以通过 watch 的配置项 immediate 改变。
watchEffect有点像 computed ：
- 但 computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
- 而 watcheffect注重的是过程（回调函数的函数体），所以不用写返回值。

vue3相关