一个前端小白的学习路线希望可以帮到你VUE篇

还在边学习边准备面试题，本文内含各种面试真题

Vue快速上手

基本概念：vue是用于构建用户界面的渐进式框架

构建用户界面是字面上的意思、渐进式指的是对于vue不管你学了多少内容都可以使用，只使用组件，或者学完了vuerouter去使用路由，要么学完了vuex使用仓库管理工具

面试题：什么是渐进式

vue是一款渐进式的javascript框架，

一方面是技术上的渐进如上文，另一方面是业务上的渐进，组件化开发使得需要什么组件加载什么组件，不需要的不加载提升效率

总之vue极大提高了开发效率70%左右

插值表达式：将数据渲染到页面上

{{ 表达式 }}

插值表达式可以用表达式，js引擎会将其算出一个结果

比如money+10000

插值表达式使用数据必须在data中

插值表达式不可以写语句比如if for

不可以在标签属性中使用插值

vue核心特点：响应式，

响应式指的是数据变换视图自动更新，不需要像js一样去刷新

vue指令

vue指令很多重点掌握：v-html\v-if\v-show\v-else\v-on\v-bind\v-for\v-model

v-html：设置元素的InnerHTML  解析元素html标签 语法：v-html="表达式“

<div v-html="str"></div>

v-show v-if（面试题常考区别）

v-show和v-if都可以控制元素的隐藏，v-show是通过display:none来暂时看不见但是还是存在的，而v-if是通过条件判断，是否创建或移除元素节点。

使用场景，v-show可以用在导航栏，暂时藏起来，v-if可以用在弹出广告

v-else v-else-if配合v-if使用

和其它语言里的if else else if一样

v-on

v-on是注册事件，可以简写为@

v-on:事件名（click）=”count++（内连语句）“也可以是”method中的函数名“

v-bind动态设置html里的标签属性

v-bind：src=‘url’可以简写为：src=”url“

遍历数据实现列表渲染

v-for="（item，index） in 数组"：key =”item.id"

item每一项，index下标 key用于给元素添加每一项

key的值必须具有唯一性，不推荐用index作为key会变化，删除之后下标会变

面试题： v-for为什么要加key，如果不加key会怎样

如果没有key，在vue中有原地复用的性质，即复用已经存在的元素，会导致渲染错误或者又不符合预期的结果，加key提高渲染性能，还有就是当顺序发生改变时，没有key vue没办法没办法识别新旧结点的关系会从新渲染整个列表。

v-once之渲染元素和组件一次，当数据发生改变时，不会再变化 

面试题：

判断循环v-if、v-for优先级

在vue2中v-for优先级更高，意味着每次循环执行一遍v-if效率低，把v-if放到v-for外层

在vue3中v-if优先级更高，一起使用时v-if的条件没有办法访问到v-for作用域定义的变量名会报错，解决办法把v-for放到v-if外层

v-model给表单元素使用实现数据的双向绑定，当数据改变视图自动更新反之也是

面试题：对v-model的理解（实现原理)

v-bind绑定value属性，v-on给当前元素把绑定input事件

computed计算属性

基于现在的数据，计算出来的新属性，当以来的数据变化时会自动重新计算

computed vs methods

计算属性是封装了一段对数据的处理，求得一个结果  使用：this.计算属性  {{计算属性}}

方法是给实例提供一个方法，调用以处理业务逻辑 使用：this.方法名（） {{方法名（）}} @事件名=“方法名”

watch侦听器

监视数据变化，场景：输入内容实时翻译

在数据变化时调用执行watch，

如图，如果监视words属性变化直接写words（newValue）{}可以只监视变化后的内容

如果是监视obj里的属性用'obj.words'(newValue)

防抖：延迟执行，延迟一会儿，一段时间内没有输入再发请求，翻译器可以用防抖，输完之后才开始翻译。

watch的完整写法：一次性对对象的所有属性都做监视

像翻译的时候，不仅要监视输入内容，还要监视选择什么语言

如果还用简写效率不高，要一样的代码写两遍，这里给出watch的完整写法

加一个deep：true

模板如下

面试题：computed和watch的区别运用场景

computed在进行数值计算时使用，并且依赖于其他数据

watch是当数据有变化要进行异步操作或者是开销比较大的操作使用，比如说上面的翻译器

生命周期

vue生命周期：从创建到销毁的整个周期

生命周期四个阶段：创建-------------------------挂载--------------------更新-------------------------------销毁

                           响应式数据                       渲染模板           修改数据，更新视图  循环往复             

vue生命周期函数（钩子函数）：vue生命周期中会自动运行一些函数

工程化开发

使用脚手架vuecli快速创建一个开发项目的标准化基础架子

使用步骤：npm i @vue/cli -g 全局安装

                   创建项目架子：vue create project-name

                    启动：npm run serve

组件的三大组成部分：

• 结构template，一个里面只能有一个根元素
• 样式style，默认是全局的当加上scoped就只会在当前组件中生效
• 逻辑script，el是根据组件特有，data是一个函数

面试题：组件中data为什么是函数

如果data是函数的话每次用一个组件都会返回一个新的data，不同元素的data不会相互影响，

假如data是一个对象的话，当一个组件修改data值其他的数据也会跟着改变。

组件通信

父传子&&子传父

父组件通过props传给子组件，子组件通过$emit通知父组件进行修改更新

单行数据流，data的是自己的，值可以随便改，而prop则是外界组件提供的要遵循单向数据流的特点。父组件数据更新，向下流动，影响子组件。包括子传父时$emit也是通知父组件，让父组件去修改。

进阶语法

ref $ref

vue异步更新、$nextTick

比如说我有如图的一个需求，点击编辑变成输入文本框且自动聚焦文本框

如果直接写

会提示没有定义，这个输入文本框一开始没有更新出来，因为dom是异步更新的，为了解决这个问题要使用$nextTick用了这个之后会在dom更新完后立刻执行

this. $nextTick（（）=>{   }）会等dom更新完立刻去执行函数体里的内容

面试题

$nextTick事件轮询

$nextTick 是什么？

事件轮询把所有触发事件放到事件栈或者队列，根据实际情况先后执行

$nextTick 有什么作用？

vue在修改数据后不会立即更新视图，而是等同一时间循环中所有数据修改完成后统一更新，即vue的异步更新，所以修改完数据立即获得dom得到的是未修改dom。为了在修改数据后等待dom更新要用$nextTick,这样回调函数将在 DOM 更新完成后被调用

$nextTick 的原理？

$nextTick本质上是返回一个promise对象

$nextTick 的应用场景？

在钩子函数 created 里面想要获取操作 Dom，把操作 DOM 的方法放在 $nextTick 中。
mounted 和 updated 不会保证所有的子组件都被挂载或重新渲染，如果希望等到整个视图都渲染自定义指令

插槽

用slot去占位，过后替换掉

路由

是路径和组件的一种映射关系

修改路径时，切换与之匹配的页面组件

vuex

从vue2到vue3

面试题：vue2和vue3区别

pinia

MVVM数据上向绑定理解

vue父子组件生命周期钩子函数执行顺序

未完待续，累了今天先写到这儿。。。。。。