前端框架及项目面试(聚焦Vue-React-Webpack)

阅读数: 2021-07-01

导学

课程链接

https://coding.imooc.com/class/419.html

前端面试常见流程

思维导图和课程资料

https://blog.cdn.ionluo.cn/files/frame-project-interview-master.zip

注意事项

关于Vue的基础使用部分，推荐官方文档，这里只是罗列了一些基础的部分，想要学好还是看官方文档。https://cn.vuejs.org/v2/guide/
关于React的基础，官方文档虽然没有Vue那么清晰易懂，但是也是很完善的，也是推荐用官网文档来进行学习。https://reactjs.bootcss.com/

Vue使用

说明

// package.json
{
  "dependencies": {
    "vue": "^2.6.10"
  }
}

Computed

<template>
    <div>
        <p>num {{num}}</p>
        <p>double1 {{double1}}</p>
        <input v-model="double2"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 20
        }
    },
    computed: {
        double1() {
            return this.num * 2
        },
        // 默认写法是getter， 像setter也可以举例子是fullName = firstName +' ' + lastName为例子
        double2: {
            // getter
            get() {
                return this.num * 2
            },
            // setter
            set(val) {
                this.num = val/2
            }
        }
    }
}
</script>

Watch

<template>
    <div>
        <input v-model="name"/>
        <input v-model="info.city"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '双越',
            info: {
                city: '北京'
            }
        }
    },
    watch: {
        name(oldVal, val) {
            console.log('watch name', oldVal, val) // 值类型，可正常拿到 oldVal 和 val
        },
        info: {
            handler(oldVal, val) {
                console.log('watch info', oldVal, val) // 引用类型，拿不到 oldVal 。因为指针相同，此时已经指向了新的 val
            },
            deep: true // 深度监听
        }
    }
}
</script>

扩展：computed 和 watch 的区别和运用的场景？

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

关于这个问题，也可以看看这篇文章：https://blog.csdn.net/weixin_39015132/article/details/83310726

Class和Style

<template>
    <div>
        <p :class="{ black: isBlack, yellow: isYellow }">使用 class</p>
        <p :class="[black, yellow]">使用 class （数组）</p>
        <p :style="styleData">使用 style</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isBlack: true,
            isYellow: true,

            black: 'black',
            yellow: 'yellow',

            styleData: {
                fontSize: '40px', // 转换为驼峰式
                color: 'red',
                backgroundColor: '#ccc' // 转换为驼峰式
            }
        }
    }
}
</script>

<style scoped>
    .black {
        background-color: #999;
    }
    .yellow {
        color: yellow;
    }
</style>

v-if和v-show

<template>
    <div>
        <p v-if="type === 'a'">A</p>
        <p v-else-if="type === 'b'">B</p>
        <p v-else>other</p>

        <p v-show="type === 'a'">A by v-show</p>
        <p v-show="type === 'b'">B by v-show</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            type: 'a'
        }
    }
}
</script>

v-for

<template>
    <div>
        <p>遍历数组</p>
        <ul>
            <li v-for="(item, index) in listArr" :key="item.id">
                {{index}} - {{item.id}} - {{item.title}}
            </li>
        </ul>

        <p>遍历对象</p>
        <ul >
            <li v-for="(val, key, index) in listObj" :key="key">
                {{index}} - {{key}} -  {{val.title}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            flag: false,
            listArr: [
                { id: 'a', title: '标题1' }, // 数据结构中，最好有 id ，方便使用 key
                { id: 'b', title: '标题2' },
                { id: 'c', title: '标题3' }
            ],
            listObj: {
                a: { title: '标题1' },
                b: { title: '标题2' },
                c: { title: '标题3' },
            }
        }
    }
}
</script>

v-for的优先级比v-if高，但是不建议两者一起使用, 可以利用计算属性的方式生成需要的列表。

v-on

<template>
    <div>
        <p>{{num}}</p>
        <button @click="increment1">+1</button>
        <button @click="increment2(2, $event)">+2</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 0
        }
    },
    methods: {
        increment1(event) {
            // eslint-disable-next-line
            console.log('event', event, event.__proto__.constructor) // 是原生的 event 对象
            // eslint-disable-next-line
            console.log(event.target)
            // eslint-disable-next-line
            console.log(event.currentTarget) // 注意，事件是被注册到当前元素的，和 React 不一样
            this.num++

            // 1. event 是原生的
            // 2. 事件被挂载到当前元素
            // 和 DOM 事件一样
        },
        increment2(val, event) {
            // eslint-disable-next-line
            console.log(event.target)
            this.num = this.num + val
        },
        loadHandler() {
            // do some thing
        }
    },
    mounted() {
        window.addEventListener('load', this.loadHandler)
    },
    beforeDestroy() {
        //【注意】用 vue 绑定的事件，组建销毁时会自动被解绑
        // 自己绑定的事件，需要自己销毁！！！
        window.removeEventListener('load', this.loadHandler)
    }
}
</script>

上面漏了2个：

<!-- 点击事件只会触发一次 -->
<a @click.once="doThis"></a>
<!-- 给组件绑定点击事件 -->
<my-component @click.native="doThis"></my-component>

通用法：
1
2
3


<input @keyup.13="submit">
记住所有的keyCode比较困难，所以Vue为最常用的按键提供了别名：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

.left
.right
.midddle
可以通过全局config.keyCodes对象自定义键值修饰符别名：
1
2
// 可以通过 @keyup.f1 使用
Vue.config.keyCodes.f1 = 11we2

v-model

<template>
    <div>
        <p>输入框: {{name}}</p>
        <input type="text" v-model.trim="name"/>
        <input type="text" v-model.lazy="name"/>
        <input type="text" v-model.number="age"/>

        <p>多行文本: {{desc}}</p>
        <textarea v-model="desc"></textarea>
        <!-- 注意，<textarea>{{desc}}</textarea> 是不允许的！！！ -->

        <p>复选框 {{checked}}</p>
        <input type="checkbox" v-model="checked"/>

        <p>多个复选框 {{checkedNames}}</p>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>

        <p>单选 {{gender}}</p>
        <input type="radio" id="male" value="male" v-model="gender"/>
        <label for="male">男</label>
        <input type="radio" id="female" value="female" v-model="gender"/>
        <label for="female">女</label>

        <p>下拉列表选择 {{selected}}</p>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>

        <p>下拉列表选择（多选） {{selectedList}}</p>
        <select v-model="selectedList" multiple>
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '双越',
            age: 18,
            desc: '自我介绍',

            checked: true,
            checkedNames: [],

            gender: 'male',

            selected: '',
            selectedList: []
        }
    }
}
</script>

扩展：直接给一个数组项赋值，Vue 能检测到变化吗？

由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：
1
2
3
4
5
6
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
为了解决第二个问题，Vue 提供了以下操作方法：
1
2
// Array.prototype.splice
vm.items.splice(newLength)
扩展：对象属性添加和删除，Vue 能检测到变化吗？

还是由于JavaScript的限制，Vue不能检测对象属性的添加和删除：
1
2
3
4
5
6
7
8
// a的变化可以检测到
var vm = new Vue({
    data: {
        a: 1
    }
})
// b的变化检测不到
vm.b = 2
扩展：对于已经创建的实例，Vue不能动态添加根级别的响应式属性。

但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
1
2
3
4
5
6
7
var vm = new Vue({
    data: {
        message: {
            text1: 'hello'
        }
    }
})
你可以添加一个新的text2属性到message对象：
1
Vue.set(vm.message, 'text2', 'world')
你还可以使用vm.$set实例方法，它只是全局Vue.set的别名：
1
this.$set(this.message, 'text2', 'world')
有时你可能需要为已有对象赋予多个新属性，比如使用Object.assign()或_.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，可以这么做：
1
2
3
4
this.message = Object.assign({}, this.message, {
    text2: 'wold',
    text3: '!'
})
PS: 也可以通过 this.$forceUpdate() 直接强制更新视图

组件通信

有父子组件通信，子父组件通信，平行组件通信

Index.vue

<template>
    <div>
        <Input @add="addHandler"/>
        <List :list="list" @delete="deleteHandler"/>
    </div>
</template>

<script>
import Input from './Input'
import List from './List'

