vue面试知识点

vue基本使用

1. 文本插值

• JS表达式 yes（只能是表达式，不能是 js 语句）
• 动态属性 id

2. watch

watch如何深度监听

watch监听引用类型，拿不到oldVal

3. computed

computed有缓存，data不变则不会重新计算

4. class和style

4. 条件渲染

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

​ v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏。

• 使用场景

​ 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

5. 循环（列表）渲染

• 可以用v-for遍历对象和数组

• key的重要性 （尽量和业务相关）

• v-for 和v-if 不能一起使用

6. 事件

自定义传参

事件修饰符：

image.png

7. 表单

常见表单项 textarea checkbox radio select

修饰符 lazy number trim

8. vue组件使用

1. 父子组件间通讯 props 和 $emit
2. 兄弟之间通讯： 自定义事件

​ 在外面新建一个名字叫 event.js 的文件，里面写

import Vue from 'vue'

export default new Vue()

创建一个vue的实例 就可以调用 event.on 最后卸载时执行event.$off销毁

3. 生命周期（单个组件）
   1422175-20190125154237190-1916558490.png
   
   created是vue实例已经初始化完成了，但是还没有渲染 mounted是页面已经渲染完毕

4. 生命周期（父子组件）

   
   
   image.png

9. vue高级特性

• 自定义v-model

// 父组件

{{name}}



// 子组件

• $nextTick

vue是异步渲染，data改变后dom不会立刻渲染，$nextTick会在DOM渲染后在回调，以获取最新的dom节点。页面渲染时会将data的修改做整合，多次data修改只能渲染一次

• slot 基本使用

​ 作用域插槽

// 父组件使用名字叫ScopedSlotDemo的子组件 在父组件里展示子组件的website的title


    

​ 具名插槽

​ 在slot上绑定一个name=“名字”，在父组件里在template里写v-slot：名字

• 动态、异步组件

  1. 动态组件：需要根据数据，动态渲染的场景。即组件类型不确定
  2. 异步组件：用法

  
  
  当点击按钮时，显示demo组件时，加载demo组件
  
  components: {
    demo: () => import('组件路径')
  }
  

• keep-alive （缓存组件）： 需要频繁切换且不需要重复渲染的时候

  将需要缓存的组件用标签包裹起来

• mixin 可以将多个组件的相同的逻辑抽离出来

  将共同的逻辑抽离出来放在一个JS文件里，在需要的页面通过import引用，在和data同级的位置写

  mixins: [引用的js文件的名字]   可以添加多个，会自动合并起来
  
  这样就可以在当前页面用引入来的js文件里的data、方法
  

  缺点：

  1. 变量来源不明确，不利用阅读

     2. 多 mixin 可能会造成命名冲突
     3. mixin 和组件可能出现多对多的关系，复杂度较高

10. vuex

• state
• getters
• mutation
• action

api

• dispatch
• commit
• mapState
• mapGetters
• mapActions
• mapMutations

11. vue-router

• 路由模式（hash、history）
• 路由配置（动态路由、懒加载）

vue原理

1. 如何理解MVVM模型

数据驱动视图，不用我们操作DOM，只需要关注数据，数据变了，视图就会变

MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

mvvm.png

2. vue响应式

核心API - Object.defineProperty

image.png

深度监听对象的时候需要用到 for in 定义一个方法 ，遍历对象，通过判断遍历出来的属性是一个值还是对象，如果是对象的话，就需要再次调用这个方法，再次遍历，直到遍历到底。

Object.defineProperty 的缺点

• 深度监听，需要递归到底，一次性计算量大
• 无法监听新增属性/删除属性（vue.set vue.delete）
• 无法监听数组，需要特殊处理

3. 虚拟DOM（vdom）和 diff

vodm：用js模拟DOM结构，计算出最小的变更，操作DOM
用js模拟DOM结构

image.png

vdom核心概念： h vnode patch diff key 等

• patch：path(elem, vnode) 和 patch(vnode, newvnode)

vdom存在的价值：数据驱动试图，控制DOM操作

你知道Vue中key的作用和工作原理吗？说说你对它的理解。

1. key的主要作用是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。
2. 另外，若不设置key还可能在列表更新时引发一些隐藏的bug
3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

4. 模板编译

• 会将template编译成一个 render函数，里面是with语法的函数体（类似于h函数），最后返回vnode。
• 基于vnode在执行patch和diff。
• 使用webpack-vue-loader，会在开发环境编译模板

const template = `
    

        
    
`
    
    
with(this){return _c('div', // 标签
     {staticClass:"container",attrs:{"id":"div1"}}, // 属性
     [
         _c('img',{attrs:{"src":imgUrl}})])}  // 子元素

5. 组件渲染/更新过程

• 初次渲染过程
  1. 解析模板为render函数（或在开发环境已完成， vue-loader）
  2. 触发响应式，监听data属性getter，setter
  3. 执行render函数，生成vnode，path(elem, vnode)
• 更新过程
  1. 修改data，触发setter（此前在getter中已被监听）
  2. 重新执行render函数，生成newVnode

  3. patch(vnode, newvnode)

     
     
     image.png

6. 异步渲染

• $nextTick
• 汇总data的修改，一次性更新视图
• 减少DOM操作次数，提高性能