JHY97的博客

目录一、组件间通信1.1 父子组件间通信1.2 兄弟组件间通信1.3 跨级组件间通信1.4怎么理解Vue的单向数据流二、computed 和 watch 相关2.1 computed 和 watch 的区别和运用的场景三、Vue2最低兼容到IE几？四、数据响应式原理4.1vue2.x的响应式4.2Vue3.0的响应式4.3Vue2与Vue3的数据响应式原理有什么区别一、组件间通信Vue组件间通信：props /$emit：这个一般用...

整理了一部分最近看的Vue面试相关知识点一、v-if 与 v-show相关1.1 v-if 与 v-show的区别v-if：是真正的条件渲染，因为它会确保在切换过程中条件块内的监听器和子组件适当地销毁和重建；且v-if 是惰性的，只要条件渲染为假时，就是什么也不做，直到条件为真时，才会渲染条件块 v-show：首先 v-show 总是会先渲染条件块的，之后只是基于css中的display属性来控制条件块的显示/隐藏因此 v-if 适用于不会频繁切换条件的场景；v-show适用于需频繁切换.

目录一、Fragment二、Teleport2.1 案例练习2.1.1未使用Teleport组件2.1.2 使用Teleport组件2.1.3 添加遮罩效果三、Suspense组件3.1 简介3.2 案例练习四、Vue3中其他较为重要的改变4.1 全局API转移4.2 其他改变一、Fragment在Vue2中：组件必须有一个根标签 在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中 好处：减少标签层级，减小.

一、shallowReactive 与 shallowRefVue3官方文档 -shallowRefVue3官方文档 -shallowReactive1.1 简介shallowReactive：只处理对象最外层属性的响应式（浅响应式） shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理 使用场景： 如果一个对象数据，结构比较深，但变化时知识外层属性变化，使用shallowReactive 如果一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对..

一、生命周期Vue2.x生命周期相关：Vue知识点整理（一）- Vue核心（6）- 生命周期（重要）Vue2官方文档 - 生命周期钩子1.1 Vue3 生命周期图示官方Vue3生命周期图示1.2Vue3.0中生命周期钩子Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：beforeDestroy 改名为 beforeUnmount destroyed 改名为 unmounted简单案例练习创建一个组件Demo.vue，并定义一个sum.

一、常用Composition API（2）1.1 computed函数与Vue2.x中的computed配置功能一致Vue2中的计算属性及其案例练习：Vue知识点整理（一）- Vue核心（3）- 计算属性Vue3官方文档 - computed1.1.1 案例练习<template> 姓：<input type="text" v-model="person.firstName" /> <br /> 名：<input type

一、常用Composition APIVue3官方文档 - 组合API1.1 SetupVue3官方文档 - Setup（1）理解：Vue3.0中的一个新的配置项，值为一个函数（2）组件中所用到的：数据、方法等等，均要配置在setup中（3）setup函数的两种返回值：若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点） 若返回一个渲染函数：则可以自定义渲染内容（了解即可）（4）注意：尽量不要与Vue2.x配置混用 Vue2.x配置（data、m

目录一、创建Vue3.0工程1.1 使用vue-cli创建1.1.1 确认版本1.1.2 创建工程1.1.3 启动工程1.2 使用vite创建1.2.1 创建工程1.2.2安装依赖1.2.3 启动工程1.2.4 启动速度对比二、分析工程结构2.1main.js2.2 app.vue一、创建Vue3.0工程1.1 使用vue-cli创建相关内容也可查看：Vue知识点整理（三）- Vue脚手架（1）- 初始化Vue脚手架Vue C..

整理了一部分自己最近看的Vue面试相关知识点目录一、MVVM相关1.1 MVVM 与 MVC 最大的区别1.2 Vue 有没有完全遵循 MVVM 思想二、为什么data需要是函数三、生命周期相关3.1 Vue2 中的生命周期有哪些3.2 异步请求在生命周期哪个钩子发起3.3一旦进入到页面或者组件，会执行哪些生命周期，顺序3.4在挂载流程中哪个阶段有 $el，在哪个阶段有$data3.5如果加入keep-alive会多哪些生命周期3.6如果加入了ke...

一、移动端常用 UI 组件库1. Vant2. Cube UI3. Mint UI二、PC 端常用 UI 组件库1. Element UI2. IView UI三、Element UI 组件库的使用3.1 安装3.1.1 npm安装npm 的方式安装能更好地和 webpack 打包工具配合使用（推荐）npm i element-ui3.1.2CDN可以通过unpkg.com/element-ui获取到最新版本的资源，在页面上引入 js 和 ...

