个人网站模块,wordpress售后退货插件,济南手机网站建设专业定制,免费安装app文章目录 37、谈谈你对 keep-alive 的了解38、说一说Vue2的响应式原理?39、你都做过哪些Vue项目上的性能优化40、你知道style加scoped属性的用途和原理吗41、mixins混入的理解42、Vue路由懒加载怎么做的43、SSR了解吗?44、computed和watch的区别是什么?45、 Vue项⽬的打包上… 文章目录 37、谈谈你对 keep-alive 的了解38、说一说Vue2的响应式原理?39、你都做过哪些Vue项目上的性能优化40、你知道style加scoped属性的用途和原理吗41、mixins混入的理解42、Vue路由懒加载怎么做的43、SSR了解吗?44、computed和watch的区别是什么?45、 Vue项⽬的打包上线46、vue中动态组件如何使用? 37、谈谈你对 keep-alive 的了解
是什么 ● keep-alive 是 Vue 内置的一个组件可以使被包含的组件保留状态避免重新渲染, 一般结合路由和动态组件一起使用用于缓存组件具体使用 2.1. 对应两个钩子函数 activated 和 deactivated 当组件被激活时触发钩子函数 activated当组件被移除时触发钩子函数 deactivated 2.2. 提供 include 和 exclude 属性两者都支持字符串或正则表达式 include 表示只有名称匹配的组件会被缓存exclude 表示任何名称匹配的组件都不会被缓存 其中 exclude 的优先级比 include 高
38、说一说Vue2的响应式原理?
Vue2的响应式原理核心是通过数据劫持结合发布-订阅模式实现的具体步骤如下
数据劫持 Vue2使用Object.defineProperty递归劫持对象的属性将其转化为getter/setter。当读取数据时触发getter修改数据时触发setter。依赖收集Dep 每个被劫持的属性都有一个Dep实例依赖管理器。在getter中若当前存在正在执行的Watcher如组件渲染时的渲染Watcher则将该Watcher存入Dep的订阅列表建立属性与Watcher的依赖关系。派发更新Watcher 当数据变化触发setter时Dep会通知所有关联的Watcher执行更新如重新渲染组件。Watcher通过异步队列优化多次更新确保性能。数组处理 Object.defineProperty无法监听数组索引变化Vue2重写了数组的push、pop等7个方法。调用这些方法时手动触发更新并通过__ob__属性关联数组的Dep。 局限 ● 对象新增/删除属性需用Vue.set/Vue.delete。 ● 数组直接通过索引修改或修改长度无法被监听需用重写的方法或Vue.set
39、你都做过哪些Vue项目上的性能优化
v-if和v-for不能连用页面采用keep-alive缓存组件合理使用v-if和v-showkey保证唯一使用路由懒加载、异步组件、组件封装实现复用防抖、节流第三方模块按需导入图片懒加载精灵图的使用代码压缩CDN外链 a. 把项目中的三方库在打包的时候先排出 b.使用CDN的外部链接引入, 这样就能减少包的体积, 提高首屏加载的速度
40、你知道style加scoped属性的用途和原理吗
用途防止全局同名CSS污染原理在标签加上v-data-hash属性在当前组件的所有css样式选择器时加上对应[v-data-hash]即CSS带属性选择器以此完成类似作用域的选择方式.
41、mixins混入的理解
是什么 ● mixins混入当发现多个vue组件的选项和钩子函数有部分或者较多的相同的代码, 此时就可以把相同代码的选项和钩子函数给抽到一个mixins对象, 在组件中导入该对象进行混入即可使用场景 ● 不同组件中经常会用到一些相同或相似的代码这些代码的功能相对独立。可以通过mixin 将相同或相似的代码提出来如何创建Mixins ● 在 src 目录下创建一个 mixins 文件夹在文件夹下新建一个 myMixins.js 文件。 ● 因为 mixins 是一个 js 对象所以应该以对象的形式来定义 myMixins在对象中可以和 vue 组件一样来定义 data、components、methods、created、computed 等属性并通过 export 导出该对象 ● 在需要调用的组件中引入 myMixins.js 文件直接混入即可 ● 使用注意点: ○ 有冲突先用组件自身: ■ 如果混入的和data/computed/methods选项中有重名的, 使用组件中定义的属性 ○ 没有冲突则叠加: ■ 如果混入钩子函数代码, 优先执行混入的再去执行组件钩子函数内部的代码缺点 ● 变量来源不明确 ● 多 mixins 可能会造成命名冲突 ● mixins 和组件出现多对多的关系使项目复杂度变高解决缺点 ● Vue3的组合API 解决了mixins引起的所有问题(不清晰的数据来源命名冲突等)这也是Vue3中组合式API出现的原因之一
42、Vue路由懒加载怎么做的
是什么? ● 路由懒加载也叫延迟加载即在需要的时候进行加载随用随载为什么? ● 像vue这种单页面应用如果没有懒加载运用webpack打包后的文件将会异常的大 ● 造成进入首页时需要加载的内容过多时间过长会出现长时间的白屏即使做了loading也是不利于用户体验 ● 而运用懒加载则可以将页面进行划分需要的时候加载页面可以有效的分担首页所承担的加载压力减少首页加载用时如何使用? ●import按需加载
export default new Router({routes: [{path: /,name: HelloWorld,component: () import(/components/HelloWorld.vue)}
]vue异步组件
export default new Router({routes: [{path: /,name: HelloWorld,component: resolve require([/components/HelloWorld], resolve)}
]43、SSR了解吗?
是什么 ● SSR也就是服务端渲染也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成然后再把html直接返回给客户端。 ● SSR 是一种网页渲染技术与传统的客户端渲染Client-Side RenderingCSR相对应。在传统的客户端渲染模式下浏览器首先加载 HTML 页面这个 HTML 页面往往只有一个基本的结构包含一些必要的脚本引用等然后由浏览器中的 JavaScript 代码去获取数据并动态地将数据填充到页面中最终渲染出完整的、用户可见的页面内容。而服务器端渲染则是在服务器端就把完整的、包含了最终页面内容的 HTML 页面直接生成好然后发送给浏览器浏览器接收到后可以直接展示出来后续再通过加载 JavaScript 等资源来进行交互等操作。优点和缺点 优点: ● 更快的首屏加载速度 ● 利于 SEO搜索引擎优化 缺点: ● 增加服务器负载 ● 上手成本高进行SSR开发, 可以用哪些技术栈? ● Next.js基于 React ●Nuxt.js (基于 Vue)
44、computed和watch的区别是什么?
计算属性computed
支持缓存只有依赖数据发生改变才会重新进行计算不支持异步当computed内有异步操作时无效无法监听数据的变化如果computed需要对数据修改需要写get和set两个方法当数据变化时调用set方法computed擅长处理的场景一个数据受多个数据影响例如购物车计算总价 侦听属性watch不支持缓存数据变直接会触发相应的操作watch支持异步监听的函数接收两个参数第一个参数是最新的值第二个参数是输入之前的值immediate组件加载立即触发回调函数执行deep:true的意思就是深入监听任何修改obj里面任何一个属性都会触发这个监听器里的 handler方法来处理逻辑 5.watch擅长处理的场景一个数据影响多个数据例如搜索框
45、 Vue项⽬的打包上线
⼿动部署 2.自动部署 本地Vscode编写代码git push 将代码上传到gitlab托管平台, 通过.gitlab-ci.yml配置⽂件执⾏部署流程 1.gitlab是企业版内部部署 2.Linux服务器 ● 安装 gitlab-runner ⽤于拉取仓库代码 ● 安装 Nodejs ⽤于打包项⽬ ● 安装 pm2 ⽤于启动静态资源托管守护进程 3.运维使⽤ Nginx 进⾏域名代理 4.⽤户通过浏览器访问服务
46、vue中动态组件如何使用?
Vue中的动态组件允许根据条件动态切换不同的组件渲染核心是通过 标签与 is 属性实现。以下是关键点
使用 通过 currentComponent 动态绑定要渲染的组件名或组件对象
!-- 动态切换组件 --
component :iscurrentTab/component2.组件类型 is 的值可以是 ○ 注册的组件名字符串 ○ 组件选项对象直接引入的组件 ○ 异步组件结合 import() 动态加载 3. 保持状态 用 包裹动态组件避免切换时组件实例被销毁
keep-alivecomponent :iscurrentComponent/component
/keep-alive使用场景:
Tab页切换 多个标签页对应不同组件通过切换标签动态渲染内容。条件渲染不同组件 根据业务逻辑如用户权限、数据状态动态选择组件例如 ○ 未登录时显示登录组件登录后显示内容组件。 ○ 根据设备类型PC/移动端渲染不同UI组件。异步加载组件 结合动态导入import()实现按需加载优化首屏性能
components: {AsyncComponent: () import(./AsyncComponent.vue)
}表单步骤向导 多步骤表单流程每一步骤对应一个子组件通过动态组件切换步骤。
