作者：河畔一角

转发链接：https://mp.weixin.qq.com/s/002l3H_iWWu6w1ClubCYIg

前言

上次给大家整理了前端面试的基础篇，实际上基础篇有很多内容，我只挑选了其中的一部分梳理出来给大家。这一次，我将挑选一些框架篇的内容分享给大家。

更多的Vue实践知识点请见本篇文章底部

框架篇-Vue

以下Vue框架基于vue@2.6版本进行整理，初中高级知识贯穿始终

Vue指令

v-if/v-else-if/v-else（条件判断）
v-show（元素切换显示和隐藏）
v-bind（动态绑定属性，简写:）
v-on（绑定事件，简写@on）
v-for（列表循环）
v-model（表单控件创建双向绑定）
v-text（文本显示）
v-html（插入html代码）
v-slot（插槽，可动态接收模板片段）

<!-- 插槽定义 -->
<slot name="body"></slot>
<!-- 插槽引用 -->
<template v-slot:body>
  <p>动态插入代码</p>
</template>

v-once（只渲染元素或组件一次）
v-cloak

页面加载慢时，会把{{}}显示到网页中，影响体验，可通过v-cloak结合css来控制，不过我个人觉得换v-text即可

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

v-pre

元素和子元素中语法不进行编译，和html中<pre>标签类似

Vue修饰符

Vue内置了一些修饰符，可以快速实现一些小功能，好比小工具类，比如阻止默认事件、冒泡等。

.lazy

v-model输入框改变，数据就会改变，lazy修饰符会在光标离开input框才会更新数据，有点延迟的效果

<input type="text" v-model.lazy="name">

.trim（去掉首尾空白字符）

<input type="text" v-model.trim="name">

.number（自动转换为数值类型）
.stop（阻止事件冒泡）

// 类似event.stopPropagation()
<button @click.stop="get">前端未来</button>

.prevent（阻止默认行为）

// 类似event.preventDefault()
<a @click.prevent="get">前端未来</a>

.self（只有点击元素本身才会触发）
.once（只能点击一次）

剩下的就不做介绍了，用的也不多，面试官也不会让你全背下来

Vue生命周期

生命周期描述beforeCreate组件实例被创建之前created组件实例已创建,Dom未生成beforeMount在挂载之前被调用mounted实例已挂载到Dom上beforeUpdate组件数据更新之前调用update组件数据更新之后beforeDestory组件销毁前调用destoryed组件销毁后调用

此处给大家截一张Vue源码_init方法截图，就当小彩蛋

Vue内置组件

component
transition/transition-group
view-router
keep-alive
slot

以上组件是vue内置，不需要注册

元素加key的作用？

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

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

还是给大家上个彩蛋，大家自己掂量

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

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

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

transition动画

一图胜千言

<transition name="fade">
  <p v-if="show">前端未来</p>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

$nextTick作用是什么

Vue的data修改以后，会更新视图，当添加nextTick以后，会保证视图更新成功以后，才会回调回来。(有些场景需要这么处理)

// 修改数据
this.message = '前端未来'
// DOM 还没有更新
this.$nextTick(function () {
  // DOM 现在更新了
  // to-do
})

通过for循环修改data100次，视图会更新100次吗？

Vue肯定不会做这么低效率的事情。Vue的更新是异步的，更新视图的流程：setter -> Dep -> Watcher -> patch -> 视图，每个Watcher实例都会标记一个ID，而每个Watcher会在数据变化时push进队列中，等下一次tick时执行，而通过标记的ID即可对Watcher去重，所以最后只会执行一次更新从0到100.

说实话，这块源码我还没捋清楚，大概主线就是这样的。

keep-alive作用是什么？

<keep-alive>内置组件主要做组件缓存，防止销毁。

什么是虚拟Dom

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

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

<div id="app">
  <p class="text">前端未来</p>
</div>
// 通过VNode编译出来：
{
  tag: 'div',
  props: {
    id: 'app'
  },
  chidren: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      text:'前端未来'
    }
  ]
}

上个彩蛋

为什么虚拟Dom比真实Dom快

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

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

Vue Diff过程

源码极其复杂，活着不好吗，我看不下去了