目录一、路由守卫1.1 简介1.2 全局路由守卫 -beforeEach 和afterEach（Vue Router3）1.2.1 案例练习1.3 独享路由守卫 -beforeEnter（Vue Router3）1.3.1 案例练习1.4 组件内路由守卫 -（Vue Router3）1.4.1 案例练习二、history模式 与 hash模式一、路由守卫1.1 简介作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫官方文档：...

目录一、编程式路由导航1.1 简介1.2案例练习1.2.1 Banner.vue组件1.2.2 Message.vue路由组件二、缓存路由组件2.1 简介2.2 案例练习2.2.1 News.vue路由组件2.2.2 Home.vue路由组件三、两个新的生命周期钩子3.1 简介3.2 案例练习3.2.1News.vue路由组件一、编程式路由导航1.1 简介1. 作用：不借助 <router-link> 实现路由跳转，让...

一、路由的query参数1.传递参数，例如： <!-- 跳转并携带query参数，to的字符串写法 --> <!-- <router-link :to="`/一级路径/二级路径/三级路径?参数1=${...}&参数2=${...}`">跳转</router-link> --> <!-- 跳转并携带query参数，to的对象写法 --> <router-link :to="{

一、路由简介1.1 vue-router 的理解vue的一个插件库，专门用来实现SPA应用介绍 | Vue Router (vuejs.org)https://router.vuejs.org/zh/introduction.html1.2 对SPA应用的理解单页面Web应用（single page web application，SPA） 整个应用只有一个完整的页面 点击页面中的导航链接不会刷新页面，只会做页面的局部更新 数据需要通过ajax请求获取1.3 路由的理解1.3

目录一、目的二、模块化应用2.1 store.js直接应用模块化2.2 store.js 外部引入三、开启命名空间后的读取与调用3.1 state数据3.2 getters数据3.3调用dispatch3.4 调用commit四、案例练习4.1 count.js4.2 game.js4.3 index.js -store配置4.4 Game.vue4.5 Count.vue一、目的让代码更好维护，让多种数据分类更加明确二、模块化..

一、getters配置项1. 概念：当state中的数据需要经过加工后在使用时，可以使用getters加工2. 在store.js中追加getters配置：...// 准备getters - 用于将state中的数据进行加工const getters = { 自定义命名(state){ return ...... }}// 创建并暴露storeexport default new Vuex.Store({ ... getters})

一、vuex简介1.1 vuex是什么概念：专门在Vue中实现集中实状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式管理（读/写），也是一中组件间通信的方式，且适用于任意组件间通信vuex1.2 什么时候使用Vuex多个组件依赖同一状态 来自不同组件的行为需要变更同一状态二、Vuex工作原理图2.1 官方vuex工作原理图每一个 Vuex 应用的核心就是 store，里面又包括:1. State（状态）：用于存放数据源（对象类型数据）

一、slot插槽1.1 默认插槽

目录一、配置代理1.1. vue脚手架配置代理二、github用户搜索案例2.1 静态组件2.1.1 App.vue - 项目主组件2.1.2 Search.vue - 搜索框组件2.1.3 List.vue - 列表组件2.1.4 bootstrap.css - 第三方样式2.2 列表展示2.2.1 main.js2.2.2 List.vue2.2.3Search.vue一、配置代理1.1. vue脚手架配置代理方法一：官方文档：Vue.

目录一、Vue封装的过度与动画二、动画效果 - 案例练习三、过度效果 - 案例练习四、多个元素过度五、集成第三方动画六、TodoList案例添加动画效果一、Vue封装的过度与动画1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名2. 图示：3. 写法：（1） 准备好样式：元素进入的样式： 1. v-enter：进入的起点 2. v-enter-active：进入过程中 3....

一、全局事件总线（GlobalEventBus）1. 一种组件间的通信方式，适用于任意组件间通信2. 安装全局事件总线（在main.js中）：new Vue({ ..... beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线，$bus就是当前应用的vm }, .....})3. 使用事件总线（1）接收数据：A组件想要接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组

一、浏览器本地存储（webStorage）1. 存储内容大小一般支持5MB左右（不同浏览器可能不一样）2. 浏览器通过window.sessionStorage 和window.localStorage 属性来实现本地存储机制3. 相关API：（1）xxxxxStorage.setItem('key', 'value')该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值（2）xxxxxStorage.getItem('key')该方法接受一个键名

目录一、组件化编码流程（通用）二、TodoList案例 - 未使用全局事件总线2.1 Vue.app2.2 UserHeader.vue2.3 UserList.vue 和 UserItem.vue2.4 UserFooter.vue三、TodoList案例总结3.1 组件化编程流程3.2 关于props使用3.3 注意事项一、组件化编码流程（通用）实现静态组件：抽取组件没使用组件实现静态页面 展示动态数据： 数据的类型、名称是什么 数据保存在哪个

