vue3相关学习

和vue2相比，有哪些不同？

1.响应式的重构，使用proxy替换Object.defineProperty属性，优势：
proxy可以直接监听对象属性的添加或者删除
proxy可以直接监听数组的变化
proxy监听目标是对象本身，不需要像Object.defineProperty一样需要对对象的所有属性进行递归遍历，有一定的性能提升
2.新增组合式api(composition API),拥有更好的代码组织和逻辑重用
setup配置
ref&reactive
watch&watchEffect
provide&inject
3.重构虚拟dom和diff算法
4.生命周期更名
5.新的内置组件
Fragment：用来承载多个子元素的虚拟组件。它的作用是可以解决在Vue2中，使用v-for迭代元素时需要添加一个包装元素的问题。
Teleport：控制渲染位置的新指令。它的作用是在DOM中移动一个组件的内容而不改变组件的父级，可以使用Teleport组件将组件的输出渲染到指定的DOM节点中。Teleport组件需要传入一个target属性，指定要渲染到的DOM节点.

<teleport to="#modal">
      <div>
        <!-- 这里是弹窗的内容 -->
      </div>
    </teleport>

Suspense：新增的一个组件，它的作用是实现延迟加载和错误处理。在组件中加入Suspense，可以让异步组件可以渲染出加载状态，并且如果异步组件加载时出现错误，也能够处理这些错误。

<suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </suspense>

6.移除的部分
Vue3中的事件修饰符与Vue2基本相同，包括stop、prevent、capture和self等
移除v-on.keyCode修饰符
移除v-on.native修饰符
移除过滤器filter
不再建议使用mixin，组合式api本身就是更好的mixin替代品

vue3响应式原理

通过proxy代理：拦截对象中任意属性的变化，包括属性值的读写，添加，删除等
通过Reflect映射：对源对象的属性进行操作
存在的问题，解决了vue2响应式的短板，但是因为是使用的es6，存在兼容性问题

响应性判断函数

isRef:检查一个值是否为ref对象
isReactive:检查一个值是否为reactive创建的响应式代理
isReadonly:检查一个对象是否由readonly创建的只读代理
isProxy:检查一个对象是否由reactive或者readonly创建的代理

setup怎么用

setup(props,ctx){
// 如果解构了props对象，那么解构出来的变量将失去响应式，推荐使用props.name,props.age
console.log(props.name);
// 透传attributes (非响应式的对象，等价于$attrs)
console.log(ctx.attrs)
// 插槽 非响应式的对象，等价于$slots
console.log(ctx.slots)
// 触发事件 函数，等价于$emit
console.log(ctx.emit)
// 暴露公共属性
console.log(ctx.expose)
}
如果使用setup语法糖，
且父组件通过模板引用访问该组件的实例时，将仅能访问expose函数暴露出的内容

ref和reactive区别

1.简单来说，ref是用来定义基本类型的数据，reactive是用来定义对象(数组)的数据
注意ref也是可以用来定义对象数组的，不过会内部会自动通过reactive转为reactive对象
2.使用方面，ref定义的数据，需要用.value取值，在template模板中不需要
3.数值传递方面，解构reactive会失去响应式，{ref(1),ref(2)}不会
4.原理角度：
reactive是通过proxy来实现响应式(数据劫持)，通过Reflect操作源对象内部的数据

watch&watchEffect

watch使用：

// 被监听对象可以是ref,reacitve,或者是个getter函数，或者以上组成的数组
watch(name,(new,old) => {
	console.log('name发生变化了;' ,old,new)
},{immediate:true})

注意：当watch监听的是reactive时，强制开启深度监听,且old无法正确获取

watchEffect使用：

const watchFn = watchEffect(() => {
	const name = name.value
	const age = age.value
	console.log('watchEffect的回调执行了')
})
// 如果需要
watchFn()

与watch不同点：
1.watch需要指明监听的属性
2.watchEffect无需指明需要监听的属性，vue的响应式系统会自动进行依赖收集，只要指定的回调中的用到的响应式数据发生了变化，则直接重新执行回调。

插槽

Vue3中使用 来实现插槽。在父组件中使用 来填充插槽。

如何实现自定义渲染函数？

使用 h() 函数来创建虚拟节点，例如 h(‘div’, {class: ‘container’}, ‘Hello, world’) 。

Vue3中的响应式系统如何处理循环引用问题？

使用WeakMap来处理循环引用问题。

Vue3如何实现异步验证表单输入？

使用 watch() 函数，监听表单输入的变化，并使用异步函数处理验证逻辑

依赖注入

可以使用provide函数提供数据，然后在子组件中使用inject函数注入数据。provide和inject可以方便地实现跨层级组件之间的数据共享。

import { provide, inject } from 'vue'

const MyComponent = {
  setup() {
    const foo = 'bar'
    provide('foo', foo)
  }
}

const MyChildComponent = {
  setup() {
    const foo = inject('foo')
    return { foo }
  }
}

如何在Vue3中使用全局API？

可以使用createApp函数创建一个应用实例，并使用全局API注册组件、指令、插件等。

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'
import MyDirective from './MyDirective.js'
import MyPlugin from './MyPlugin.js'

const app = createApp()
app.component('my-component', MyComponent)
app.directive('my-directive', MyDirective)
app.use(MyPlugin)
app.mount('#app')