vue，react， webacpk

导学：

v-show和v-if的区别

为何v-for中要用key

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

Vue组件如何通讯

描述组件渲染和更新的过程

双向数据绑定的v-model的原理

React组件如何通讯

JSX的本质是什么

context是什么，有什么用途？

shouldComponentUpdate的用途 性能优化

描述redux单向数据流

setState是同步还是异步

框架综合应用

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

基于Vue设置一个购物车（组件结构，vuex state）

webpack

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

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

loader和plugin的区别？

webpack如何实现懒加载？

webpack常见性能优化

babel-runtime和babel-poyfill区别

如何应对上述面试题？

• 框架的基本使用（基本使用，高级特性，周边插件）

• 框架的原理（基本原理的了解，热门技术的深度，全面性）

• 框架的设计应用，即设计能力（组件结构，数据结构）

Vue  Vuex  Vue-router

• Vue 基本使用的知识点和面试题
• Vue 组件的知识点和面试题
• Vue 高级使用的知识点和面试题
• Vuex 和 Vue-router 相关面试题

Vue3不是从0做出来的是经过Vue2进化来的

Vue2还是会继续使用，面试会继续考察

Vue2的语法绝大多数是被Vue3支持的

Vue和React越来越接近

• Vue3 options API对应React class Component

• Vue3 Composition API对应React Hooks

Vue的使用

指令和插值  {{}}

tempate: <div>{{message}}</div>

script:
data () {
    return {
        message: "hello"
    }
}

指令和动态属性

template: <div :id="idDate"></div>
script:
data () {
    return {
        idDate: `id-${Date.now()}`
    }
}

v-html：会有XSS风险，会覆盖子组件

computed和watch

computed有缓存 可以提高运算的性能，data不变则不会重新计算
watch如何进行深度监听？
watch监听引用类型拿不到oldValue 
<script>
    export default {
        data() {
            return {
                info: "name",
                adress: {
                    city: "beijing"
                }
            }
        }
        watch() {
            info(oldVal, Val) {
                // 值类型 可以正常拿到
            },
            adress: {
                handler(oldVal, val) {
                    // 引用类型 拿不到oldVal  因为指针相同，此时已经指向新的Val
                }，
                deep: true // 深度监听
            }
        }
    }
</script>

class和style  使用动态属性  使用驼峰式写法

<template>
    <div
        <p :class="{red: isRed, green: isGreen}"></p>
        <p :class="[red, green]"></p>
        <p :style="styleData"></p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isRed: true,
                isGreen: true,
                
                red: "red",
                green: "green",
                styleData: {
                    fontSize: '40px',  // 转为驼峰形式
                }
            }
        }
    }
</script>

v-if v-else的用法，可使用变量，也可以使用 === 表达式  v-if和v-show的区别  v-if和v-show的使用场景？

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

        <p v-show="type==='a'">show A</p>
        <p v-show="type==='b'">show C</p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                type: "a",
                
            }
        }
    }
</script>
v-if创建dom元素 v-show利用display：none， block进行显示
当切换dom元素频繁时可以用v-show 比如 tab切换 切换不频繁可以用v-if 首页渲染

如何遍历对象？ 也可以使用v-for key的重要性。key不能乱写（如random或者index）v-for和v-if不能一起使用 因为v-for比v-if计算优先级更高一点

<template>
    <div>
        // 遍历数组
        <ul>
            <li v-for="(item, index) in listArr" :key="item.id">
                {{item.name}} - {{item.id}} - {{index}}
            </li>
        </ul>
        // 遍历对象
        <ul>
            <li v-for="(val, key, index) in listObj" :key="key">
             {{val}} - {{key}} - {{index}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            listArr: [{id: 1, name: "A"}, {id: 2, name: "B"}],
            listObj: {name: "A", age: 12, weight: "30kg"}
        }
    }
}
</script>

事件中event参数，自定义参数  1.event是原生的 事件是挂载在当前dom 

<template>
    <div>
        <p>{{num}}</p>
        <div @click="increment"></div>
        <div @click="increment2(2, $event)"></div>
    </div>
<template>
<script>
    export default {
        data() {
            return  {
                num: 0
            }
        },
        methods: {
            increment(event) {

            },            increment2(val, event) {
                
            }
        }
    }
</script>

事件修饰符，按键修饰符 

表单

v-model
常见项：textarea，checkbox，radio， select
修饰符：lazy,trim,number
lazy防抖的一个项目，输完才会变化 正在输入的时候不会变化
trim去掉前后空格
number只允许输入数字
textarea 是用v-model去绑定值的
// 注意 <textarea>{{num}}</textarea>  这种方式是不被允许的
checkbox也是用v-model绑定值 选中了哪个 v-model绑定的值就和value的值一致  checked绑定v-model里面的布尔值
<input type="checkbox" value="john" v-model="name" :checked="isChecked" />
radio也是和box一致

