首页  思维导图  详情

3. Vue 使用

2020-04-16 11:14:29   8  举报





AI智能生成

为你推荐

查看更多



vue使用

vue

面试

作者其他创作

大纲/内容

前端框架及项目面试聚焦Vue/React/Webpack — 课程笔记

第3章 Vue 使用

3-1 vue使用-考点串讲

3-2 vue基本使用

基本使用

1.日常使用，必须掌握，面试必考（不一定全考）2.梳理知识点，从荣昌的文档中摘出考点和重点3.考察形式不限（参考后边的真题）但都在范围内

指令、插值

1.插值、表达式2.指令、动态属性3.v-html:会有XSS风险，会覆盖子组件

computed和watch

1.computed有缓存，data不变不会重新重新计算2.watch如何深度监听?3.watch监听引用类型，拿不到oldVal

computed缓存可以提性能

ComputedDemo

watch默认是浅监听的name是值类型，可正常拿到 oldVal 和 val info是引用类型，拿不到 oldVal 。因为指针相同，此时已经指向了新的 val

class和style

1.使用动态属性2.使用驼峰式写法

ClassDemo

条件渲染

1.v-if v-else的用法，可使用变量，也可以使用===表达式2.v-if和v-show的区别3.v-if和v-show的使用场景(dom节点销毁频繁时选择v-show)

3-3 vue基本知识点串讲

循环（列表）渲染

1.如何遍历对象？——也可以用v-for2.key的重要性，key不能乱写（如random或者index）3.v-for和v-if不能一起使用！

ListDemo

a b c都是和业务相关的id

事件

1.event参数，自定义参数2.事件修饰符，按键修饰符3.【观察】事件被绑定到哪里？

EventDemo

事件中传自定义参数 @click=\

console.log(event.target)事件挂在什么地方

修饰符

表单

1.v-model2.常见表单项 textarea checkbox radio select3.修饰符 lazy number trim

FormDemo

3-4 vue父子组件如何通讯

Vue组件使用

1.props和$emit2.组件间通讯-自定义事件3.组件生命周期

vue父子组件如何通讯

proms 父组件->子组件，传递一个信息$emit 子组件->父组件，触发一个事件

示例：Index是父组件，Input和List是其子组件，Input和List互为兄弟组件

子组件Input

父组件Index

3-5 如何用自定义事件进行vue组件通讯

event

event是vue的一个示例已经具备了$on $emit自定义事件的能力，所以不需要引入eventbus

父组件Index见3-4中图片

子组件Input见3-4中图

子组件List

beforeDestroy的使用场景：及时解绑自定义事件

3-6 vue父子组件生命周期调用顺序

生命周期图示

beforeDestroy中要可能要做什么？解除绑定，销毁子组件以及事件监听器。自定义事件的绑定要解除；比如setTimeout定时任务要销毁；自己绑定的window或document的事件要销毁；该销毁的不要遗留在内存中

created和mounted有什么区别？created是把vue的实例初始化，只存在于JS内存的一个变量而已，并没有开始渲染；mounted是真正在网页上绘制完成，页面已经渲染完，所以大部分都是要在mounted里进行一些操作；

生命周期（单个组件）

挂载阶段更新阶段销毁阶段

创建阶段？

生命周期（父子组件）

父子组件的生命周期调用顺序

创建、渲染顺序

创建初始化实例是从外到内的，但是渲染是从内到外的。父 beforeCreate父 created父 beforeMount子 beforeCreate子 created子 beforeMount子 mounted父 mounted

更新顺序

父 beforeUpdate子 beforeUpdate子 updated父 updated

销毁

父 beforeDestroy子 beforeDestroy子 destroyed父 destroyed

3-7 面试会考察哪些vue高级特性

Vue高级特性：

不是每个都很常用，但用到的时候必须要知道考察候选人对Vue的掌握是否全面，且有深度考察做过的项目是否有深度和复杂度（至少能用到高级特性）

自定义v-model$nextTickrefsslot动态、异步组件（很多面试者不知道）keep-alivemixin

3-8 vue如何自己实现v-model

v-model

https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

示例