export default {
    components: {
        Input,
        List
    },
    data() {
        return {
            list: [
                {
                    id: 'id-1',
                    title: '标题1'
                },
                {
                    id: 'id-2',
                    title: '标题2'
                }
            ]
        }
    },
    methods: {
        addHandler(title) {
            this.list.push({
                id: `id-${Date.now()}`,
                title
            })
        },
        deleteHandler(id) {
            this.list = this.list.filter(item => item.id !== id)
        }
    },
    created() {
        // eslint-disable-next-line
        console.log('index created')
    },
    mounted() {
        // eslint-disable-next-line
        console.log('index mounted')
    },
    beforeUpdate() {
        // eslint-disable-next-line
        console.log('index before update')
    },
    updated() {
        // eslint-disable-next-line
        console.log('index updated')
    },
}
</script>

Input.vue

<template>
    <div>
        <input type="text" v-model="title"/>
        <button @click="addTitle">add</button>
    </div>
</template>

<script>
import event from './event'

export default {
    data() {
        return {
            title: ''
        }
    },
    methods: {
        addTitle() {
            // 调用父组件的事件
            this.$emit('add', this.title)

            // 调用自定义事件
            event.$emit('onAddTitle', this.title)

            this.title = ''
        }
    }
}
</script>

List.vue

<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id">
                {{item.title}}

                <button @click="deleteItem(item.id)">删除</button>
            </li>
        </ul>
    </div>
</template>

<script>
import event from './event'

export default {
    // props: ['list']
    props: {
        // prop 类型和默认值
        list: {
            type: Array,
            default() {
                return []
            }
        },
        // 基础类型检测（如果是null，意思是任何类型都可以）
        propA: Number, 
        // 多种类型
        propB: [Number, String],
        // 必传且是字符串
        propC: {
            type: String,
            required: true
        },
        // 数字，有默认值
        propD: {
            type: NUmber,
            default: 100
        },
        // 数组或对象的默认值应当由一个工厂函数返回
        propE: {
            type: Object,
            default: function(){
                return { message: 'hello word!' }
            }
        },
        // 自定义验证函数
        propF: {
            validator: function(value){
                return value > 10
            }
        }
        // type可以是下面原生构造器
        // String, Number, Boolean, Function, Object, Array, Symbol
        // type也可以是一个自定义构造器函数，使用instanceof检测
    },
    data() {
        return {

        }
    },
    methods: {
        deleteItem(id) {
            this.$emit('delete', id)
        },
        addTitleHandler(title) {
            // eslint-disable-next-line
            console.log('on add title', title)
        }
    },
    created() {
        // eslint-disable-next-line
        console.log('list created')
    },
    mounted() {
        // eslint-disable-next-line
        console.log('list mounted')

        // 绑定自定义事件
        event.$on('onAddTitle', this.addTitleHandler)
    },
    beforeUpdate() {
        // eslint-disable-next-line
        console.log('list before update')
    },
    updated() {
        // eslint-disable-next-line
        console.log('list updated')
    },
    beforeDestroy() {
        // 及时销毁，否则可能造成内存泄露
        event.$off('onAddTitle', this.addTitleHandler)
    }
}
</script>

event.js

1
2
3

import Vue from 'vue'

export default new Vue()

组件扩展：

给组件绑定原生事件（.native）

1	<my-component @click.native="doTheThing"></my-component>

自定更新父组件属性（.sync）

<!-- 有时候，我们希望实现Props的“双向绑定”,可以使用.sync修饰符，它是一个编译时的语法糖 -->
<my-component :foo.sync="bar"></my-component>
<!-- 编译成： <my-component :foo="bar" @update:foo="value => bar = value"></my-component> -->
<!-- 子组件需要更新foo时，显示触发一个更新事件 -->
this.$emit('update:foo', newValue)

组件命名约定

component: {
    // 使用 kebab-case 形式注册
    'kebab-cased-component': {},
    // register using camelCase
    'camelCasedComponent': {},
    // register using PascalCase
    'PascalCaseComponent': {},
}
// 在HTML模板中，请使用kebab-case形式
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-case-component></pascal-case-component>

递归组件

参考推荐阅读中的Vue: export default中的name属性到底有啥作用呢？

组件生命周期

谈谈你对 Vue 生命周期的理解？

（1）生命周期是什么？

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）各个生命周期的作用

生命周期	描述
beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive 专属，组件被激活时调用
deactivated	keep-alive 专属，组件被销毁时调用
beforeDestroy	组件销毁前调用
destroyed	组件销毁后调用

（3）生命周期示意图

Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程

父 beforeUpdate -> 父 updated
销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

能更快获取到服务端数据，减少页面 loading 时间；
ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

在什么阶段才能访问操作DOM？

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。
父组件可以监听到子组件的生命周期吗？

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

// Parent.vue
<Child @mounted="doSomething"/>
    
// Child.vue
mounted() {
  this.$emit("mounted");
}

以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},
    
//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
},    
    
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...

当然 @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以监听。

自定义组件的v-model

Index.vue

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>

        <!-- 自定义 v-model -->
        <p>{{name}}</p>
        <CustomVModel v-model="name"/>
    </div>
</template>

<script>
import CustomVModel from './CustomVModel'

export default {
    components: {
        CustomVModel
    },
    data() {
        return {
            name: '双越'
        }
    }
}
</script>

CustomVModel.vue

<template>
    <!-- 例如：vue 颜色选择 -->
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
    <!--
        1. 上面的 input 使用了 :value 而不是 v-model
        2. 上面的 change1 和 model.event 要对应起来
        3. text1 属性对应起来
    -->
</template>

<script>
export default {
    model: {
        prop: 'text1', // 对应 props text1
        event: 'change1'
    },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}
</script>

$nextTick

<template>
  <div id="app">
    <ul ref="ul1">
        <li v-for="(item, index) in list" :key="index">
            {{item}}
        </li>
    </ul>
    <button @click="addItem">添加一项</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
        list: ['a', 'b', 'c']
      }
  },
  methods: {
    addItem() {
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)

        // 1. 异步渲染，$nextTick 待 DOM 渲染完再回调
        // 3. 页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次
        this.$nextTick(() => {
          // 获取 DOM 元素
          const ulElem = this.$refs.ul1
          // eslint-disable-next-line
          console.log( ulElem.childNodes.length )
        })
    }
  }
}
</script>

slot

基本使用

Index.vue

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>
        <!-- slot -->
        <SlotDemo :url="website.url">
            {{website.title}}
        </SlotDemo>
    </div>
</template>

<script>
import SlotDemo from './SlotDemo'

export default {
    components: {
        SlotDemo
    },
    data() {
        return {
            website: {
                url: 'http://imooc.com/',
                title: 'imooc',
                subTitle: '程序员的梦工厂'
            }
        }
    }
}
</script>

SlotDemo.vue

<template>
    <a :href="url">
        <slot>
            默认内容，即父组件没设置内容时，这里显示
        </slot>
    </a>
</template>

<script>
export default {
    props: ['url'],
    data() {
        return {}
    }
}
</script>

作用域插槽

Index.vue

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>
        <ScopedSlotDemo :url="website.url">
            <!-- 这里通过作用域插槽，拿到了组件里面的作用域（变量website）-->
            <template v-slot="slotProps">
                {{slotProps.slotData.title}}
            </template>
        </ScopedSlotDemo>
    </div>
</template>

<script>
import ScopedSlotDemo from './ScopedSlotDemo'

export default {
    components: {
        ScopedSlotDemo
    },
    data() {
        return {
            website: {
                url: 'http://imooc.com/',
                title: 'imooc',
                subTitle: '程序员的梦工厂'
            }
        }
    }
}
</script>

ScopedSlotDemo.vue

<template>
    <a :href="url">
        <slot :slotData="website">
            {{website.subTitle}} <!-- 默认值显示 subTitle ，即父组件不传内容时 -->
        </slot>
    </a>
</template>

<script>
export default {
    props: ['url'],
    data() {
        return {
            website: {
                url: 'http://wangEditor.com/',
                title: 'wangEditor',
                subTitle: '轻量级富文本编辑器'
            }
        }
    }
}
</script>

具名插槽

动态组件

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>

        <!-- 动态组件(组件会在 `NextTickName` 改变时改变) -->
        <component :is="NextTickName"/>
    </div>
</template>

<script>
import NextTick from './NextTick'

export default {
    components: {
        NextTick
    },
    data() {
        return {
            NextTickName: "NextTick"
        }
    }
}
</script>

动态组件的缓存需要借助keep-alive: https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive

异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如：

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

