框架学习

132 阅读2分钟

1.面试流程

image.png

image.png

2.兄弟传值 eventbus 不建议使用

image.png 3.vue 生命周期排序

父组件和子组件: 初始化是由外到内,渲染显示是由内到外的

image.png 4.MVVM

image.png image.png

不需要太频繁操作DOM,只要修改Model数据即可去驱动视图不需要去操作Dom, View:视图层 模板 Model: 模型data数据 ViewModel :View和Model连接的事件和监听 首先通过View事件监听Model 修改data

最好加上mvvm就是 model viewModel view三块,每块做什么工作的,然后解决了这个问题 主要是代码冗余 还有就是麻烦 所以MVVM就提供了 不需要做太多dom操作,只要实现业务上的逻辑即可 以前写jquery,我修改一个data 要document.getElement('text').innerHTML()这样去做 每操作一次dom,页面就需要重新布局重构 你写了100个document,页面重构重新布局100次

既然每次修改dom都会耗费性能,但是vm是怎么解决这个问题的 那解决这个问题就是创建一个虚拟dom树,然后跟真实的dom树进行比对,我修改了name age date三个数据,实际上只是修改了虚拟dom 然后比对发现只有这三个地方修改了,就只会一次性的去修改这三个地方 而不是分三次去挨个修改.

因为v-for key是惟一的,主要为了性能优化 不然虚拟Dom和真实Dom没发比较 是唯一的比较如果被修改就会一次性的做逻辑修改就会操作Dom ,没有被修改的就不做逻辑处理

5.v-model

image.png 6.$nextTick

vue是异步渲染 nextTickDom渲染完毕在做回调页面渲染完毕会将data做整合多次data修改只会修改一次,data修改之后Dom不会立马渲染执行。修改Dom调用nextTick 等Dom渲染完毕在做回调 页面渲染完毕会将data做整合 多次data修改只会修改一次,data修改之后 Dom不会立马渲染执行。 修改Dom调用nextTick

image.png

7.作用域插槽 slot 和匿名插槽

image.png

image.png 8.异步组件 什么时候用到才渲染 优化避免卡白内存体积小

image.png 9.keep-alive 做缓存 image.png 10.mixin

image.png 10.VUEX

image.png

image.png

11.Object.defineProperty 监听data变换

image.png Object.defineProperty深度监听对象 数组

image.png

image.png

image.png 12.VDOM (重要) vdom真实DOM和虚拟DOM做比较,得出最小更新范围,需要更新就更新,不需要就不用更新,在数据驱动视图下有效控制Dom操作。 image.png

image.png

image.png 13.diff算法

image.png image.png

image.png

image.png

image.png 14.模板编译

image.png

image.png

image.png

image.png

image.png

image.png 15.组件渲染和更新

image.png

image.png

image.png 16.异步渲染

image.png

image.png

image.png 17.路由原理

image.png

image.png

image.png

image.png 18.原理总结

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 19.Vue 真题演练模拟面试

image.png

image.png

image.png

image.png 定义vue文件是一个class是一个类,每个地方去使用这个组件的时候,是对这个类做了一个实例化

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 20.vue3

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png //vue3和vue2对比

image.png

image.png

image.png

image.png

image.png

image.png

image.png //响应式对比Object.defineProperty 和 Proxy

image.png

image.png

image.png

image.png

image.png //watch 和 watchEffect

image.png

image.png //vue3 比vue2快

image.png

image.png

image.png

//vite 打包快开发环境

image.png

image.png

// script-setup vue3 3.2.0版本以上使用

image.png

image.png

image.png

image.png

//面试技巧

image.png

image.png

image.png

image.png

image.png //项目流程

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

二.工作技巧 1.函数挂载组件

image.png

image.png

image.png

2.上传文件

image.png

3.插槽使用 作用域插槽

image.png

image.png

4.render 使用

函数挂载 改写render使用。 image.png

替代template模板

image.png image.png

image.png

JSX 使用

image.png

image.png JSX 函数组件

image.png

image.png

Vue attrsattrs、slots

fbcb316fc14161f8ada1615c3567528.png

image.png