select v-model绑定值
<select v-model="selected"> 
    <option disabled value="">请选择</option>
    <option value="A">A</option>
    <option value="B">B</option></select>
多选 multiple   
<select v-model="selectedList" multiple> 
    <option disabled value="">请选择</option>
    <option value="A">A</option>
    <option value="B">B</option>
</select>
selectedList在data定义里为数组

``vue组件的使用

props和$emit组件间通讯  父组件向子组件传递一个数据 子组件向父组件触发一个方法

父组件：
<template>    <div>       <Input @addName="addHanlder" />       <List :list="list" @delete="deleteHandler" />    </div></template>
<script>import Input from './input.vue'import List from './list.vue'export default {   data() {        return {           list: [{id: 1, name: "哈哈"}]        }   },   components: {      Input,      List   },   methods: {      addHanlder(name) {         this.list.push({            id: `id-${Date.now()}`,            name: name         })      },      deleteHandler(id) {         this.list = this.list.filter(item => item.id != id)      }   }}</script>

子组件：
input.vue
<template>    <div>       <input type="text" v-model="name"><button @click="addItem">add</button>    </div></template><script>export default {   data() {       return {         name: ''       }   },   methods: {      addItem() {         this.$emit("addName", this.name)         this.name = ""      }   }}</script>list.vue
<template>    <div>       <ul>          <li v-for="item in list" :key="item.id">            {{item.name}}            <button @click="deleteItem(item.id)">delete</button>          </li>       </ul>    </div></template><script>export default {   props: ['list'],   // props: {   //    list: {   //       type: Array,   //       default() {   //          return []   //       }   //    }   // },   data() {       return {       }   },   methods: {      deleteItem(id) {         this.$emit('delete', id)      }   }}</script>

自定义事件组件  兄弟组件之间的传值

// 新建event.js
import Vue from 'vue' export default new Vue()// list.vue
import event from './event'
mounted() {   event.$on("onAddTitle", this.addTitleHander)},beforeDestroy() {   // 及时销毁, 否则可能造成内存泄漏   event.$off("onAddTitle", this.addTitleHander)}

// input.vueimport event from './event'methods: {   addItem() {      // 调用父组件的事件      this.$emit("addName", this.name)               // 调用自定义事件       event.$emit("onAddTitle", this.name)      this.name = ""   },  }

生命周期``

挂载阶段beforeCreate created beforeMount mounted
mounted是页面已经渲染完 created是页面实例已经初始化完成
更新阶段 beforeUpdate updated
销毁阶段 beforeDestroy destroyed

父子组件生命周期执行顺序

父组件 before create父组件 created父组件 before mount子组件 before create子组件 created子组件 before mount子组件 mounted父组件 mounted父组件 before update子组件 before update子组件 updated父组件 updated父组件 before destroy子组件 before destroy子组件 destroyed父组件 destroyed

自定义v-model

父组件 ./AdvancedUse/index.vue
<template>    <div>        <p>            {{name}}        </p>        <CustomVModel v-model="name" />    </div></template><script>import CustomVModel from './CustomVModel.vue'export default {    components: {        CustomVModel    },    data() {        return {            name: 'qingmuyuan'        }    }}</script>子组件：
<template>    <div>        <input type="text" :value="text1" @input="$emit('change1', $event.target.value)">    </div></template><script>export default {    model: {        props: 'text1',        event: 'change1'    },    props: {        text1: String,        default() {            return ''        }    },}</script>

$nextTick

vue是异步渲染，data改变后，DOM不会立即渲染  $nextTick会在DOM渲染之后被触发，以获取最新DOM节点   $nextTick在开发中的使用场景是什么？ 后台管理系统编辑表单时会用到。点击显示表单 属性showModal由false变成true。这个时候如果直接给表单对应的数据赋值，表单在显示之后是看不到的，用了$nexttick之后在赋值就能解决这个问题。

<template>    <div>        <ul ref="ul1">            <li v-for="(item, index) in list" :key="index">                {{item}}            </li>        </ul>        <button @click="addItem">添加一项</button>    </div></template><script>export default {    data() {        return {            list: ["a", "b", "c"]        }    },    methods: {        addItem() {            this.list.push(`${Date.now()}`)            this.list.push(`${Date.now()}`)            this.list.push(`${Date.now()}`)            const ulElem = this.$refs.ul1            console.log(ulElem.childNodes.length)            // 异步渲染，$nextTick待DOM渲染完再回调            // 页面渲染时 会将data修改做整合 多次data修改只会渲染一次            this.$nextTick(()=>{                 console.log(ulElem.childNodes.length)            })        }    }}</script>

slot
动态、异步组件
keep-alive
mixin