下面展示Webpack 和 ES2015 语法加在一起（vue-cli），我们可以这样使用动态导入：

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>
        
        <!-- 异步组件 -->
        <FormDemo v-if="showFormDemo"/>
        <button @click="showFormDemo = true">show form demo</button>
    </div>
</template>

<script>

export default {
    components: {
        // 这里不用关系这个组件是上面，仅做展示
        FormDemo: () => import('../BaseUse/FormDemo'),
    },
    data() {
        return {
            showFormDemo: false
        }
    }
}
</script>

mixin

Index.vue

<template>
    <div>
        <p>{{name}} {{major}} {{city}}</p>
        <button @click="showName">显示姓名</button>
    </div>
</template>

<script>
import myMixin from './mixin'

export default {
    mixins: [myMixin], // 可以添加多个，会自动合并起来
    data() {
        return {
            name: '双越',
            major: 'web 前端'
        }
    },
    methods: {
    },
    mounted() {
        // eslint-disable-next-line
        console.log('component mounted', this.name)
    }
}
</script>

mixin.js

export default {
    data() {
        return {
            city: '北京'
        }
    },
    methods: {
        showName() {
            // eslint-disable-next-line
            console.log(this.name)
        }
    },
    mounted() {
        // eslint-disable-next-line
        console.log('mixin mounted', this.name)
    }
}

mixin的说明

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
可自定义选项合并策略

mixin的问题

变量来源不明确，不利于阅读（合理的形式应该像es6的import）
多个mixin可能会造成命名冲突（官方推荐使用一定的规范来避免）
mixin和组件可能出现多对多的关系，复杂度高（要极力避免）

周边组件库

Vuex

面试考点并不多，但是基本概念，基本使用和API必须掌握，可能会考察state的数据结构设计。

代码demo见：https://gitee.com/cheerfulion/my_public_demos/tree/master/vuex_demo

demo这里在小型项目就够用了，大项目的话可以看下module：

https://blog.csdn.net/chenzhizhuo/article/details/96872320

vuex

Vue-router

这里的考点我觉得文档上面已经列的很好了，内容也不多，推荐直接点击上面标题阅读源文档。这里就主要讲解几个点吧！

路由模式

hash模式（默认）
history模式（需要后台支持，文档中给出了各个后端服务器的配置方法，注意该方式需要前端指定404页面）

动态路由

模式	匹配路径	$route.params
/user/:username	/user/evan	`{ username: 'evan' }`
/user/:username/post/:post_id	/user/evan/post/123	`{ username: 'evan', post_id: '123' }`
/user/ion*	/user/ionluo	`{ pathMatch: 'luo' }`g

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等。你可以查看 API 文档的详细说明。

详见官方文档。

路由懒加载

其实就是上面的异步组件的webpack实现。

UI组件库

Element

开发团队：饿了么

核心关键词：PC端UI组件库，不支持Vue1.x

Mint UI

开发团队：饿了么

核心关键词：移动端独立组件库，Vue1.x和Vue2.x都支持，体积小（30kb）,但是组件个数偏少

iView

核心关键词：PC，中后台产品，Vue1.x和Vue2.x都支持。开源了一个Iview Admin，做后台非常方便。

Vux

核心关键词：移动端，WeUI，组件多，不支持Vue1.x。Vux主要服务于微信页面，WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计。

其他

Bootstrap-Vue

Bootstrap-VUE提供了基于vue2的Bootstrap V4组件和网格系统的实现，完成了广泛和自动化的WAI ARA可访问性标记。想当初刚流行响应式网站的时候，Bootstrap是世界上最受欢迎的建立移动优先网站的框架，Bootstrap可以说风靡全球。就算放在现在很多企业网站都是采用Bootstrap做的响应式。Bootstrap-Vue可以让你在Vue中也实现Bootstrap的效果。

Ant Design Vue

Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。Ant Design Vue共享Ant Design of React设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉Ant Design的在使用Vue时，很容易的上手。

Vant

Vant是一个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的，主要维护也是有赞团队。Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

Vue原理

组件化和MVVM
响应式原理
vdom和diff算法
模板编译
组件渲染过程
前端路由

关于MVC、MVP和MVVM的理解

MVC作为经典的框架模式，视图层，数据层以及业务逻辑层都有关联，缺点是数据和视图耦合性高，逻辑层臃肿（Jquery）。

MVP视图和数据都通过P这个中间层交互，导致P层特别臃肿。但是去除了数据和视图的耦合性，维护起来更方便（Django）。

MVVM把VM代替上面的C和P层，直接通过数据驱动渲染视图（Angular， React， Vue）。

响应式原理

核心API - Object.defineProperty

Vue3.0使用Proxy实现响应式，因为Object.defineProperty具有一些缺点。

注意：Proxy兼容性不如Object.defineProperty，且无法polyfill

Object.defineProperty缺点

深度监听，需要递归到底，一次性计算量大
无法监听新增属性/删除属性(所以Vue提供了Vue.set和 Vue.delete方法)
无法原生监听数组，需要特殊处理

下面实现对象和数组的响应式：

视频讲解见：https://www.bilibili.com/video/BV1VA411x76D

// 触发更新视图
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[0] = 0 // 监听数组
data.nums.push(4) // 监听数组

虚拟DOM和diff算法（难点）

视频讲解见：https://www.bilibili.com/video/BV1dV411a7mT

vdom是实现vue和React的重要基石
diff算法是vdom中最核心、最关键的部分
vdom是一个热门话题，也是面试中热门话题

vdom

DOM操作非常耗费性能
以前用JQuery，可以自行控制DOM操作的时机，手动调整
vdom用JS模拟DOM结构，计算出最小的变更（diff算法）来操作DOM
vdom是React提出的，vue2.0后也开始使用。

这里的JS模拟在不同的框架中可能不一样的表示，即没有既定的标准，如tag可能有的称为element, style 可能不放在props中。

diff算法

模板编译

前置知识：JS的with语法
vue template complier 将模板编译为 render 函数
执行 render 函数生成 vnode

with语法

with 要慎用，它打破了作用域规则，易读性变差

///

const obj = {a:100, b:200}

console.log(obj.a)  // 100
console.log(obj.b)  // 200
console.log(obj.c)  // undefined

// 使用with，能改变 {} 内自由变量的查找方式
// 将 {} 内自由变量，当做obj的属性来查找
with (obj) {
    console.log(a)  // 100
	console.log(b)  // 200
	console.log(c)  // 会报错！！！ Uncaught ReferenceError: c is not defined
}

编译模板（vue template complier 将模板编译为 render 函数）

// "vue-template-compiler": "^2.6.10"
const compiler = require('vue-template-compiler')

// 说明： _c: createElement 即 h 函数， 参考上面的diff算法中h函数有哪些参数
// 从下面开始，会把_c这些换成语义更好的对应函数名，方便阅读，实际返回的是一些缩写，如果第一个差值实际返回的是：
// with(this){return _c('p',[_v(_s(message))])}

// 插值
// const template = `<p>{{message}}</p>`
// with(this){return createElement('p',[createTextVNode(toString(message))])}

// 表达式
// const template = `<p>{{flag ? message : 'no message found'}}</p>`
// with(this){return createElement('p',[createTextVNode(toString(flag ? message : 'no message found'))])}

// // 属性和动态属性
// const template = `
//     <div id="div1" class="container">
//         <img :src="imgUrl"/>
//     </div>
// `
// with(this){return createElement('div',
//      {staticClass:"container",attrs:{"id":"div1"}},
//      [
//          createElement('img',{attrs:{"src":imgUrl}})
// 		]
// )}

// // 条件
// const template = `
//     <div>
//         <p v-if="flag === 'a'">A</p>
//         <p v-else>B</p>
//     </div>
// `
// with(this){return createElement('div',
// 		[ (flag === 'a')?createElement('p',[createTextVNode("A")]):createElement('p',[createTextVNode("B") ])
// 		])}

// 循环
// const template = `
//     <ul>
//         <li v-for="item in list" :key="item.id">{{item.title}}</li>
//     </ul>
// `
// with(this){return createElement('ul',renderList((list),function(item){return createElement('li',{key:item.id},[createTextVNode(toString(item.title))])}),0)}

// 事件
// const template = `
//     <button @click="clickHandler">submit</button>
// `
// with(this){return createElement('button',{on:{"click":clickHandler}},[createTextVNode("submit")])}

// v-model
const template = `<input type="text" v-model="name">`
// 主要看 input 事件
// with(this){return createElement('input',{directives:[{name:"model",rawName:"v-model",value:(name),expression:"name"}],attrs:{"type":"text"},domProps:{"value":(name)},on:{"input":function($event){if($event.target.composing)return;name=$event.target.value}}})}

