免费网站建设讯息,域名注册,内蒙古注册公司流程和费用,东莞网站建设那家好目录
一、组件通信方式
二、v-if和v-for
三、生命周期
1、描述
2、setup和created谁先执行
3、setup中为什么没有beforeCreate和created
四、双向绑定 v-model
1、定义
2、本质#xff0c;原理
3、好处
五、如何扩展一个组件
1、mixins
缺点
2、slot插槽
3、e…目录
一、组件通信方式
二、v-if和v-for
三、生命周期
1、描述
2、setup和created谁先执行
3、setup中为什么没有beforeCreate和created
四、双向绑定 v-model
1、定义
2、本质原理
3、好处
五、如何扩展一个组件
1、mixins
缺点
2、slot插槽
3、extends
六、子组件可以直接改变父组件的数据吗
七、vue如何进行权限管理
八、对响应式理解
九、对虚拟 DOM 的理解
十、diff算法
十一、vue3新特性
十二、 怎么定义动态路由怎么获取传过来的动态参数
十三、从零开始写一个vue路由
十四、nextTick的使用和原理
十五、watch和computed的区别
十六、Vue 子组件和父组件创建和挂载顺序
十七、怎么缓存当前的组件缓存后怎么更新
十八、从0到1自己构架一个vue项目
十九、从 template 到 render 处理过程
二十、Vue实例挂载的过程中发生了什么
二十一、对vuex理解
1、定义
2、组成
3、缺点
4、action和mutation的区别是什么
5、怎么监听vuex数据的变化
二十二、vue2中Vue组件为什么只能有一个根元素vue3中为什么可以有多个
二十三、怎么实现路由懒加载
二十四、vue3中ref和reactive异同
二十五、watch和watchEffect异同
二十六、router-link和router-view是如何起作用的
二十七、vue-router实现路由跳转
二十八、History模式和Hash模式有何区别
二十九、页面刷新后vuex的state数据丢失怎么解决
三十、vue3的Composition API 与 vue2的Options API 有什么不同
三十一、vue-router中如何保护路由
三十二、对vue-loader的理解
三十三、如何自定义指令
三十四、$attrs和$listeners的使用场景
三十五、v-once的使用场景
三十六、v-memo的使用场景
三十七、什么是递归组件
三十八、什么是异步组件
三十九、如何处理vue项目中的错误
四十、vue渲染大量数据时应该怎么优化
四十一、SPA、SSR的区别是什么
四十二、存在首屏加载优化需求SEO需求时有什么解决方案 一、组件通信方式
1、父 》子
props子组件用props接收父组件的数据
$attrs
2、子 》父
$emit子组件通过$emit 传递自定义事件传递父组件通过属性名称接收
3、兄弟
$parent
$root
4、祖孙
provide inject
5、各种关系都通用
eventbus事件总线new一个bus 中央总线的vue实例发送端组件bus.$emit传递数据bus.$on接收端组件接收数据
vuex
6、vue3废弃$on$children$listeners
二、v-if和v-for
1、区别
v-if数据的隐藏与显示
v-for循环遍历渲染数据key是唯一标识为了比较两个节点是否相同好处是可以更高效的更新虚拟DOM避免使用数组索引作为key如果不设置key它的值就是undefined则可能永远认为这是两个相同节点只能去做更新操作这造成了大量的dom更新操作明显是不可取的
2、优先级
vue2v-for v-if
把它们放在一起输出的渲染函数中可以看出会先执行循环再判断条件哪怕我们只渲染列表中一小部分元素也得在每次重渲染的时候遍历整个列表这会比较浪费
vue3v-for v-if
v-if执行时它调用的变量还不存在就会导致异常 三、生命周期
1、描述
beforeCreate通常用于插件开发中执行一些初始化任务
created组件初始化完毕可以访问各种数据获取接口数据等
mounteddom已创建可用于获取访问数据和dom元素访问子组件等。
beforeUpdate此时view层还未更新可用于获取更新前各种状态
updated完成view层的更新更新后所有状态已是最新
beforeunmount实例被销毁前调用可用于一些定时器或订阅的取消
unmounted销毁一个实例。可清理它与其它实例的连接解绑它的全部指令及事件监听器 2、setup和created谁先执行
setup
3、setup中为什么没有beforeCreate和created
setup是最早的。所以基本也不需要这两个钩子了(还是有不过是hooks)
四、双向绑定 v-model
1、定义
vue中双向绑定是一个指令v-model可以绑定一个响应式数据到视图同时视图中变化能改变该值
2、本质原理
默认情况下相当于:value和input
转换为渲染函数之后实际上还是是value属性的绑定以及input事件监听事件回调函数中会做相应变量更新操作。编译器根据表单元素的不同会展开不同的DOM属性和事件对
3、好处
可以减少大量繁琐的事件处理代码提高开发效率。
4、自定义组件使用v-model如果想要改变事件名或者属性名应该怎么做
5、v-model和sync修饰符有什么区别 五、如何扩展一个组件
1、mixins
// 复用代码它是一个配置对象选项和组件里面一样
const mymixin {methods: {dosomething(){}}
}
// 全局混入将混入对象传入
Vue.mixin(mymixin)// 局部混入做数组项设置到mixins选项仅作用于当前组件
const Comp {mixins: [mymixin]
}
缺点
不能明确判断来源且可能和当前组件内变量产生命名冲突。
解决方法vue3中引入的composition api利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式的数据然后在setup选项中组合使用增强代码的可读性和维护性
2、slot插槽
如果要精确分发到不同位置可以使用具名插槽如果要使用子组件中的数据可以使用作用域插槽
3、extends
// 扩展对象
const myextends {methods: {dosomething(){}}
}
// 组件扩展做数组项设置到extends选项仅作用于当前组件
// 跟混入的不同是它只能扩展单个对象
// 另外如果和混入发生冲突该选项优先级较高优先起作用
const Comp {extends: myextends
}
六、子组件可以直接改变父组件的数据吗
不可以。
所有的 prop 都使得其父子之间形成了一个单向下行绑定父级 prop 的更新会向下流动到子组件中但是反过来则不行。这是组件化开发过程中的单项数据流原则。
这样是为了防止从子组件意外变更父级组件的状态。每次父级组件发生变更时子组件中所有的 prop 都将会刷新为最新的值。 七、vue如何进行权限管理
权限管理一般需求是两个页面权限和按钮权限
1、页面权限
1前端方案
路由信息配置好路由守卫要求用户登录根据用户角色过滤出路由表
router.addRoutes动态添加路由
2后端方案
路由信息存入数据库根据用户角色查找该用户能访问的所有路由通过addRoutes动态添加路由信息
3优缺点
前端方案实现简单但不利于维护有新的页面和角色需求就要修改前端代码重新打包部署
后端方案一劳永逸通过专门的角色和权限管理页面配置页面和按钮权限信息到数据库应用每次登陆时获取的都是最新的路由信息
2、按钮权限
用户角色通过值传给v-permission指令指令的mounted可以判断当前用户角色和按钮是否有交集有就保留按钮没有就移出按钮
八、对响应式理解
1、定义
数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。通过数据驱动应用数据变化视图更新
2、好处
不用接触繁琐的DOM操作从而大大提升开发效率降低开发难度
3、如何实现
vue2
不同数据类型采用的方法不一样
对象则采用Object.defineProperty()的方式定义数据拦截当数据被访问或发生变化时我们感知并作出响应
数组则通过覆盖数组对象原型的7个变更方法使这些方法可以额外的做更新通知从而作出响应
对于es6中新产生的Map、Set这些数据结构不支持
vue3
利用ES6的Proxy代理要响应化的数据
九、对虚拟 DOM 的理解
1、定义
虚拟的dom对象是JavaScript对象它是通过不同的属性去描述一个视图结构
2、好处
将真实元素节点抽象成 VNode有效减少直接操作 dom 次数从而提高程序性能
方便实现跨平台
3、如何生成
组件的模板 - template会被编译器 - compiler编译为渲染函数在接下来的挂载mount过程中会调用render函数这个函数返回的对象就是虚拟dom。但它们还不是真正的dom所以会在后续的patch过程中进一步转化为dom。
4、虚拟DOM如何转换成真实DOM
挂载过程结束后vue程序进入更新流程。如果某些响应式数据发生变化将会引起组件重新render此时就会生成新的vdom和上一次的渲染结果diff就能得到变化的地方从而转换为最小量的dom操作高效更新视图。 十、diff算法
递归过程遵循深度优先、同层比较的策略
首先判断两个节点是否为相同同类节点不同则删除重新创建如果双方都是文本则更新文本内容如果双方都是元素节点则递归更新子元素同时更新元素属性更新子节点时又分了几种情况 新的子节点是文本老的子节点是数组则清空并设置文本新的子节点是文本老的子节点是文本则直接更新文本新的子节点是数组老的子节点是文本则清空文本并创建新子节点数组中的子元素新的子节点是数组老的子节点也是数组那么比较两组子节点更新细节十一、vue3新特性
1、api层面Vue3新特性
Composition API、SFC Composition API语法糖setup、Teleport传送门、Fragments 片段、Emits选项、自定义渲染器、SFC CSS变量、Suspense
2、框架层面
更快 虚拟DOM重写编译器优化静态提升、patchFlags、block等基于Proxy的响应式系统更小更好的摇树优化更容易维护TypeScript 模块化更容易扩展 独立的响应化模块自定义渲染器十二、 怎么定义动态路由怎么获取传过来的动态参数
1、为什么要有动态路由
将给定匹配模式的路由映射到同一个组件
2、路径参数 用冒号 : 表示。当一个路由被匹配时它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来 十三、从零开始写一个vue路由
首先我会定义一个createRouter函数返回路由器实例实例内部做几件事 保存用户传入的配置项监听hash或者popstate事件回调里根据path匹配对应路由将router定义成一个Vue插件即实现install方法内部做两件事 实现两个全局组件router-link和router-view分别实现页面跳转和内容显示定义两个全局变量$route和$router组件内可以访问当前路由和路由器实例十四、nextTick的使用和原理
1、作用
等待下一次 DOM 更新刷新的工具方法Vue有个异步更新策略如果数据变化Vue不会立刻更新DOM而是开启一个队列把组件更新函数保存在队列中在同一事件循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在DOM上此时如果想要获取更新后的DOM状态就需要使用nextTick。
2、使用场景
created中想要获取DOM时响应式数据变化后获取DOM更新后的状态比如希望获取列表更新后的高度
3、原理
在Vue内部nextTick之所以能够让我们看到DOM更新后的结果是因为我们传入的callback会被添加到队列刷新函数(flushSchedulerQueue)的后面这样等队列内部的更新函数都执行完毕所有DOM操作也就结束了callback自然能够获取到最新的DOM值 十五、watch和computed的区别
计算属性可以从组件数据派生出新数据最常见的使用方式是设置一个函数返回计算之后的结果computed和methods的差异是它具备缓存性如果依赖项不变时不会重新计算。
侦听器可以侦测某个响应式数据的变化并执行副作用常见用法是传递一个函数执行副作用watch没有返回值但可以执行异步操作等复杂逻辑。 十六、Vue 子组件和父组件创建和挂载顺序
父created、父beforemount、子created、子beforemount、子mounted、父mounted 十七、怎么缓存当前的组件缓存后怎么更新
1、缓存组件
keep-alive会缓存不活动的组件实例而不是销毁它们这样在组件切换过程中将状态保留在内存中防止重复渲染DOM
结合属性include和exclude可以明确指定缓存哪些组件或排除缓存指定组件
keep-alivecomponent :isview/component
/keep-alive
2、路由
vue2keep-alive包裹router-view
vue3router-view包裹keep-alive
3、原理
内部定义了一个map缓存创建过的组件实例它返回的渲染函数内部会查找内嵌的component组件对应组件的vnode如果该组件在map中存在就直接返回它。由于component的is属性是个响应式数据因此只要它变化keep-alive的render函数就会重新执行
4、缓存后更新
方式1执行actived钩子
方式2每次进入路由的时候都会执行beforeRouteEnter 十八、从0到1自己构架一个vue项目
步骤项目构建、引入必要插件、代码规范、提交规范、常用库和组件 十九、从 template 到 render 处理过程
在Vue中编译器会先对template进行解析这一步称为parse结束之后会得到一个JS对象我们成为抽象语法树AST然后是对AST进行深加工的转换过程这一步成为transform最后将前面得到的AST生成为JS代码也就是render函数 二十、Vue实例挂载的过程中发生了什么
app.mount()过程
1、初始化创建组件实例、初始化组件状态创建各种响应式数据
2、建立更新机制立即执行一次组件更新函数这会首次执行组件渲染函数并执行patch将前面获得vnode转换为dom同时首次执行渲染函数会创建它内部响应式数据之间和组件更新函数之间的依赖关系这使得以后数据变化时会执行对应的更新函数 二十一、对vuex理解
1、定义
采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化
2、组成
state、mutation、action
3、缺点
4、action和mutation的区别是什么
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
Action可以包含任意异步操作但它不能修改状态 需要提交mutation才能变更状态
5、怎么监听vuex数据的变化
方式1通过watch选项或者watch方法监听状态以字符串形式监听$store.state.xx
方式2使用vuex提供的APIstore.subscribe()回调函数接收mutation对象和state对象这样可以进一步判断mutation.type是否是期待的那个从而进一步做后续处理 二十二、vue2中Vue组件为什么只能有一个根元素vue3中为什么可以有多个
vdom是一颗单根树形结构diff算法在遍历的时候从根节点开始遍历它要求只有一个根节点。组件也会转换为一个vdom自然应该满足这个要求
vue3中之所以可以写多个根节点是因为引入了Fragment的概念这是一个抽象的节点如果发现组件是多根的就创建一个Fragment节点把多个根节点作为它的children。将来patch的时候如果发现是一个Fragment节点则直接遍历children创建或更新 二十三、怎么实现路由懒加载
1、为什么要路由懒加载
当打包应用时JavaScript 包会变得非常大影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块然后当路由被访问时才加载对应组件这样就会更加高效
2、实现
动态导入给component选项配置一个返回 Promise 组件的函数就可以定义懒加载路由这样Vue Router 只会在第一次进入页面时才会获取这个函数然后使用缓存数据。
结合注释() import(/* webpackChunkName: group-user */ ./UserDetails.vue)可以做webpack代码分块 二十四、vue3中ref和reactive异同
1、定义
ref接收内部值返回响应式Ref对象通常用于处理单值响应式
reactive返回响应式代理对象用于处理对象类型响应式
2、用法
ref返回的响应式数据在JS中使用需要加上.value才能访问其值
reactive不用加
3、数据类型
ref可以接收对象或数组等非原始值但内部依然是reactive实现响应式
reactive内部如果接收Ref对象会自动脱ref
使用展开运算符(...)展开reactive返回的响应式对象会使其失去响应性可以结合toRefs()将值转换为Ref对象之后再展开
4、实现响应式的方式
ref内部封装一个RefImpl类并设置存取器get value/set value拦截用户对值的访问从而实现响应式
reactive内部使用Proxy代理传入对象并拦截该对象各种操作trap从而实现响应式 二十五、watch和watchEffect异同
1、定义
watchEffect传入的函数既是依赖收集的数据源也是回调函数立即运行一个函数然后被动地追踪它的依赖当这些依赖改变时重新执行该函数
watch侦测一个或多个响应式数据源并在数据源变化时调用一个回调函数。可以接收多种数据源包括用于依赖收集的getter函数因此它完全可以实现watchEffect的功能同时由于可以指定getter函数依赖可以控制的更精确还能获取数据变化前后的值
2、是否会立即执行
watchEffect在使用时传入的函数会立刻执行一次。
watch默认情况下并不会执行回调函数除非我们手动设置immediate选项
3、关系
watchEffect(fn) watch(fn,fn,{immediate:true}) 二十六、router-link和router-view是如何起作用的
router-link默认生成一个a标签设置to属性定义跳转path。
router-view是要显示组件的占位组件可以嵌套对应路由配置的嵌套关系配合name可以显示具名组件。
原理
router-link组件内部根据custom属性判断如何渲染最终生成节点内部提供导航方法navigate用户点击之后实际调用的是该方法此方法最终会修改响应式的路由变量然后重新去routes匹配出数组结果router-view则根据其所处深度deep在匹配数组结果中找到对应的路由并获取组件最终将其渲染出来 二十七、vue-router实现路由跳转
声明式导航router-link
编程式导航router.pushrouter.replace 二十八、History模式和Hash模式有何区别
hash模式在地址栏显示的时候是已哈希的形式#/xxx这种方式使用和部署简单但是不会被搜索引擎处理seo有问题
history模式则建议用在大部分web项目上但是它要求应用在部署时做特殊配置服务器需要做回退处理否则会出现刷新页面404的问题。
底层实现上其实hash是一种特殊的history实现
vue-router4.xconst router createRouter({history: createWebHashHistory(), // hash模式history: createWebHistory(), // history模式
}) 二十九、页面刷新后vuex的state数据丢失怎么解决
1、产生原因
vuex只是在内存保存状态刷新之后就会丢失如果要持久化就要存起来
2、解决方法
方法1localStorage提交mutation的时候同时存入localStoragestore中把值取出作为state的初始值即可
方法2插件vuex-persist、vuex-persistedstate内部的实现就是通过订阅mutation变化做统一处理vuex提供的subscribe方法做一个统一的处理通过插件的选项控制哪些需要持久化 三十、vue3的Composition API 与 vue2的Options API 有什么不同
Composition API是一组API包括Reactivity API、生命周期钩子、依赖注入使用户可以通过导入函数方式编写vue组件。对ts支持更友好
Options API则通过声明组件选项的对象形式编写组件。 三十一、vue-router中如何保护路由
保护路由的方法叫做路由守卫主要用来通过跳转或取消的方式守卫导航
路由守卫有三个级别全局路由独享组件级
全局的router.beforeEach()可以注册一个全局前置守卫每次路由导航都会经过这个守卫因此在其内部可以加入控制逻辑决定用户是否可以导航到目标路由
在路由注册的时候可以加入单路由独享的守卫例如beforeEnter守卫只在进入路由时触发因此只会影响这个路由控制更精确
还可以为路由组件添加守卫配置例如beforeRouteEnter会在渲染该组件的对应路由被验证前调用控制的范围更精确了。
用户的任何导航行为都会走navigate方法内部有个guards队列按顺序执行用户注册的守卫钩子函数如果没有通过验证逻辑则会取消原有的导航。 三十二、对vue-loader的理解
用于处理单文件组件的webpack loader可以在项目中编写SFC格式的Vue组件。
webpack打包时会以loader的方式调用vue-loader。
vue-loader被执行时它会对SFC中的每个语言块用单独的loader链处理。最后将这些单独的块装配成最终的组件模块 三十三、如何自定义指令
1、定义
有两种方式对象和函数形式前者类似组件定义有各种生命周期后者只会在mounted和updated时执行
2、注册
app.directive()全局注册使用{directives:{xxx}}局部注册
3、使用
v-注册名
4、自定义指令后发生什么
编译后的自定义指令会被withDirective函数装饰进一步处理生成的vnode添加到特定属性中
5、在v3.2之后可以在setup中以一个小写v开头方便的定义自定义指令 三十四、$attrs和$listeners的使用场景
50Vue经典面试题源码级详解34 - 掘金 (juejin.cn) 三十五、v-once的使用场景
作用仅渲染指定组件或元素一次并跳过未来对其更新 三十六、v-memo的使用场景
作用有条件缓存部分模板并控制它们的更新 三十七、什么是递归组件
1、定义
某个组件通过组件名称引用它自己
2、原理
递归组件查找时会传递一个布尔值给resolveComponent这样实际获取的组件就是当前组件本身 三十八、什么是异步组件
1、定义
在大型应用中我们需要分割应用为更小的块并且在需要组件时再加载它们这时就需要用到异步组件
2、使用
给defineAsyncComponent指定一个loader函数结合ES模块动态导入函数import可以快速实现 三十九、如何处理vue项目中的错误
1、对于接口异常
可能是请求失败也可能是请求获得了服务器响应但是返回的是错误状态
封装Axios在拦截器中统一处理整个应用中请求的错误
2、对于代码逻辑错误
使用全局错误处理函数app.config.errorHandler收集错误
import { createApp } from vue
const app createApp(...)
app.config.errorHandler (err, instance, info) {// report error to tracking services
} 四十、vue渲染大量数据时应该怎么优化
1、采用懒加载方式在用户需要的时候再加载数据
2、采取分页的方式获取避免渲染大量数据
3、通过v-memo可以缓存结果结合v-for使用避免数据变化时不必要的VNode创建 四十一、SPA、SSR的区别是什么
SPASingle Page Application即单页面应用。一般也称为 客户端渲染Client Side Render 简称 CSR。SSRServer Side Render即 服务端渲染。一般也称为 多页面应用Mulpile Page Application简称 MPA。
SPA应用只会首次请求html文件后续只需要请求JSON数据即可因此用户体验更好节约流量服务端压力也较小。但是首屏加载的时间会变长而且SEO不友好。为了解决以上缺点就有了SSR方案由于HTML内容在服务器一次性生成出来首屏加载快搜索引擎也可以很方便的抓取页面信息。但同时SSR方案也会有性能开发受限等问题。 四十二、存在首屏加载优化需求SEO需求时有什么解决方案
1、SSR
2、预渲染
3、nuxt.js/next.js中的SSG静态网站生成方案
