Vue相关
Vue2
-
组件传递事件：
-
props $emit
-
sync v-model
-
$parent / $children $parent获取父组件的实例，任意调用父组件的方法，修改父组件的数据
-
ref 父组件获取 子组件 实例，任意调用子组件的方法获取子组件的属性
-
provide / injectprpvide父组件内部提供数据inject嵌套的子组件可以注入数据
-
$attrs / $listeners $attrs(没有被props接收的所有自定义属性) $listeners(可以获取所有的父组件传递过来的自定义事件)
-
eventBus 定义一个事件总线 使用$on 绑定 $emit 触发
-
vuex\vue3使用pinia
pinia:修改数据的4种方式：1.storeToRefs、2.$patch(对象或者3.函数)、 4.store action里面
-
路由传参
NextTick是什么？
在修改数据之后立即使用这个方法，获取更新后的 DOM
修饰符passive：监听元素滚动， pc 端是没啥问题。移动端，会让我们的网页变卡，使用这个修饰符的时候，相当于给onscroll 事件整了一个.lazy 修饰符
scoped原理是什么？
作用：使样式私有化（模块化），不对全局造成污染
原理：动态的给组件加上一个hash值，用属性选择器去匹配
vue响应式原理（数据劫持）
格式不同：v-model=“num”, :num.sync=“num”
v-model只能用一次；.sync可以有多个
如何做样式穿透
如果不添加scoped，可能影响全局样式，如果添加scoped，嵌套的子组件内部样式不能生效
scss:使用::v-deep
less:使用 /deep/
路由导航
全局导航钩子：beforeEach、beforeResolve、afterEach
组件内的钩子：beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave
路由独享的守卫：beforeEnter
完整的导航解析流程
1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
5. 在路由配置里调用 beforeEnter。
-
解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫(2.5+)。
-
导航被确认。
10. 调用全局的 afterEach 钩子。
-
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
自定义指令钩子函数
每个指令都有 bind、inserted、update、componentupdated 和 unbind 等钩子函数
-
e l
-
binding-
value：传递给指令的值。 -
oldValue：之前的值 -
arg：传递给指令的参数 -
modifiers：一个包含修饰符的对象 -
instance：使用该指令的组件实例. -
dir：指令的定义对象.
-
-
vnode -
prevNode
Vue3
新特性：
-
数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
-
解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能
-
(原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持
-
虚拟DOM - 新算法 (更快 更小)
-
提供了composition api, 可以更好的逻辑复用
-
模板可以有多个根元素
-
源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)
使用：
Setup特性：更好地支持Composition API（组合式API）的使用
setup会在beforeCreate钩子函数之前执行
页面使用的方法都需要从vue中引入
Vue3。Tree shaking：清除多余代码优化打包
好处：静态类型检查、面向对象编程（接口、类、继承）、兼容想、模块化开发、
-
setup中不能使用this, this指向undefined
setup需要有返回值,只有返回的值才能在模板中使用
-
支持逻辑复用：使用setup函数可以将组件中的逻辑进行复用。将逻辑封装为可复用的函数，然后在多个组件中使用。这种方式避免了传统Vue2中mixins的问题，能够更灵活地复用逻辑。
-
更好的组织代码：使用setup函数能够更好地组织代码，将组件内部的逻辑和状态集中在一个地方。通过setup函数，可以将组件逻辑按照功能进行划分，使代码更加清晰、易读、易维护。
-
更方便地访问组件实例：在Vue2中，通过this可以访问到组件实例，但在Vue3中，组件实例没有被作为默认参数传递给setup函数。而是通过返回一个包含组件实例和其他数据的对象来访问组件实例，可以更灵活地控制访问组件实例的时机和方式。 Vue3可以通过getCurrentInstance获取当前实例，但不推荐，因为它破坏了组件的封装性和可测试性
-
提高性能：Vue3通过静态分析组件的模板和组合式API的代码，可以更好地优化组件的渲染过程。使用setup函数可以帮助Vue3更好地理解组件的逻辑，提高渲染性能。
-
-
总结：使用setup函数可以更好地支持Composition API的使用，提高代码的复用性、组织性和性能。使用setup函数能够更好地封装和组织组件内部的逻辑和状态，使代码结构更清晰、易读、易维护
默认普通的数据,不是响应式的
Reactive作用：传入一个复杂数据类型，将复杂类型数据,转换成响应式数据 （返回该对象的响应式代理
ref作用：对传入的数据（一般简单数据类型），包裹一层对象,转换成响应式
computed函数提供计算属性,有2种写法, 带set,get和直接拿值去计算
watch:深度监听 deep: true,immediate: true
toRefs：作用：对一个响应式对象的所有内部属性,都做响应式处理
defineEreactive/ref的响应式功能是赋值给对象的,如果给对象解构或者展开,会让数据丢失响应式的能力
useRoute
defineExpose:暴露外部的方法
defineProps、defineEmits(方法) defineEmits(['confirm','close'])
withDefaults将默认值应用于这些 props
如果使用defineProps接收数据，这个数据只能在模板中渲染，如果想要在script中也操作props属性，应该接收返回值。 Const props = defineProps({money:Number}),不能直接defineProps
constemit= defineEmits(['changeMoney'])
const change = () => {emit('changeMoney', 10)}
依赖注入：provide 和 inject
Vue.config.js判断环境变量。process.env.NODE_ENV === 'development'
import.meta.env 和 loadEnv区别：
【Vite环境变量】import.meta.env 和 loadEnv使用和区别-CSDN博客
· ts：是JavaScript的超集，简单来说就是：JS有的TS都有
TypeScript属于静态类型的编程语言，JavaScript属于动态类型的编程语言
Js已有类型：原始类型（number/string/boolean/null/undefined）
复杂数据类型（数组，对象，函数等）
TS新增类型：联合类型、类型别名、接口、元组、字面量类、枚举、void、…
· 1.| (number | string)、如果函数没有返回值，那么，函数返回值类型为：void
接口类型interface 、继承extends。enum定义枚举
Proxy：常用的有哪些？
get、set、has、deleteProperty、apply、construct、getPrototypeOf、setPrototypeOf
原文地址：https://blog.csdn.net/u013195452/article/details/142390250
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！