// render 函数
// 返回 vnode
// patch

// 编译
const res = compiler.compile(template)
console.log(res.render)

// ---------------分割线--------------

// // 从 vue 源码中找到缩写函数的含义
// function installRenderHelpers (target) {
//     target._c = createElement;
//     target._o = markOnce;
//     target._n = toNumber;
//     target._s = toString;
//     target._l = renderList;
//     target._t = renderSlot;
//     target._q = looseEqual;
//     target._i = looseIndexOf;
//     target._m = renderStatic;
//     target._f = resolveFilter;
//     target._k = checkKeyCodes;
//     target._b = bindObjectProps;
//     target._v = createTextVNode;
//     target._e = createEmptyVNode;
//     target._u = resolveScopedSlots;
//     target._g = bindObjectListeners;
//     target._d = bindDynamicKeys;
//     target._p = prependModifier;
// }

总结

模板编译为 render 函数，执行 render 函数返回 vnode
基于 vnode 再执行 patch 和 diff
使用 webpack vue-loader ，会在开发环境编译模板

使用 render 代替 template

了解过上面的 render 函数，则在一些特殊情况下，也可以定义组件的时候不用 template 而是直接使用render

Vue.component('heading', {
    // template: `xxxxx`,
    render: function(createElement) {
        return createElement('h' + this.level, [
            createElement('a', {
                attrs: {
                    name: 'headerId',
                    href: '#headerId'
                }
            }, 'this is a tag')
        ])
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})

组件渲染和更新过程

初次渲染过程

解析模板为 render 函数（或在开发环境已完成，vue-loader）
触发响应式，监听 data 属性 getter setter
执行 render 函数，生成 vnode， patch(elem, vnode)

更新过程

修改 data，触发 setter（此前在getter中已被监听）
重新执行 render 函数，生成 newVnode
patch(vnode, newVnode)

前端路由原理

hash路由

hash 变化会触发网页跳转，即浏览器的前进、后退
hash 变化不会刷新页面，SPA必须的特点
hash 永远不会提交到 server 端
核心API：window.onhashchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hash test</title>
</head>
<body>
    <p>hash test</p>
    <button id="btn1">修改 hash</button>

    <script>
        // hash 变化，包括：
        // a. JS 修改 url
        // b. 手动修改 url 的 hash
        // c. 浏览器前进、后退
        window.onhashchange = (event) => {
            console.log('old url', event.oldURL)
            console.log('new url', event.newURL)

            console.log('hash:', location.hash)
        }

        // 页面初次加载，获取 hash
        document.addEventListener('DOMContentLoaded', () => {
            console.log('hash:', location.hash)
        })

        // JS 修改 url
        document.getElementById('btn1').addEventListener('click', () => {
            location.href = '#/user'
        })
    </script>
</body>
</html>

history路由

用 url 规范的路由，但跳转时不刷新页面
正式环境需要 server 端配合，可参考 https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
核心API：history.pushState、window.onpopstate
https://developer.mozilla.org/zh-CN/docs/Web/API/History

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>history API test</title>
</head>
<body>
    <p>history API test</p>
    <button id="btn1">修改 url</button>

    <script>
        // 页面初次加载，获取 pathname
        document.addEventListener('DOMContentLoaded', () => {
            console.log('load', location.pathname)
        })

        // 打开一个新的路由
        // 【注意】用 pushState 方式，浏览器不会刷新页面
        document.getElementById('btn1').addEventListener('click', () => {
            const state = { name: 'page1' }
            console.log('切换路由到', 'page1')
            history.pushState(state, '', 'page1') // 重要！！
        })

        // 监听浏览器前进、后退
        window.onpopstate = (event) => { // 重要！！
            console.log('onpopstate', event.state, location.pathname)
        }
    </script>
</body>
</html>

Vue面试真题演练

为什么要在v-for中用key
- 必须用 key，且不能是 index 和 random
- diff算法中通过 tagName 和 key 来判断，是否是 sameNode
- 减少渲染次数，提高渲染性能
描述 Vue 组件生命周期（父子组件）
- 单组件生命周期图
- 父子组件生命周期关系
- 详见 Vue使用 下的 组件生命周期 一节
Vue组件如何通讯
- 父 –> 子： props
- 子 –> 父： this.$emit –> this.$on
- EventBus (平行组件)
- vuex (中大型项目组件通讯，可以任意组件互相通讯（未设置命名空间情况下）)
- 详见 Vue使用 下的 组件通信 一节
描述组件渲染和更新过程

详见 Vue原理 下的 组件渲染和更新过程 一节

双向数据绑定 v-model 的实现原理（注意不是问响应式数据的原理）
- input 元素的 value = this.name
- 绑定 input 事件 this.name = $event.target.value
- data 更新触发 re-render
- 详见 Vue原理 下的 模板编译 一节
对MVVM的理解

详见 Vue原理 下的 关于MVC、MVP和MVVM的理解 一节

computed有何特点
- 使用方式相当于data中的数据（属性），声明方式相当于method（函数）
- 计算结果会缓存，只有相关数据改变才会重新计算

为何组件 data 必须是一个函数

组件在编译后是一个类(构造器)，组件的使用就是类的实例化。如果data不是函数的话，复用组件就会导致数据共享而造成组件混乱。而不用复用的Vue实例(new Vue({ data: {} }))的data就可以是对象就是这个原因。

ajax请求应该放在哪个生命周期

这个问题视频中说放mounted，网上感觉各有争议，我这里自己归纳下
- 放哪个生命周期看业务需求。极端点情况，不需要使用返回结果的时候，你甚至可以在beforeCreate和destroyed生命周期里面发起ajax请求。
- 当使用服务器渲染(ssr)的时候并且页面结构由ajax请求数据渲染得出，这时候需要在created生命周期发起请求，因为ssr没有mounted生命周期
- 当页面结构由ajax请求数据渲染得出且请求结束需要进行DOM操作的话，放在mounted生命周期。
- 当在keep-alive动态组件中需要激活时请求刷新数据，在activated发起ajax请求
- 当数据更新时，……等等
总结：ajax在哪个生命周期发起请求需要看具体的业务需求，考虑正常的ajax拿去数据初始化页面，则可以放在created生命周期，虽然和放mounted生命周期性能上的差异很小，但是如此可以兼容服务端的渲染，而不需要到时候调整代码位置。

如何将组件所有props传递给子组件
1
2
<User v-bind = '$props' />

更多可移步此处：https://blog.csdn.net/xueyue616/article/details/105379009

如何自己实现 v-model

这里视频介绍的是组件的v-model，实现如下图，但是下图也仅仅展示了子组件的写法，父组件需要加上 v-model=”text”。详见 Vue使用 下的 自定义组件的v-model 一节。如果只是普通的v-model就是：
1
<input type='text' :value="text" @input="text = $event.target.value">
多个组件有相同的逻辑，如何抽离？

mixin以及mixin的一些缺点，详见 Vue使用 下的 mixin 一节
何时要使用异步组件
- 加载大组件
- 路由异步加载
何时用使用beforeDestroy
- 解绑自定义事件 event.$off
- 解绑自定义DOM事件，如 window.onsroll 等
- 清除定时器

Vuex中 action 和 mutation 有何区别
- action 中处理异步， mutation不可以
- mutation做原子操作（不可分割的操作，要不全部完成，要不全部不完成）
- action 可以整合多个 mutation

请用 vnode 描述一个 DOM 结构

Vue监听 data 变化的核心 API 是上面
- Object.defineProperty
- 深度监听，监听数组
- 有何缺点
- 详见 Vue原理 的 响应式原理 一节
Vue如何监听数组变化
- Object.definePropery 不能监听数组变化
- 重新定义原型，重写数组方法（如 push, pop 等），实现监听
- Vue3 的 Proxy 则可以原生支持监听数组的变化
diff算法的时间复杂度
- O(n)
- 在 O(3) 做了些调整使得时间复杂度降为 O(n) (同级比较，tag不同销毁重建，tag和key相同认为是相同的结点)
简述 diff 算法过程
- patch(elem, vnode) 和 patch(vnode, newVnode)
- patchVnode 和 addVnodes 和 removeVnodes
- updateChildren ( key的重要性 )
Vue为何是异步渲染，$nextTick何用
- 异步渲染（以及合并 data 修改）都是用以提高渲染性能的
- $nextTick 在 DOM 更新完之后触发回调
Vue常见的性能优化方式
- 合理使用 v-show 和 v-if
- 合理使用computed
- v-for 加 key，以及避免v-for和v-if同时使用（如果要同时使用的情况也请用计算属性）
- 自定义事件、DOM事件、定时器及时销毁（防止内存泄漏）
- 合理使用异步组件
- 合理使用keep-alive
- data 层级不要太深（响应式是要递归的，所以data层级尽量扁平些）
- 使用 vue-loader 在开发环境做模板编译
- webpack层面优化
- 前端通用的性能优化，如图片懒加载
- 使用ssr

Vue3学习

该节讲的有点不太好，没有太多的干货，建议根据官方文档学习，该节主要看下 响应式的实现原理 即可。

针对该情况对章节内容进行了一定的打乱调整以方便后期自己查阅

关于相关面试题感觉可以看看这篇文章：https://juejin.cn/post/7139921537896808479

Vue3 升级内容

全部用 ts 重写（响应式，vdom，模板编译等）
性能提升，代码量减少
会调整部分API

Vue2.x马上要过时了吗

Vue3从正式发布到推广开来，还需要一段时间
Vue2.x应用范围非常广，有大量项目需要维护升级
Proxy存在浏览器兼容性问题，且不能polyfill

个人学习笔记

关于 Composition API 和 Options API 混用时，Options API 可以通过 this 获取到 setup 返回的数据，但是 Composition API 没有办法获取到 Options API 的数据
setup语法糖
1
ref 可以定义基本类型、对象类型的响应式数据

reactive 只能定义对象类型的响应式数据

课程内容

1、vue3 比 vue2 有什么优势

性能更好
体积更小
更好的ts支持
更好的代码组织
更好的逻辑抽离
更多的性能

Composition API

2、描述 vue3 生命周期

Options API 生命周期
- beforeDestory 改为 beforeUnmount
- destoryed 改为 unmouted
- 其他沿用Vue2生命周期
Composition API 生命周期

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  name: 'LifeCycles',
  data() {
    return {
    }
  },

  // 等于 beforeCreate 和 created
  setup() {
    console.log('setup')

    // 下面是 Composition API 生命周期写法
    onBeforeMount(_ => {
      console.log('onBeforeMount')
    })
    onMounted(_ => {
      console.log('onMounted')
    })
    onBeforeUpdate(_ => {
      console.log('onBeforeUpdate')
    })
    onUpdated(_ => {
      console.log('onUpdated')
    })
    onBeforeUnmount(_ => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(_ => {
      console.log('onUnmounted')
    })
  },

  // 下面是 Options API 生命周期写法
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  // beforeDestory 改名
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  // destoryed 改名
  unmounted() {
    console.log('unmounted')
  },
}

如何看待 Composition API 和 Options API

详见官方介绍，这里只是简单说明：https://cn.vuejs.org/guide/extras/composition-api-faq.html#%E4%BB%A3%E7%A0%81%E7%BB%84%E7%BB%87
- Composition API 带来了什么？
  - 更好的代码组织 - 相同逻辑关注点的代码组织在一起，不会像Options API一样被强制拆分
  - 更好的逻辑复用 - 通过组合函数实现更高效的逻辑复用
  - 更好的类型推导 - 搭配 TS 使用，组合式 API 主要利用基本的变量和函数，它们本身就是类型友好的
- Composition API 和 Options API 如何选择？
  - 不建议共用，会引起混乱
  - 小型项目、业务逻辑简单，用 Options API
  - 中大型项目、逻辑复杂，用 Composition API
- 别误解 Composition API
  - Composition API属于高阶技巧，不是基础必会
  - Composition API是为解决复杂业务逻辑而设计
  - Composition API就像 Hooks 在 React 中的地位

4、如何理解ref、toRef、toRefs

是什么

ref

生成值类型的响应式数据
可用于模板和 reactive
通过.value修改值
ref sugar提案

toRef

针对一个响应式对象（reactive封装）的prop
创建一个ref，具有响应式
两者保持引用关系

toRefs

将响应式对象（reactive封装）转换为普通对象
对象的每个prop都是对应的ref
两者保持引用关系

合成函数返回响应式对象

import { reactive, toRefs } from 'vue';

function useFeatureX() {
  const state = reactive({
    x: 1,
    y: 2
  })

  // 逻辑运行状态，省略N行

  // 返回时转换为ref
  return toRefs(state)
}


export default {
  setup() {
    // 可以在不失去响应性的情况下破坏结构
    const { x, y } = useFeatureX()

    return {
      x,
      y
    }
  }
}

最佳使用方式
- 用reactive 做对象的响应式，用ref做值的响应式
- ref 的变量命名都用 xxxRef
- setup 中返回 toRefs(state), 或者 toRef(state, ‘xxx’)
- 合成函数返回响应式对象时，使用toRefs
  
  后面两点都是为了template使用响应式对象的时候可以直接引用而不是需要用 state.xxx，也就是toRef是把reactive对象的一个属性转换成ref对象，toRefs是把整个reactive对象转换成ref对象构成的普通对象
进阶，深入理解
- 为何需要ref
  - 返回值类型会丢失响应式
  - 如在 setup、computed、合成函数都有可能返回值类型
  - Vue如不定义ref，用户将自造ref，反而混乱
    
    个人理解应该是 vue3的响应式是通过 proxy 实现的，proxy只能挟持对象而不能是简单数据类型，因此对于简单值类型，使用ref去创建响应式
- 为何需要.value
  - ref是一个对象（不丢失响应式），value存储值
  - 通过 value 属性的get和set实现响应式
  - 用于模板、reactive时，不需要.value，其他情况都需要
- 为何需要 toRef toRefs
  - 初衷：不丢失响应式的情况下，把对象数据分解/扩散
  - 前提：针对的是响应式对象（reactive封装的）非普通对象
  - 注意：不创造响应式，而是延续响应式（老师自己创造的话）

5、vue3 升级了哪些重要内容

vue2项目需要升级到vue3版本，可以参考：https://v3-migration.vuejs.org/zh/

createApp

emits

上面代码示例用的是vue3.0.2，在3.0.4之后需要把所有的 sayHello 改成 onSayHello

多事件

这个我记得vue2也是支持的

Fragment

移除 .sync

一个语法糖的更改，其他其实也是一样的，要通过 emit('update:title', 'xxx') 来触发

.sync 语法糖更改为了 v-model

<!-- Vue3中下面两者等价 -->
<!-- 触发法方法 $emit('update:title', 'I am a new title!') -->
<ChildComponent v-model:title="pageTitle" />
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event">
 
<!-- Vue2中下面两者等价 -->
<!-- 触发法方法 this.$emit('update:title', 'I am a new title!') -->
<ChildComponent :title.sync="pageTitle" />
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event">

异步组件

移除filter

Teleport

Suspense

Composition API

6、Composition API 如何实现代码逻辑复用

抽离逻辑代码到一个函数
函数命名约定为 useXxxx 格式（React Hooks也是）
在 setup 中引用 useXxxx 函数

import { defineComponent, ref, onMounted, onUnmounted } from 'vue';

// 合成函数返回应该和setup一样是一个ref组成的普通对象
function useMousePosition() {
  // 如果这里用 reactive，则最后return的时候要 toRefs，方便函数使用的地方可以解构（reactive解构会丢失响应式）
  const x = ref(0)
  const y = ref(0)

  function update(e:MouseEvent) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    console.log('onMounted')
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log('onUnmounted')
    window.removeEventListener('mousemove', update)
  })

  return {
    x,
    y
  }
}


