Vue知识体系（自我复习）

Vue框架的使用

基本使用

常考：

• Vue组件如何通讯
• 描述组件渲染和更新的过程
• 双向数据绑定v-model的实现原理

知识点：

1. 模板（插值，指令）

2. computer和watch

   • computed 适合多个数据变化影响一个数据
   • watch 适合一个数据的变动影响多个数据或者复杂的运算

   注意：watch监听引用类型，拿不到oldVal；

   注意事项
   1.watcher 初始化是不执行的，如果想初始化就执行的话可以配置immediate属性
   2.一般情况不要直接修改computed的值，会报错，一般通过为computed属性自定义set方法，通过改变依赖变量来改变computed的值
   3.computed的属性如果不加入在dom中渲染是不会被加入到响应系统的。所以如果只是数据的变动的监控，不映射到dom上，请使用watcher或者其他方法。
   4.watcher和computed 属性定义的函数不能使用箭头函数，否则内部this会指向组件的父环境，比如window，导致调用失败。
   ————————————————
   版权声明：本文为CSDN博主「圣者为王」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
   原文链接：https://blog.csdn.net/weixin_41275295/article/details/100999927

3. class和style

4. 条件，循环，事件，表单

   v-if和v-show的区别和使用场景

   • 频繁切换用v-show[display:none]

   event参数，自定义参数，事件修饰符，按键修饰符

5. ---

   组件

6. 生命周期

7. props和$emit（类型和默认值）

8. v-on和$emit

9. 自定义事件-组件内通讯 - [$on,$off]

import Vue from 'vue'

export default new Vue();

高级特性 - 不常用，但体现深度

1. 自定义v-direction, 自定义v-model
2. $nextTick, $refs
3. slot
4. 动态、异步组件
5. keep-alive
6. mixin

常考:

• 自定义组件v-model

<input type="text" :value="text" @input="$emit('change', $event.target.value)"/>
    
 export default {
	model: {
        prop: 'text', // 对应 props text
        event: 'change'
    },
    props: {
        text: String,
        default() {
            return ''
        }
    }
}

• $nextTick

  组件更新后获得最新的dom。[DOM渲染之后被触发，以获取最新DOM节点] （Vue是异步渲染的）

• slot

  • 基本使用 - 接受组件标签内编写的内容；如果不写，使用默认的内容。

  • 作用域插槽

    <ScopedSlotDemo :url='website.url' >
        <template v-slot="slotProps">
    		{
            {slotProps.slotData}}
        template>
    ScopedSlotDemo>
    

  • 具名插槽

    
    <div class="container">
        <slot name="header">slot>
        <slot>slot>
        <slot name="footer">slot>
    div>
    
    <template v-slot:header>
    <h1>将插入header slot中h1>
    tempate>
    <template #footer>
    <p>将插入到footer flot中p>
    template>
    

• 动态组件

• 异步加载组件

javascript () => imporant('../component/AsyncComponent.vue')

• 缓存组件

常见Vue性能优化

• mixin

• 多个组件有相同的逻辑，抽离出来

• Vue 3提出的Composition API旨在解决这些问题

• 问题：

  1. 变量来源不明确，不利于阅读。
  2. 多mixin可能会造成命名冲突。
  3. mixin和组件可能出现多对多的关系，复杂度较高。

Vuex 使用

• 基本概念、基本使用和API必须要掌握

  • state、mutation、getters、action
  • dispatch、commit、mapState、mapGetters、mapActions、mapMutations

• 可能会考察state的数据结构设计（后面会讲）

Vue-router 使用

• 路由模式（hash、H5 history) ，[后者需要server端支持]

• 路由配置（动态路由、懒加载）

  1. // router.js
     {
               path: '/user/:id', component: User }
     // vue
     $router.params.id
     

  2. routers: [
     	{
              
     		path: '/',
     		component: () => import(
     			/* webpackChunkName: "navigator" */
     			'./../components/Navigator'
     		)
     	}
     ]
     

Vue面试题

1. MVVM

   1. View: 视图
   2. ViewModel: 视图模型，用户的状态和行为抽离出来
   3. model: 数据
   • 与mvc相别的优势
   • • mvc逻辑处理过多，会导致c（控制器）过于庞大，不好维护
     • 控制器的大部分功能移植到viewModel上，瘦身了model
     • 双向视图绑定，实时预览
     • 可以对View或ViewController的数据处理部分抽象出来一个函数处理model。这样它们专职页面布局和页面跳转，它们必然更一步的简化。