每次数据改变都会生成一个新的VDom，通过新旧VDom对比生成patch，最后深度遍历逐步更新到视图当中。Diff过程是同层对比，依次比较key、节点名称、注释节点、类型等，如果有差异，会根据是替换节点、删除节点、修改文本节点以及新增节点等做相应操作。over...

Vue双向绑定的原理

这个图画的非常完美

简单理解就是：

2.x版本通过Object.defineProperty()来实现数据劫持，通过data初始化获取来添加订阅，当模型发生变化后，触发setter，借助Dep(订阅器)来notify发布消息，进而执行Watcher的update方法来更新视图。

3.x版本主要通过Proxy实现数据代理，同样可以监听到数据变化，实现双向绑定。

下面简单描述几个源码主线，作为知识扩展

Vue整体的主线包括：

初始化及挂载
编译
响应式
Virtual DOM
更新视图

new Vue({})后会调用_init方法进行初始化，初始化生命周期、事件中心、渲染，初始化 data、props、computed、watcher 等等。

Compile阶段包含parse optimize generate

parse 会用正则等方式解析template模板中的指令、class、style等数据，形成AST
optimize的主要作用是标记static静态节点，这是Vue在编译过程中的优化.
generate是将AST转化成render function字符串的过程

响应式、VDOM、更新视图上面所有涉及，不讲了.

Vue3.0了解吗？

3.x版本目前仅发布beta版本，预计在六月份应该可以发布正式版。3.x版本兼容了2.x版本的大部分功能，但也增加了Composition API.

它主要通过Proxy实现双向绑定。通过Composition API新增了很多Hook能力，比如：reactive，ref等.

<template>
  <div id="app">
    <h1>{{title.name}}</h1>
  </div>
  <div>
    // 此处可并列多个div，不再要求一个根元素了
  </div>
</template>

<script>import { reactive } from 'vue'
export default {
  name: 'App',
  setup(){
    const title = reactive({
      name:'欢迎学习Vue3.0'
    })
    return { title }
  }
}</script>

大家可以参考我另一篇Vue3.0文章.

另外学习Vue框架，我们还需要掌握它的配置和脚手架，目前Vue项目大多可以通过@vue/cli来创建项目，基于最新4.0的脚手架我们可以初始化一套标准的项目，跟3.0不同的是，它隐藏了webpack相关的配置，暴露了一个vue.config.js配置。

vue.config配置介绍

devServer修改本地服务并添加代理

devServer:{
    host:'localhost',
    port:8080,
    proxy:{
      '/api':{
        target:'http://mi.futurefe.com',
        changeOrigin:true,
        pathRewrite:{
          '/api':''
        }
      }
    }
  },

publicPath 修改项目前缀

访问：http://mi.futurefe.com/app/#/ 带目录的访问是需要设置publicPath的

lintOnSave 可以开启关闭本地Eslint检查
productionSourceMap 开启关闭sourcemap
chainWebpack 可修改webpack配置

更多的配置介绍，大家可以直接参考官网文档：https://cli.vuejs.org/zh/config/#

以上是框架篇-Vue，大家如果觉得有很大帮助，可以关注我微信公众号：前端未来，我将继续为大家准备框架篇-React

网站首页 > 技术文章正文

2020前端就业Vue框架篇「实践」（vue前端框架有哪些）

前言

框架篇-Vue

Vue指令

Vue修饰符

Vue生命周期

Vue内置组件

元素加key的作用？

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

transition动画

$nextTick作用是什么

通过for循环修改data100次，视图会更新100次吗？

keep-alive作用是什么？

什么是虚拟Dom

为什么虚拟Dom比真实Dom快

Vue Diff过程

Vue双向绑定的原理

Vue3.0了解吗？

vue.config配置介绍

推荐Vue学习资料文章：

猜你喜欢

网站首页 > 技术文章 正文

2020前端就业Vue框架篇「实践」（vue前端框架有哪些）

前言

框架篇-Vue

Vue指令

Vue修饰符

Vue生命周期

Vue内置组件

元素加key的作用？

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

transition动画

$nextTick作用是什么

通过for循环修改data100次，视图会更新100次吗？

keep-alive作用是什么？

什么是虚拟Dom

为什么虚拟Dom比真实Dom快

Vue Diff过程

Vue双向绑定的原理

Vue3.0了解吗？

vue.config配置介绍

推荐Vue学习资料文章：

猜你喜欢

网站首页 > 技术文章正文