export default defineComponent({
  name: 'MousePosition',
  props: {
  },
  setup() {
    const { x, y } = useMousePosition()

    return {
      x, 
      y
    }

  }
});

7、watch 和 watchEffect 的区别是什么

两者都可以监听 data 属性变化
watch 需要明确监听哪个属性
watchEffect 会根据其中的属性，自动监听其变化

import { defineComponent, reactive, ref, toRefs, watch, watchEffect } from 'vue';

export default defineComponent({
  name: 'Watch',
  props: {
  },
  setup() {
    const numberRef = ref(100)
    const state = reactive({
      name: 'ionluo',
      age: 20
    })

    // 1. watch 监听 ref
    watch(numberRef, (newVal, oldVal) => {
      // 注意这里newVal和oldVal就不需要 .value 了
      console.log('ref watch', newVal, oldVal)
    })

    // 2. watch 监听 reactive
    watch(
      // 第一个参数，确定要监听哪个属性
      () => state.age,
      // 第二个参数，回调函数
      (newVal, oldVal) => {
        console.log('state watch', newVal, oldVal)
      },
      // // 第三个参数，配置项（可选，和vue2一样）
      // {
      //   immediate: true, // 初始之前就监听
      //   deep: true // 深度监听
      // }
    )

    // 3. watchEffect 监听
    watchEffect(() => {
      // 初始化时一定会执行一次（收集需要监听的数据）
      console.log('numberRef watchEffect', numberRef.value)
      console.log('state.name watchEffect', state.name)
    })

    setTimeout(() => {
      numberRef.value = 200
      state.age = 25
    }, 1500)

    return {
      numberRef,
      ...toRefs(state)
    }

  }
});