一、插件功能：用于增强Vue本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据定义插件：对象.install = function (Vue, options){ // 1. 全局过滤器 Vue.filter(...) // 2. 添加全局指令 Vue.directive(...) // 3. 配置全局混入(合) Vue.mixin(...) // 4. 添

一、render函数完整render函数写法new Vue({ render(createElement) { return createElement("元素名", "内容"); },精简写法 // render采用箭头函数，省略小括号，并且由于箭头函数只有一句函数体，可省略掉return，若参数内容为组件，可只传一个参数，没必要写具体内容 render:自定义参数名 => 自定义参数名(组件名),二、关于不同版本的Vue1. vue.js 与 vu

目录一、初始化Vue脚手架二、简单分析脚手架结构一、初始化Vue脚手架第一步（仅执行一次）：全局安装 @vue/cli在 命令提示符内输入（命令提示符 可由 win+R 调出 运行 界面，输入cmd 即可）npm install -g @vue/cli下载速度过慢的话，建议配置npm淘宝镜像npm config set registry https://registry.npm.taobao.org第二步：切换到你要创建项目的目录，然后使用命令创建项目，并选择vu

目录一、单文件组件1.1 创建.vue文件1.2 .vue文件内容编写1.3 项目主组件1.4 项目入口文件一、单文件组件单文件组件 — Vue.js (vuejs.org)https://cn.vuejs.org/v2/guide/single-file-components.html1.1 创建.vue文件该文件创建直接在创建文件时，添加上后缀 .vue 即可，一般与组件的命名相同1.2 .vue文件内容编写// 模板页面<templat

一、模块 与 组件1.1 模块向外提供特定功能的js程序，一般就是一个js文件作用：复用js，简化js的编写，提高js运行效率1.2 组件组件的定义：实现应用中局部功能代码和资源的集合作用：复用编码，简化项目编码，提高运行效率二、模块化 与 组件化2.1 模块化当应用的js都是以模块来编写的，那这个应用就是一个模块化应用2.2 组件化当应用中的功能都是多组件的方式来编写的，那这个就是一个组件化的应用三、Vue中使用组件的三大步骤定义组件（创建组件） 注册

一、生命周期（重要）生命周期，也称生命周期回调函数，生命周期函数、生命周期钩子 指代什么？Vue在关键时刻帮我们调用的一些特殊名称的函数 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的 生命周期函数中的this指向的是vm 或 组件实例对象1.1 Vue生命周期图示Vue 实例 — Vue.js (vuejs.org)https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%

目录一、收集表单数据1.1 收集表单数据1.2 简单案例练习二、内置指令2.1 v-text指令2.2 v-html指令2.3 v-cloak指令2.4 v-once指令2.5 v-pre指令2.6 自定义指令2.6.1 定义语法2.6.2 配置对象中常用的3个回调一、收集表单数据1.1 收集表单数据若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值若：<inpu

目录一、列表渲染1.1 列表渲染指令1.2 简单案例练习 - 列表渲染指令使用1.3 key作用与原理（重要）1.4 列表过滤和列表排序1.4.1 列表过滤1.4.2列表排序二、Vue监视数据2.1 Vue监视数据的原理2.2 案例练习一、列表渲染1.1 列表渲染指令v-for指令：用于展示列表数据 语法：v-for= "(item, index) in xxx" :key = "yyy" 可遍历：数组、对象、字符串（较少使用）、指定次数（..

一、计算属性与监视1.1 计算属性 - computed1.1.1 定义要用的属性不存在，要通过已有的属性计算得来1.1.2 原理底层借助了Object.defineproperty方法提供的getter和setter1.1.3 get函数何时执行初次读取时会执行一次 当依赖的数据发生改变时会被再次调用1.1.4 优势与methods实现相比，内部有缓存机制（复用），效率更高，调用更加方便注意：计算属性最终会出现在vm上，直接读取使用即可，在页面上直接使用{{方法

目录一、MVVM模型二、数据代理2.1 Vue中的数据代理2.2 Vue中数据代理的好处2.3 基本原理三、事件处理3.1 事件的基本使用3.2 事件修饰符3.3 键盘事件3.3.1 Vue中常用的按键别名3.3.2 注意事项3.3.3 简单键盘事件案例一、MVVM模型M：即模型（Model），对应data中的数据 V：即视图（View），模板 VM：即视图模型（ViewModel），Vue实例对象Data Bindings：数据绑定

一、Vue是什么？一套用于构建用户界面的渐进式JavaScript框架构建用户界面：将用户数据变为用户可以看见的界面 渐进式：Vue可以自底向上逐层的应用二、Vue的特点采用组件化模式，提高代码复用率、且让代码更好维护 声明式编码，让编码人员无需直接操作DOM，提高开发效率 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点...