推广

首页 > 行业资讯 > 推广 > 正文内容

推广

vue面试知识点

iseeyu2年前 (2024-02-21)推广121

image.png

7. 表单

常见表单项 textarea checkbox radio select

修饰符 lazy number trim

8. vue组件使用

父子组件间通讯 props 和 $emit
兄弟之间通讯：自定义事件

在外面新建一个名字叫 event.js 的文件，里面写

import Vue from 'vue'

export default new Vue()

创建一个vue的实例就可以调用 event. on 最后卸载时执行event.$off销毁

生命周期（单个组件）

1422175-20190125154237190-1916558490.png

created是vue实例已经初始化完成了，但是还没有渲染 mounted是页面已经渲染完毕
生命周期（父子组件）

image.png

9. vue高级特性

自定义v-model

// 父组件

<p>{{name}}</p>
<CustomVModel v-model="name"/>


// 子组件
<template>
    <!-- 例如：vue 颜色选择 -->
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
    <!--
        1. 上面的 input 使用了 :value 而不是 v-model
        2. 上面的 change1 和 model.event1 要对应起来
        3. text1 属性对应起来
    -->
</template>

<script>
export default {
    model: {
        prop: 'text1', // 对应 props text1
        event: 'change1'
    },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}
</script>

$nextTick

vue是异步渲染，data改变后dom不会立刻渲染，$nextTick会在DOM渲染后在回调，以获取最新的dom节点。页面渲染时会将data的修改做整合，多次data修改只能渲染一次

slot 基本使用

作用域插槽

// 父组件使用名字叫ScopedSlotDemo的子组件 在父组件里展示子组件的website的title

<ScopedSlotDemo :url="website.url">
    <template v-slot="slotProps">
        {{slotProps.slotData.title}}
    </template>
</ScopedSlotDemo>

<template>
    <a :href="url">
        <slot :slotData="website">
            {{website.subTitle}} <!-- 默认值显示 subTitle ，即父组件不传内容时 -->
        </slot>
    </a>
</template>

具名插槽

在slot上绑定一个name=“名字”，在父组件里在template里写v-slot：名字

动态、异步组件

动态组件：需要根据数据，动态渲染的场景。即组件类型不确定

<component :is= "子组件的名字" />

异步组件：用法

<demo v-if="showDemo"/>
<button @click=" showDemo = true "></button>
当点击按钮时，显示demo组件时，加载demo组件

components: {
  demo: () => import('组件路径')
}

keep-alive （缓存组件）：需要频繁切换且不需要重复渲染的时候

将需要缓存的组件用<keep-alive>标签包裹起来
mixin 可以将多个组件的相同的逻辑抽离出来

将共同的逻辑抽离出来放在一个JS文件里，在需要的页面通过import引用，在和data同级的位置写
```
mixins: [引用的js文件的名字]   可以添加多个，会自动合并起来

这样就可以在当前页面用引入来的js文件里的data、方法
```
缺点：
1. 变量来源不明确，不利用阅读
  1. 多 mixin 可能会造成命名冲突
  2. mixin 和组件可能出现多对多的关系，复杂度较高

10. vuex

state
getters
mutation
action

api

dispatch
commit
mapState
mapGetters
mapActions
mapMutations

11. vue-router

路由模式（hash、history）
路由配置（动态路由、懒加载）

vue原理

1. 如何理解MVVM模型

数据驱动视图，不用我们操作DOM，只需要关注数据，数据变了，视图就会变

MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

mvvm.png

2. vue响应式

核心API – Object.defineProperty

image.png

深度监听对象的时候需要用到 for in 定义一个方法，遍历对象，通过判断遍历出来的属性是一个值还是对象，如果是对象的话，就需要再次调用这个方法，再次遍历，直到遍历到底。

Object.defineProperty 的缺点

深度监听，需要递归到底，一次性计算量大
无法监听新增属性/删除属性（vue.set vue.delete）
无法监听数组，需要特殊处理

3. 虚拟DOM（vdom）和 diff

vodm：用js模拟DOM结构，计算出最小的变更，操作DOM
用js模拟DOM结构

image.png

vdom核心概念： h vnode patch diff key 等

patch：path(elem, vnode) 和 patch(vnode, newvnode)

vdom存在的价值：数据驱动试图，控制DOM操作

你知道Vue中key的作用和工作原理吗？说说你对它的理解。

key的主要作用是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。
另外，若不设置key还可能在列表更新时引发一些隐藏的bug
vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

4. 模板编译

会将template编译成一个 render函数，里面是with语法的函数体（类似于h函数），最后返回vnode。
基于vnode在执行patch和diff。
使用webpack-vue-loader，会在开发环境编译模板

const template = `
    <div id="div1" class="container">
        <img :src="imgUrl"/>
    </div>`
    
    
with(this){return _c('div', // 标签
     {staticClass:"container",attrs:{"id":"div1"}}, // 属性
     [
         _c('img',{attrs:{"src":imgUrl}})])}  // 子元素

5. 组件渲染/更新过程

初次渲染过程
1. 解析模板为render函数（或在开发环境已完成， vue-loader）
2. 触发响应式，监听data属性getter，setter
3. 执行render函数，生成vnode，path(elem, vnode)
更新过程
1. 修改data，触发setter（此前在getter中已被监听）
2. 重新执行render函数，生成newVnode
3. patch(vnode, newvnode)
  
  image.png