8、setup 种如何获取组件实例

在 setup 和其他 Composition API 中没有this
可通过 getCurrentInstance 获取当前实例

若使用 Options API可照常使用 this

import { defineComponent, getCurrentInstance, onMounted } from 'vue';

export default defineComponent({
  name: 'GetInstanceView',
  data() {
    return {
      x: 1
    }
  },
  setup() {
    console.log('this1', this) // undefined

    const instance = getCurrentInstance() as any
    console.log('instance', instance) // Object
    
    onMounted(() => {
      console.log('this in onMounted', this) // undefined
      console.log('x', instance.data.x) // 1
    })
  },
  mounted() {
    console.log('this2', this) // Proxy(Object)
    console.log('x', this.x) // 1
  }
});

Proxy实现响应式

9、Vue3 如何实现响应式

回顾 vue2.x 的 Object.defineProperty
学习 Proxy 语法
Vue3 如何用 Proxy 实现响应式

Proxy 和 Reflect 是一对最佳拍档

Proxy 的 set 与 Object.defineProperty 的 set 区别是Proxy的set可以监听到属性的添加

const data = {
    name: 'zhangsan',
    age: 20
}
// const data = ['a', 'b', 'c']

const proxyData = new Proxy(data, {
    get(target, key, receiver) {
        // 只处理本身（非原型的）属性
        const ownKeys = Reflect.ownKeys(target)
        if (ownKeys.includes(key)) {
        	// doing something
        }
        const result = Reflect.get(target, key, receiver)
        console.log('get', key)
        return result  // 返回结果
    },
    set(target, key, val, receiver) {
        // 重复的数据不处理
        if (val === target[key]) return true
        
        const result = Reflect.set(target, key, val, receiver)
        console.log('set', key, val)
        return result // 是否设置成功
    },
    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        return result // 是否删除成功
    }
})
// get
console.log(proxyData.age)
// set
proxyData.age = 30
// deleteProperty
delete proxyData.age

// get push
// get length
// set 3 d
// set length 4 // 如果set不判断重复数据的话这里会打印
// proxyData.push('d')

Reflect 作用

和Proxy能力一一对应
规范化、标准化、函数式
替换掉 Object 上的工具函数（Object作为一个构造函数不应该集成太多的方法）

const obj = { a:10, b: 20 }

console.log(Object.getOwnPropertyNames(obj))
console.log(Reflect.ownKeys(obj))

console.log('a' in obj)
console.log(Reflect.has(obj, 'a'))

delete obj.a
Reflect.deleteProperty(obj, 'b')

proxy实现响应式

深度监听，性能更好
可监听新增/删除属性
可监听数组变化

// 测试数据
const data = {
  name: 'zhangsan',
  age: 20
}

const proxyData = reactive(data)

// get
console.log(proxyData.age)
// set
proxyData.age = 30
// deleteProperty
delete proxyData.age

// 创建响应式
function reactive(target = {}) {
  if (typeof target !== 'object' || target === null) {
      // 不是对象或数组，则返回
      return target
  }

  // 代理配置
  const proxyConf = {
      get(target, key, receiver) {
          // 只处理本身（非原型的）属性
          const ownKeys = Reflect.ownKeys(target)
          if (ownKeys.includes(key)) {
            // doing something
          }
          
          const result = Reflect.get(target, key, receiver)
          console.log('get', key)
          return reactive(result)  // 返回结果（深度监听，由于只在get的时候才会触发监听，因此不会和Object.defineProperty一样存在性能问题）
      },
      set(target, key, val, receiver) {
          // 重复的数据，不处理
          if (val === target[key]) {
              return true
          }

          const result = Reflect.set(target, key, val, receiver)
          console.log('set', key, val)
          return result // 是否设置成功
      },
      deleteProperty(target, key) {
          const result = Reflect.deleteProperty(target, key)
          console.log('delete property', key)
          return result // 是否删除成功
      }
  }

  // 生成代理对象
  const observed = new Proxy(target, proxyConf)
  return observed
}

编译优化

10、Vue3 为何比 Vue2 快

Proxy响应式
PatchFlag
- 编译模板时，动态节点做标记
- 标记，分为不同的类型，如 TEXT PROPS
- diff算法时，可以区分静态节点，以及不同类型的动态节点
  
  https://template-explorer.vuejs.org/
hoistStatic
- 将静态节点的定义，提升到父作用域，缓存起来
- 多个相邻的静态节点，会被合并起来
- 典型的拿空间换时间的优化策略
  
  https://template-explorer.vuejs.org/![image-20240424110512776](http://blog.cdn.ionluo.cn/blog/image-20240424110512776.png)
cacheHandler
- 缓存事件
  
  https://template-explorer.vuejs.org/![image-20240424110928111](http://blog.cdn.ionluo.cn/blog/image-20240424110928111.png)
SSR优化
- 静态节点直接输出，绕过了 vdom
- 动态节点还是需要动态渲染
  
  https://template-explorer.vuejs.org/![image-20240424111323916](http://blog.cdn.ionluo.cn/blog/image-20240424111323916.png)
tree-shaking
- 编译时，根据不同的情况，引入不同的 API

Vite

11、Vite 是什么

一个前端打包工具，Vue作者发起的项目
借助Vue的影响力，发展较快，和webpack竞争
优势：开发环境下无需打包，启动快

Vite为何启动快

开发环境使用 ES6 Module，无需打包 – 非常快
生产环境使用 rollup，并不是快很多

<!-- 普通使用 -->
<script type="module">
    import add from './src/add.js' // 该模块里面可继续嵌套 import

    const res = add(10, 20)
    console.log('add res', res)
</script>

<!-- 外链形式 -->
<script type="module" src="./src/index.js"></script>

<!-- 远程引用（ES6模块的 js 可以写成 mjs 后缀） -->
<script type="module">
	import { createStore } from 'https://unpkg.com/redux@latest/es/redux.mjs'
    console.log('createStore', createStore)
</script>

<!-- 动态引入 -->
<script type="module">
    document.getElementById('btn1').addEventListener('click', async () => {
        // add.js 是通过 export default 导出
        const add = await import('./src/add.js')
        const res = add.default(1, 2) 
        console.log('add res', res)
    })
    document.getElementById('btn2').addEventListener('click', async () => {
        // math.js 是通过 export 导出
        const { add, multi } = await import('./src/math.js')
        const res = add(10, 20)
        console.log('add res', add(10, 20))
        console.log('multi res', multi(10, 20))
    })
</script>

12、Composition API 和 React Hooks 的对比

前者 setup 只会被调用一次，而后者函数会被多次调用
前者无需 useMemo useCallback，因为 setup 只调用一次
前者无需顾虑调用顺序，而后者需要保证 hooks 的顺序一致
前者 reactive + ref 比后者 useState 要难理解

第一条是本质，第二三条是表象

React使用

React文档：https://react.dev/learn

React版本：16.4

代码地址：https://gitee.com/cheerfulion/my_public_demos/tree/master/react_learning

开胃菜：

React组件如何通讯

JSX的本质是什么

context是什么，有何用途？

shouldComponentUpdate 用途

描述 redux 单向数据流

setState 是同步还是异步？

创建项目

create-react-app: https://create-react-app.bootcss.com/docs/getting-started

1
2
3

npx create-react-app my-app
cd my-app
npm start

JSX基本使用

JSX语法，条件，列表渲染，事件，组件和props（类型的检查），state和setState，组件生命周期

JSX语法，条件，列表渲染

import React from 'react'

const user = {
    name: 'ionluo',
    gender: 1,
    imgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
}

