首页  思维导图  详情

3. Vue 使用

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





AI智能生成

vue使用

vue

基本使用

高级特性

面试

前端开发

学习笔记

作者其他创作

大纲/内容

第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-for
2.key的重要性，key不能乱写（如random或者index）
3.v-for和v-if不能一起使用！

ListDemo

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

事件

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

EventDemo

事件中传自定义参数 @click="increment2(2, $event)"

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

console.log('event', event, event.__proto__.constructor)
event打印出来是MouseEvent，MouseEvent是原生的 event 对象

修饰符

表单

1.v-model
2.常见表单项 textarea checkbox radio select
3.修饰符 lazy number trim

FormDemo

修饰符

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

Vue组件使用

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

vue父子组件如何通讯

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

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

子组件Input

// 调用父组件的事件
this.$emit('add', this.title)

父组件Index

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

event

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

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

父组件Index
见3-4中图片

子组件Input
见3-4中图

// 调用自定义事件
event.$emit('onAddTitle', this.title)

子组件List

// 绑定自定义事件
event.$on('onAddTitle', this.addTitleHandler)

// 及时销毁，否则可能造成内存泄露
event.$off('onAddTitle', this.addTitleHandler)

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
$nextTick
refs
slot
动态、异步组件（很多面试者不知道）
keep-alive
mixin

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控制隐藏显示DOM
keep-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高级特性知识点小结