2. vue双向绑定的原理

   Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。借助Dep(订阅器)来notify发布消息，进而执行Watcher的update方法来更新视图。

   视图变化更新数据我们可以通过事件监听的方式来实现。

   实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。

   每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

   通习易懂了解vue双向数据绑定

3. vue如何实现MVVM

   Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。

   ViewModel是Vue的核心，它是Vue的一个实例。Vue实例是作用在某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。

   DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

4. diff

5. key

   • 元素加key的作用？

     实际上，Vue建议在v-for循环列表上以及一些元素上添加key属性，它会基于key的变化重新排列元素顺序,并且会移除 key 不存在的元素。

     == 简单理解就是在虚拟Dom对比的时候，有了key会更高效。==

   • v-for指令中，为什么不建议用index作为key？

     根据上面key的介绍，说明key可以加快diff时间。但是index是一个动态索引，一旦发生元素新增/删除后，v-for会从新遍历，index从新生成，也就意味着key全部从新排列了，在VDom比对的时候，就发生错位的情况。

     总结：如果有新增/删除就不要用index，如果是纯列表渲染可以用index

6. 虚拟DOM

   虚拟Dom，在JS中叫VDom，看过源码的应该都知道。

   VDom就是用对象属性来描述真实Html Dom节点。

   为什么虚拟Dom比真实Dom快?

   虚拟Dom是通过JS对象构建的，所有的对象变化都通过js在内存中操作，读写速度快，这个只是前提条件。

   • VDom可以最大限度减少浏览器重绘和回流操作
   • 频繁修改，一次diff，VDom可以做到局部更新

7. Vue生命周期

Vue 的父组件和子组件生命周期钩子执行顺序是什么:
1、父组建： beforeCreate -> created -> beforeMount
2、子组件： -> beforeCreate -> created -> beforeMount -> mounted
3、父组件： -> mounted
总结：从外到内，再从内到外

---

• beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

• created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

• beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。以下周期在服务端渲染期间都不被调用。

• mounted

el 被新创建的 vm替换，并挂载到实例上去之后调用该钩子。注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。

• beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

• updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

• activated

keep-alive 组件激活时调用。

• deactivated

keep-alive 组件停用时调用。

• beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

• destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

1. 什么是单页面应用

   说白就是无刷新，整个webapp就一个html文件，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html，所以叫单页面！

   通俗点来讲，在应用整个使用流程里浏览器由始至终没有刷新，所有的数据交互由ajax完成。
   但是用户体验起来和app一样，有明确的页面区分，即所谓的web app。
   后端： 只是注重数据处理
   前端： 负责逻辑交互，页面渲染。

2. 前端路由

目前前端路由的原理就是通过监听路由的变化来改变视图的变化，并且无需刷新页面。目前实现主要有两种方式。

• hash模式
• History模式

两种模式的区别：

1. hash模式，兼容性良好，无需后端配合，每次访问的域名不会改变，只是改变#后面的hash值
2. history无需带#号，但是刷新后导致路劲错误，所以需要后端配置（nginx 指定跳转当前地址）

---

hash模式

hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，hash不会重加载页面。

history模式

history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。

原理：

hash 模式的原理是 onhashchange 事件，可以在 window 对象上监听这个事件。
history ：hashchange 只能改变 # 后面的代码片段，history api （pushState、replaceState、go、back、forward） 则给了前端完全的自由，通过在window对象上监听popState()事件。

1. vue自定义指令

2. Vue.extend能做什么

3. Vue路由中route和router的区别

   $route 是“路由信息对象”，包括path,params,hash,query,fullPath,matched, name等路由信息参数。

   router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

4. Vue 双向绑定，为什么不能通过修改下标来通知视图发生变化

   push(), pop(), shift() ,unshift(), splice(), sort(), reverse()

5. 说说Vue组件的数据通信方式

   1. props和$emit（类型和默认值）
   2. v-on和$emit
   3. 自定义事件-组件内通讯 - [$on,$off]

   import Vue from 'vue'
   
   export default new Vue();
   

补充阅读

作者：monkeysoftlv-3
原文链接：史上最强vue总结~万字长文—面试开发全靠它了