# vues

**Repository Path**: Miyana/vues

## Basic Information

- **Project Name**: vues
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-16
- **Last Updated**: 2025-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue

## 知识点

- diff算法
    1. 调用patch方法，传入新旧vdom，开始同层对比
    2. 调用isSameNode方法，判断新旧节点是否是同一个节点
    3. 如果不同，新节点替换旧节点
    4. 如果相同，则调用patchNode方法，对比新旧子节点，新文本就替换，新节点添加，少节点删除，都有子节点就继续对比

## 注意事项

### 基础

- vue3编写自定义钩子的时候需要定义type声明，否则会报错。
- 必要时创建文件夹、文件、钩子、声明、组件等，找不到报错时，可以尝试重启项目才能加载。
- 使用ref并对其dom增加监听事件时，需要在unmounted钩子中移除监听事件，但是这里有个bug？就是ref会优先置空，导致找不到dom，所以要在mounted中将dom备份，再在unmounted中移除监听事件。
- 如果vue文件存在下划线，则需要添加声明
- ts的定时器和延时器和window的有冲突，需要使用window.setTimeout和window.setInterval
- tailwind的坑1：使用vite，就必须在vite的config中配置postcss，否则tailwindcss不会生效。
- tailwind的坑2：其实在main文件import tailwindcss就行了，class中引用
- tailwind的坑3：tailwind.config新增属性要在extend中添加，在外面添加会覆盖
- mouseenter 事件委托不能获取到当前target
- canvas要跟随父元素大小，需要用绝对定位，不然会撑开父元素长宽无法复原
- canvas拖拽缩放，需要先重定位canvas，再清除画布
- effectScope只会清除vue自身相关产生的副作用，手动创建的副作用是不会清除的，比如setTimeout、setInterval、addEventListener等，这时候就需要在onScopeDispose里手动清除
- watch和watchEffect的区别：watch需要主动声明依赖，watchEffect自动收集依赖
- shallowRef：浅层响应式，只监听第一层
- props/响应式属性不能直接解构，会丢失响应式，需要用toRefs解构
- teleport：传送门，将组件渲染到指定位置
- props只会接收定义了的属性，而useAttrs会接受非定义的属性，这两者是互补的，但是需要注意useAttrs不会自动转换驼峰写法
- vue2的data是个函数而且返回对象是为了防止组件被多个页面使用时，造成的变量互相污染
- v-cloak用于延迟显示元素，就是等vue渲染完才显示，防止闪烁
- v-pre 跳过vue编译直接显示元素，用于静态内容，可以减少vue的编译
- 在 Vue 3 中，$parent 和 $children 属性已被移除。代替的是组合式 API 中的 provide/inject。
- Object.freeze()接受一个对象作为参数，并返回一个相同的不可变的对象。这就意味着我们不能添加，删除或更改对象的任何属性。它与const的不同是const是防止变量重新分配，而Object.freeze()是使对象具有不可变性
- defineProperty为什么只对对象劫持，而要对数组进行方法重写
- watchEffect清除副作用可以使用参数里的回调onCleanup方法，也可以使用onWatcherCleanup
- vdom模拟真实dom的对象，每次数据更新的时候，新旧vdom都会进行对比，diff就是为了减少不必要的dom操作，提高性能。
- unref 相当于返回 ref 的 value
- markRaw 可以用来标记响应式对象里的某个属性不被追踪
- toRaw 将响应式变量转为普通变量

### 路由

- 动态路由参数变化的时候，相同的组件实例将重复使用，同时也意味着组件的生命周期钩子不会被调用，这时可以用watch监听路由参数做处理或者用beforeRouteUpdate（导航守卫）做处理
- sensitive参数在动态路由时不生效
- 需要留意嵌套路由是动态参数的父路由，在父路由做redirect会参数错误，子路由可以做空路由redirect解决（方法之一）
- 使用router-link的时候也需要留意动态参数的父路由，router-link是精准导航，如果指向的是父路由那么将不会触发redirect，你可以选择指向子路由并传入参数解决（方法之一）
- 配置路由时props属性可以将路由参数作为页面/组件参数传递