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:常用的有哪些?