// 函数组件，JSXBaseDemo则是class组件
function MyButton() {
    return (
      <button>确定</button>
    );
}

class JSXBaseDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
            theme: 'black',
            list: [
                {id: 'id-1', title: '标题1'},
                {id: 'id-2', title: '标题2'},
                {id: 'id-3', title: '标题3'},
        	] 
        }
    }
    render() {
        const styleData = {color: 'blue'}
        const rawHtml = '个人简介4: <i>xxxxxxxxxxxx</i>'
        const blackText = <p style={{color: 'black'}}>Black Text</p>
        const blueText = <p style={{color: 'blue'}}>Blue Text</p>

		// if (this.state.theme === 'black') {
        //     return blackText
        // } else {
        //     return blueText
        // }

        return <div>
            <h3>JSX基础用法</h3>
            {/* 获取变量 */}
            <p>姓名：{user.name}</p>
            {/* 表达式 */}
            <p>性别：{user.gender ? '男' : '女'}</p>
            {/* 属性设置 */}
            <p>头像：<img src={user.imgUrl} alt=""  width='100px'/></p>
            {/* class属性设置 */}
            <p className='description'>个人简介1: xxxxxxxxxxxx</p>
            {/* style属性设置（对象写法） */}
            <p style={styleData}>个人简介2: xxxxxxxxxxxx</p>
            {/* style属性设置（行内写法） */}
            <p style={{ color: "red" }}>个人简介3: xxxxxxxxxxxx</p>
            {/* 原生HTML（注意，必须先构造成 {__html： ''} 的格式） */}
            <p dangerouslySetInnerHTML={{__html: rawHtml}}></p>
            {/* 加载组件 */}
            <MyButton/>                
            
            <h3>条件</h3>
            { this.state.theme === 'black' ? blackText : '' }
            { this.state.theme === 'blue' && blueText }

		   <h3>列表</h3>
            <ul>{this.state.list.map((item, index) => {
                // 必填，不能是index或者random
                return <li key={item.id}>index: {index}; title: {item.title}</li>
            })}</ul>
        </div>

    }
}

export default JSXBaseDemo

事件

import React from 'react'

class EventDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'ionluo',
            list: [
                {id: 'id-1', title: '标题1'},
                {id: 'id-2', title: '标题2'},
                {id: 'id-3', title: '标题3'},
            ]
         }

         // 修改方法的 this 指向
         this.clickHandler1 = this.clickHandler1.bind(this)
    }
    render() {
        // this - 使用bind
        return <div>
            <h3>事件</h3>
            <p onClick={this.clickHandler1}>clickHandler1: {this.state.name}</p>
            <p onClick={this.clickHandler2}>clickHandler2: {this.state.name}</p>
            <a href='https://www.baidu.com' onClick={this.clickHandler3}>点我跳转百度</a>
            <ul>{this.state.list.map((item, index) => {
                // 必填，不能是index或者random
                return <li key={item.id} onClick={this.clickHandler4.bind(this, item.id, item.title)}>
                    index: {index}; title: {item.title}
                </li>
            })}</ul>
        </div>
    }
    // class方法，this默认是undefined，因此需要实例化时为其绑定this
    clickHandler1() {
        this.setState({name: '张三'})
    }
    // 静态方法，this指向当前实例
    clickHandler2 = () => {
        this.setState({name: '李四'})
    }
    clickHandler3 = (event) => {
        console.log('event', event) // 注意，event 其实是 React 封装的。可以看 __proto__.constructor 是 SyntheticEvent （组合事件）
        console.log('nativeEvent', event.nativeEvent) // 原生event，其 __proto__.constructor 是 MouseEvent
        // 注意，所有的DOM事件都被挂载到document上，event.nativeEvent.currentTartget === 'document'
        event.preventDefault()
        event.stopPropagation()
        alert('我阻止跳转了！')
    }
    // 利用bind传递参数，clickHandler1其实也可以在点击的时候bind 
    clickHandler4(id, title, event) {
        console.log(id, title, event) // 最后追加一个参数即是 event
        alert(title)
    }
}

export default EventDemo

表单

import React from 'react'

class FormDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
            name: 'ionluo',
            info: 'xxxxxxxxxxxxxxxxxxxx',
            city: 'guangzhou',
            flag: true,
            gender: 'male'
         }
    }
    render() {
        // 受控组件
        return <div>
            <h3>表单</h3>
            <form>
                <p>
                    <label htmlFor="inputName">姓&emsp;&emsp;名</label> {/* htmlFor 代替 for */}
                    <input id='inputName' value={this.state.name} onChange={this.onInputChange} />
                    （{this.state.name}） 
                </p>
                <p>
                    <label htmlFor="inputInfo">个人信息</label> {/* htmlFor 代替 for */}
                    <textarea id='inputInfo' value={this.state.info} onChange={this.onTextareaChange} />
                    （{this.state.info}） 
                </p>
                <p>
                    <label htmlFor="inputCity">城&emsp;&emsp;市</label> {/* htmlFor 代替 for */}
                    <select id='inputCity' value={this.state.city} onChange={this.onSelectChange}>
                        <option value="beijing">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="guangzhou">广州</option>
                    </select>
                    （{this.state.city}） 
                </p>
                <p>
                    <label htmlFor="inputFlag">已关注&emsp;</label> {/* htmlFor 代替 for */}
                    <input id='inputFlag' type="checkbox" checked={this.state.flag} onChange={this.onCheckboxChange}/>
                    （{this.state.flag.toString()}）  {/* 注意不转成string无法打印 */}
                </p>
                <p>
                    <label>性&emsp;&emsp;别</label>
                    <input type="radio" namne="gender" value="male" checked={this.state.gender === 'male'} onChange={this.onRadioChange}/> male
                    <input type="radio" namne="gender" value="female" checked={this.state.gender === 'female'} onChange={this.onRadioChange}/> female
                    （{this.state.gender}） 
                </p>
            </form>
        </div>
    }
    onInputChange = (e) => {
        this.setState({
            name: e.target.value
        })
    }
    onTextareaChange = (e) => {
        this.setState({
            info: e.target.value
        })
    }
    onSelectChange = (e) => {
        this.setState({
            city: e.target.value
        })
    }
    onCheckboxChange = () => {
        this.setState({
            flag: !this.state.flag
        })
    }
    onRadioChange = (e) => {
        this.setState({
            gender: e.target.value
        })
    }
}

export default FormDemo

父子组件通信

import React from 'react'
import PropTypes from 'prop-types'

class Input extends React.Component {
    constructor(props) {
        super(props)
        this.state = { title: '' }
    }
    render() {
        return <div>
            <input type="text" value={this.state.title} onChange={this.onTitleChange}/>
            <button onClick={this.onSubmit}>提交</button>
        </div>
    }
    onTitleChange = e => {
        this.setState({title: e.target.value})
    }
    onSubmit = e => {
        const { submitTitle } = this.props
        submitTitle(this.state.title)
        this.setState({title: ''})
    }
}

// props 类型检查
Input.propTypes = {
    submitTitle: PropTypes.func.isRequired
}

class List extends React.Component {
    // constructor(props) {
    //     super(props)
    // }
    render() {
        const {list} = this.props

        return <ul>{list.map((item, index) => {
            // 必填，不能是index或者random
            return <li key={item.id}>index: {index}; title: {item.title}</li>
        })}</ul>
    }
}

// props 类型检查（必须有的对象数组）
List.propTypes = {
    list: PropTypes.arrayOf(PropTypes.object).isRequired
}

class TodoListDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = { list: [
            {id: 'id-1', title: '标题1'},
            {id: 'id-2', title: '标题2'},
            {id: 'id-3', title: '标题3'},
        ] }
    }
    render() {
        return <div>
            <h3>组件</h3>
            <div>
                <Input submitTitle={this.onSubmitTitle}/>
                <List list={this.state.list}/>
            </div>
        </div>
    }
    onSubmitTitle = title => {
        this.setState({
            list: this.state.list.concat({
                id: `id-${Date.now()}`,
                title
            })
        })
    }
}

export default TodoListDemo

setState

不可变值，可能异步更新，可能会被合并

在 React 的 18.2.0 版本，没有发现同步 setState

import React from 'react'

class StateDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = { count: 0 } // 构造函数定义state
    }
    render() {
        return <div>
            <h3>setState</h3>
            <p>{this.state.count}</p>
            <button onClick={this.increase}>累加</button>
        </div>
    }
    increase = () => {
        // 不要直接修改 state，其是不可变值
        // this.state.count++ // 错误写法
        this.setState({
            count: this.state.count + 1
        })

        // // 不可变值 - 数组
        // // 不能直接对 this.state.list 进行 push pop splice 等
        // const list5Copy = this.state.list5.slice()
        // list5Copy.splice(2, 0, 'a') // 中间插入 a
        // this.setState({
        //     list1: this.state.list1.concat(100), // 追加
        //     list2: [...this.state.list1, 100], // 追加
        //     list3: this.state.list3.slice(0, 3), // 截取
        //     list4: this.state.list4.filter(item => item > 100), // 筛选
        //     list5: list5Copy, // 其他操作
        // })

        // // 不可变值 - 对象
        // // 不能直接对 this.state.obj 进行属性设置
        // this.setState({
        //     obj1: Object.assign({}, this.state.obj1, {a: 100}), // 追加
        //     obj2: {...this.state.obj2, a: 100} // 追加
        // })

        // // setState 可能异步更新，也可能同步更新
        // this.setState({
        //     count: this.state.count + 1
        // }, () => {
        //     console.log('count by callbak', this.state.count) // 回调，类似vue的 $nextTick
        // })
        // console.log('count', this.state.count) // 异步的，拿不到最新值

        // // setTimeout 中 setState 是同步的（测试最新版本还是异步）
        // setTimeout(() => {
        //     this.setState({
        //         count: this.state.count + 1
        //     })
        //     console.log('count in setTimeout', this.state.count)
        // }, 0)

        // // 多次执行会被合并，执行结果只一次 +1
        // this.setState({
        //     count: this.state.count + 1
        // })
        // this.setState({
        //     count: this.state.count + 1
        // })
        // this.setState({
        //     count: this.state.count + 1
        // })

        // // 传入函数，不会被合并，执行结果是 +3
        // this.setState((prevState, props) => ({ count: prevState.count + 1 }))
        // this.setState((prevState, props) => ({ count: prevState.count + 1 }))
        // this.setState((prevState, props) => ({ count: prevState.count + 1 }))
    }
    // bodyClickHandler = () => {
    //     this.setState({
    //         count: this.state.count + 1
    //     })
    //     console.log('count in body event', this.state.count)
    // }
    // componentDidMount() {
    //     // 自定义的 DOM事件，setState 是同步的（测试最新版本还是异步）
    //     document.body.addEventListener('click', this.bodyClickHandler)
    // }
    // componentWillUnmount() {
    //     document.body.removeEventListener('click', this.bodyClickHandler)
    // }
}

export default StateDemo

组件生命周期

可以再了解下：shouldComponentUpdate(Render阶段，在Render之前)、getSnapshotBeforeUpdate(Pre-commit阶段，可以读取DOM，在Commit阶段前，Render阶段后)

高级使用

函数组件，受控和非受控组件，refs，Protals，context，异步组件（懒加载），性能优化，shouldComponentUpdate，纯组件，不可变值immutablejs，高阶组件，render prop

函数组件

适合仅返回JSX的情况

纯函数，输入props，输出JSX
没有实例，没有生命周期，没有state
不能拓展其他方法

非受控组件

相对state控制的受控组件，通过ref控制的就是非受控（个人理解）

使用场景：操作DOM元素

import React from 'react'

class UncontrolledDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'ionluo',
            flag: true
        }
        this.nameInputRef = React.createRef()
        this.flagInputRef = React.createRef()
        this.fileInputRef = React.createRef()
    }
    render() {
        return <div>
            <h3>非受控组件</h3>
            {/* input defaultValue */}
            <div>
                {/* 使用defaultValue而不是value，使用ref获取结果 */}
                <input type="text" defaultValue={this.state.name} ref={this.nameInputRef} /> <br />
                {/* state并不会随着改变 */}
                <span>state.name: {this.state.name}</span> <br />
                <button onClick={this.alertName}>alert name</button><br /><br />
            </div>
            {/* checkbox defaultChecked */}
            <div>
                {/* 使用defaultChecked而不是checked，使用ref获取结果 */}
                <input type="checkbox" defaultChecked={this.state.flag} ref={this.flagInputRef} /><br />
                {/* state并不会随着改变 */}
                <span>state.flag: {this.state.flag}</span><br />
                <button onClick={this.alertFlag}>alert flag</button><br /><br />
            </div>
            <div>
                {/* 使用ref获取结果 */}
                <input type="file" ref={this.fileInputRef} /><br />
                <button onClick={this.alertFile}>alert file name</button>
            </div>
        </div>
    }
    alertName = () => {
        const elem = this.nameInputRef.current
        alert(elem.value)
    }
    alertFlag = () => {
        const elem = this.flagInputRef.current
        alert(elem.checked)
    }
    alertFile = () => {
        const elem = this.fileInputRef.current
        alert(elem.files[0].name)
    }
}

export default UncontrolledDemo

Protals

组件默认会按照既定层次嵌套渲染，那么如何让组件渲染到父组件之外呢？那么就可以使用Protals让子组件逃离父组展示了。比如BFC，父组件z-index过小，fixed的场景。

import React from 'react'
import ReactDOM from 'react-dom'
import './modal.css'

class ProtalsDemo extends React.Component {
    // constructor(props) {
    //     super(props)
    // }
    render() {
        // return <div>
        //     <h3>Protals</h3>
        //     {/* 正常渲染 */}
        //     <div className='modal'>
        //         {this.props.children} {/* vue slot */}
        //     </div>
        // </div>
        return  ReactDOM.createPortal(
            <div className='modal'>{this.props.children}</div>,
            document.body
        )
    }
}

export default ProtalsDemo

context

公共信息（如语言，主题）如何传递给每个组件？用props太繁琐，用redux似乎又有点小题大做。

异步组件（懒加载）

import、React.lazy、React.Suspense

import React from 'react'
// const ContextDemo = React.lazy(() => import('./PropsDemo'))

// 模拟动态加载组件
const LazyComponet = _ => "I am a lazy man"
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
const ContextDemo = React.lazy(() => delay(5000).then(x => ({"default": LazyComponet})))

class LazyDemo extends React.Component {
    // constructor(props) {
    //     super(props)
    // }
    render() {
        return <div>
            <h3>异步组件</h3>
            <React.Suspense fallback={<div>Loading...</div>}>
                <ContextDemo/>
            </React.Suspense>
        </div>

        // 1. 强制刷新，可看到 loading (看不到就限制下 chrome 网速)
        // 2. 看 network 的 js 加载
    }
}

export default LazyDemo

性能优化

shouldComponentUpdate（简称SCU）

默认返回true，必须配合不可变值使用（数组、对象），需要性能优化才有必要使用。

// 由于默认React父组件有更新都会触发子组件更新（componentDidUpdate）,因此可以通过shouldComponentUpdate判断下是否更新子组件
shouldComponentUpdate(nextProps, nextState) {
    //  if (nextState.count !== this.state.count) {
        if (nextProps.count !== this.props.count || nextProps.length !== this.props.length) {
        return true // 重新渲染
    }
    return false // 不重新渲染
}

PureComponent 和 React.memo
不可变值 immutable.js

周边工具

redux

store，reducer，action，dispatch，单向数据流模型，中间件redux-thunkredux-saga

react-redux

provider，connect，mapStateToProps，mapDispatchToProps

react-router

React原理

函数式编程，vdom和diff算法，JSX本质，合成事件，setState和batchUpdate，组件渲染过程，前端路由

React面试真题演练

React Hooks

Webpack和babel

项目设计

项目流程

其他Vue课程

其他React课程

其他Vue面试题

其他React面试题

必须要会的 50 个 React 面试题

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/6d298630.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

导学

课程链接

前端面试常见流程

思维导图和课程资料

注意事项

Vue使用

说明

基本使用

作用域插槽

具名插槽

周边组件库

UI组件库

Element

Mint UI

iView

Vux

其他

推荐阅读

Vue原理

关于MVC、MVP和MVVM的理解

响应式原理

虚拟DOM和diff算法（难点）

模板编译

组件渲染和更新过程

前端路由原理

hash路由

history路由

Vue面试真题演练

Vue3学习

个人学习笔记

课程内容

Composition API

Proxy实现响应式

编译优化

Vite

React使用

创建项目

JSX基本使用

高级使用

周边工具

React原理

React面试真题演练

React Hooks

Webpack和babel

项目设计

项目流程

其他Vue课程

其他React课程

其他Vue面试题

其他React面试题