父组件Index 自定义组件子组件CustomVModel

v-model=\"name\"Index.vue中name的值将会传入CustomVModel.vue中（model里名为 text1的 prop）。

同时当CustomVModel.vue触发一个 change 事件并附带一个新的值的时候，这个name的属性将会被更新。

注意你仍然需要在组件的 props 选项里声明 text1这个 prop。

3-9 vue组件更新之后如何获取最新DOM

$nextTick:

Vue是异步渲染（原理部分会详细讲解，React也是异步渲染）data改变之后，DOM不会立刻渲染$nextTick会在DOM渲染之后被触发，以获取最新DOM节点

在this.$nextTick(() => { //在传入的函数中进行操作})vm.$nextTick( [callback] )将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

3-10 slot是什么

slot

基本使用作用域插槽具名插槽

slot的作用：让父组件可以往子组件中插入一段内容（不一定是字符串，可以是其它的组件，只要是符合Vue标准的组件或者标签都可以）

插槽内容

slot标签内用来接收在父组件中插入的{{website.title}}，当组件渲染的时候，<slot></slot> 将会被替换为'imooc'

插槽的作用就是在使用组件时，可以把一些子内容插到组件内的slot标签中，代替slot;如果不插入内容，就会使用slot中的默认内容。

作用域插槽

作用域插槽的作用：让父组件可以访问到子组件的数据（不是很常考，但是要知道）在子组件内部的slot标签上绑定动态数据:slotData=\"website\"在父组件中的ScopedSlotDemo组件中插入template，v-slot=\"slotProps\"，通过slotProps.slotData获取到子组件中的website数据

具名插槽

多个插槽时，给slot加上name，可以通过name和v-slot对应，没有命名的相互对应v-slot:header可以简写为#header

3-11 vue动态组件是什么

动态组件

1. :is='component-name'用法2. 需要根据数据，动态渲染的场景。即组件类型不确定。

使用场景

比如规范落地页（新闻落地页），图文视频组件的不同排列组合。

3-12 vue如何异步加载组件

异步组件（很常用）

1.import函数2.按需加载，异步加载大组件

import CustomVModel from './CustomVModel'这种引入方式为同步加载，打包时也是打一个包出来异步组件引入方式：直接在components中注册FormDemo: () => import('../BaseUse/FormDemo')

异步组件只有在用到的时候才会加载点击按钮，showFormDemo变为true，FormDemo才会加载

3-13 vue如何缓存组件

keep-alive

1.缓存组件2.频繁切换，不需要重复渲染3.Vue常见性能优化

常见的tab切换使用keep-alive

如果去掉<keep-alive>切换tab时，会先销毁当前的组件，再挂在新的组件

keep-alive和v-show的区别：

v-show是通过css样式display控制隐藏显示DOMkeep-alive是vue框架层级进行的js对象的渲染（一个组件就是一个js对象）

--原本组件会有Mounted和beforeDestory去渲染销毁。要是我们只要渲染，而不去销毁，比如带有层级的复杂组件，我们用keep-alive去包裹起来进行缓存，切换组件直接从缓存读取，大大提高了性能。--对于简单的组件，我们就直接使用v-show去操作好了

3-14 vue组件如何抽离公共逻辑

mixin

1.多个组件有相同的逻辑，抽离出来2.mixin并不是完美的解决方案，会有一些问题3.Vue3提出的Component API 旨在解决这些问题

在组件中引入mixin的js文件 import myMixin from './mixin' mixins:[myMixin] //可以添加多个，会自动合并起来

mixin.js文件中的配置信息会跟引入mixin的组件的配置信息进行混合，混合完之后生成一个整体。

mixin问题

1.变量来源不明确，不利于阅读（mixin中的变量或者方法在当前组件是查不到的）2.多mixin可能会造成命名冲突（如data变量，方法名称，只要是有名称的都有可能冲突，但是像mounted函数不会冲突，这是vue特有的生命周期，里面的代码会合并）3.mixin和组件可能出现多对多的关系，复杂度较高（一个组件引多个mixin，多个组件引用一个mixin）

3-15 vue高级特性知识点小结