2 snippets vue 修改配置_2020前端就业Vue框架篇「实践」

最新推荐文章于 2024-06-26 16:30:30 发布

SuperSodaSea

最新推荐文章于 2024-06-26 16:30:30 发布

阅读量252

点赞数

文章标签： 2 snippets vue 修改配置

本文链接：https://blog.csdn.net/weixin_30509193/article/details/112158150

版权

作者：河畔一角

转发链接：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(插槽，可动态接收模板片段)

动态插入代码

v-once(只渲染元素或组件一次)
v-cloak

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

[v-cloak] {  display: none;}

{{ message }}

v-pre

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

Vue修饰符

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

.lazy

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

.trim(去掉首尾空白字符)

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

// 类似event.stopPropagation()前端未来

.prevent(阻止默认行为)

// 类似event.preventDefault()前端未来

.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动画

一图胜千言

前端未来

.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作用是什么？

内置组件主要做组件缓存，防止销毁。

什么是虚拟Dom

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

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

前端未来

// 通过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等.

`{{title.name}}`

// 此处可并列多个div，不再要求一个根元素了

大家可以参考我另一篇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':''        }      }    }  },