7.1 框架前四章

作者： 作者的头像   bubboo123 ,  2022-07-01 10:07:22 ,  所有人可见 ,  阅读 284

1


1.png
2.png

第二章

Vue面试题

1.v-show和v-if的区别

2.为何v-for中要用key 80%

3.描述Vue组件生命周期（有父子组件的情况）

4.Vue组件如何通讯 90% 【最常见的两三种即可】

5.描述组件渲染和更新的过程 【好问题】

6.双向数据绑定v-model的实现原理

React面试题

1.React组件如何通讯

2.JSX本质是什么 【经常问】

3.context是什么，有何用途？

4.shouldComponentUpdate的用途

5.描述redux单项数据流

6.setState是同步还是异步?（场景题）

3.png

框架综合应用

1.基于React设计一个todolist（组件结构，redux state数据结构）

2.基于Vue设计一个购物车（组件结构，vuex state数据结构）

webpack面试题

1.前端代码为何要进行构建和打包？

2.module chunk bundle分别是什么意思，有何区别？

3.loader和plugin的区别？

4.webpack如何实现懒加载？

5.webpack常见性能优化 很多答案

6.babel-runtime和babel-polyfill的区别

4.png

第三章 Vue的使用

5.png
6.png
7.png

8.png

9.png

11.png

v-show渲染还是会渲染，只不过通过display:none;让元素没有显示出来而已，当需要频繁切换的时候用v-show，否则v-if还要有dom元素加载或销毁的成本

12.png

v-for的优先级比v-if的优先级高，如果它们同时使用，会导致每次都是先进行循环遍历再判断是否要显示。

13.png
14.png

15.png{width=78%}

16.png

17.png

18.png

19.png

20.png

1.png
3.png
2.png

4.png

Vue组件如何通讯，主要三点

1.Vue父子组件如何通讯？

利用props把数据从父组件传进子组件和this.$emit('xxx',参数)调用父组件的事件

2.如何用自定义事件进行vue组件间通讯？（比如组件间没有关系时）

5.png

7.png
6.png

3.利用Vuex进行通讯

Vue父子组件生命周期调用顺序【生命周期面试时很重要】

8.png{width=83%}
参考官网生命周期图示

9.png{width=83%}

10.png

留思考题，那beforeDestroy和destroyed的顺序呢？

11.png

12.png

平时v-model是在类如input上使用的，现在我们想在自定义组件上使用，就需要我们来自定义了。

14.png

model是一个配置项，子组件里的input使用:value和model.prop要和props对应起来。

props声明接收传进来的参数叫什么名字

change1事件要和model.event对应起来

13.png

$nextTick重要

15.png

16.png

slot

作用域插槽
17.png
18.png

1.png

动态组件 不常考但是问到了能说出来也极好

2.png{width=52%}

3.png

异步组件（vue如何异步加载组件） 【常考】

4.png{width=61%}

5.png

keep-alive（vue如何缓存组件）

比如tab切换时，频繁切换时因为有缓存就不用频繁销毁DOM元素。如果只是很简单的组件切换用v-show也可以
6.png{width=61%}
7.png

mixins如何抽离公共逻辑

8.png

9.png

10.png

11.png{width=81%}

Vuex知识点串讲 比较少考

12.png
13.png

Vue-router使用

Vue3的useRoute相当于以前的this.$route，而useRouter相当于this.$router

14.png{width=81%}

15.png

17.png

16.png

18.png{width=81%}

19.png

第四章 Vue原理-大厂必考

4-1

1.png{width=81%}

2.png{width=81%}

4-2 如何理解MVVM

4.png{width=91%}
Model就是组件里那个data
3.png

4-3 监听data变化的核心API是什么

5.png

6.png

这个方法接收三个参数:

  1. 属性所在的对象
  2. 属性的名字
  3. 一个描述符对象

能打印出来，说明这个函数的确监听得到变化
7.png
8.png

4-4 如何深度监听data变化【再次observe】

4-5 vue如何监听数组变化【数组原型】

// 触发更新视图
function updateView() {
    console.log('视图更新')
}

// 重新定义数组原型
const oldArrayProperty = Array.prototype
// 创建新对象，原型指向 oldArrayProperty ，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
    arrProto[methodName] = function () {
        updateView() // 触发视图更新
        oldArrayProperty[methodName].call(this, ...arguments)
        // Array.prototype.push.call(this, ...arguments)
    }
})

// 重新定义属性，监听起来
function defineReactive(target, key, value) {
    // 深度监听
    observer(value)

    // 核心 API
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if (newValue !== value) {
                // 深度监听
                observer(newValue)

                // 设置新值
                // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
                value = newValue

                // 触发更新视图
                updateView()
            }
        }
    })
}

// 监听对象属性
function observer(target) {
    if (typeof target !== 'object' || target === null) {
        // 不是对象或数组
        return target
    }

    // 污染全局的 Array 原型
    // Array.prototype.push = function () {
    //     updateView()
    //     ...
    // }

    if (Array.isArray(target)) {
        target.__proto__ = arrProto
    }

    // 重新定义各个属性（for in 也可以遍历数组）
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

// 准备数据
const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        address: '北京' // 需要深度监听
    },
    nums: [10, 20, 30]
}

// 监听数据
observer(data)

// 测试
// data.name = 'lisi'
// data.age = 21
// // console.log('age', data.age)
// data.x = '100' // 新增属性，监听不到 —— 所以有 Vue.set
// delete data.name // 删除属性，监听不到 —— 所有已 Vue.delete
// data.info.address = '上海' // 深度监听
data.nums.push(4) // 监听数组

4-6 虚拟DOM-面试里的网红

9.png

10.png
11.png

1.png
2.png
3.png

4-7

4.png

4-8 虚拟DOM-diff算法概述

20.png

5.png
1.png

4-9到4-13 深入diff算法源码 感觉挺烦

2.png

4-14 模板编译前置知识点-with语法

6.png

7.png

8.png
9.png

4-15 vue模板被编译成什么 后面再看吧

10.png
11.png

4-16 vue组件可用render代替template

1.png
2.png

4-17

3.png

4.png{width=81%}

4-18 vue组件是如何渲染和更新的

5.png
6.png
7.png
8.png

4-19 vue组件是异步渲染的

9.png
10.png

4-20 如何用JS实现hash路由

11.png

12.png

4-21 如何用JS实现H5 history路由

13.png{width=81%}
14.png
15.png
16.png

4-22 vue原理-考点总结和复习 之后再说吧

0 评论