深圳专业企业网站建设,广州企业网站制作推广运营,手机网站合同,信誉好的电商网站建设Vue系列 1. vue理解#xff1a;2. SPA#xff08;单页面应用理解#xff09;3. vue实例挂载的过程4. v-for和v-if优先级5. SPA首屏加载速度慢的原因和解决办法6. Vue中给对象添加新属性界面不刷新#xff08;直接给对象添加属性#xff09;7. vue组件之间的通信方式有哪些… Vue系列 1. vue理解2. SPA单页面应用理解3. vue实例挂载的过程4. v-for和v-if优先级5. SPA首屏加载速度慢的原因和解决办法6. Vue中给对象添加新属性界面不刷新直接给对象添加属性7. vue组件之间的通信方式有哪些8. 对nextTick理解9. slot插槽理解10. 对keep-alive理解11. vue常用的修饰符12. 自定义指令以及使用场景13. SPA和SSR有何异同14. vue项目中如何解决跨域问题15. vue3新特性相比于vue2 1. vue理解
核心特性: 数据驱动MVVM Model模型层负责处理业务逻辑以及和服务器端进行交互。 View视图层负责将数据模型转化为UI展示出来可以简单理解为HTML页面。 ViewModel视图模型层用来连接Model和view是Model和View之间的通信桥梁。 组件化 图形、非图形的各种逻辑均抽象为一个统一的概念组件来实现开发模式在vue中每一个.vue文件都可以视为一个组件。 优点高内聚低耦合更好的复用可维护性扩展性。 指令系统 指令是指带有v-前缀的特殊属性作用当表达式的值改变时将其产生的连带影响响应式的作用于DOM。 v-if条件渲染指令。 v-for列表渲染。 v-bind属性绑定。 v-on事件绑定。 v-model双向数据绑定。
2. SPA单页面应用理解
动态重写当前页面与用户交互避免了页面之前切换而影响用户体验。他将所有的活动局限在一个web页面中仅在该web页面初始化时加载相应的HTMLJSCSS资源。一旦页面加载完成spa不会因为用户操作而进行页面的重新加载或跳转而是利用JS动态变化HTML从而实现交互。
优点 用户体验好内容的改变不需要重新加载整个页面。良好的前后端分离。减轻服务器压力只提供数据不用负责逻辑与页面的合成。 缺点 不利于搜索引擎的抓取所有内容都在一个页面中动态替换显示。 首次渲染速度相对较慢为实现单页面web应用功能及显示需要在加载页面的时候将JS、CSS同一加载部分页面可在需要时加载所以必须对JS及CSS代码进行合并压缩处理。 | SPA | MPA 组成 | 一个主页面和多个页面片段 | 多个主页面 刷新方式 | 局部刷新 | 整页刷新 url模式 | 哈希模式 | 历史模式 SEO搜索引擎优化 | 难实现可使用SSR方式改善 | 容易实现 数据传递 | 容易 | 通过url,cookie,localStorage等传递 页面切换 | 速度快、用户体验良好 | 切换加载资源、速度慢、用户体验不好 维护成本 | 相对容易 | 相对复杂
3. vue实例挂载的过程
数据绑定 -》 数据渲染 -》 视图 初始化执行一系列初始化操作包括实例化Vue、初始化生命周期、事件系统、响应式数据等。 模板编译vue对模板进行编译将其转化为渲染函数渲染函数接收数据并返回生成的虚拟DOM。 挂载当渲染函数生成虚拟DOM之后vue会将渲染成真实DOM并将其挂载到指定目标元素上。 更新实例被成功挂载后如果响应式数据发生变化vue会自动进行重新渲染。 注意当数据发生变化时vue会通过依赖追踪机制自动识别出那些组件需要重新渲染然后再执行渲染函数生成新的虚拟DOM并将与旧的虚拟DOM进行比较找出需要更新的节点最后将其更新后的节点渲染为真实的DOM。 4. v-for和v-if优先级
vue2中v-for优先级高于v-ifvue3中v-if优先级高于v-for 解决办法外层嵌套template页面渲染不生产dom节点将优先级低的放入外层嵌套中。 5. SPA首屏加载速度慢的原因和解决办法
速度慢的原因
网络延迟资源文件体积过大资源是否重复发送请求加载加载脚本的时候渲染内容堵塞
解决办法
减小入口文件体积 路由懒加载静态资源本地缓存 采用HTTP缓存设置Cache-Control,Last-Modified,Etag等响应头合理使用localStorage采用service Worker离线缓存UI框架按需加载 对使用的element-UI框架按需加载组件重复打包 在webpack的config文件中修改CommonsChunkPlugin的配置 minChunks为3表示会把使用3次及以上的包抽离出来放进公共依赖文件避免了重复加载组件 图片资源的压缩将众多小图标合并到一张图上减轻HTTP请求压力使用SSR开启GZip压缩
6. Vue中给对象添加新属性界面不刷新直接给对象添加属性
vue2采用Object.defineProperty()设置响应式数据对新添加的属性没有通过Object.defineProperty()给属性添加getter和setter所以新添加的属性并不是响应式数据。 解决办法
采用**vue.set(target, propertyName/index, value)**添加少量属性值。Object.assign()创建新对象再将合并。 注意vue3通过proxy实现数据响应式直接动态添加新属性任然可以实现数据响应式。 7. vue组件之间的通信方式有哪些 通过props传递子组件设置props属性定义接收父组件传递过来的参数。 --父给子传递 e m i t 触发自定义事件通过 emit触发自定义事件通过 emit触发自定义事件通过emit触发自定义事件。 --子给父传递 ref给子组件设置ref父组件通过设置子组件ref获取数据。 EventBusVue.prototypr.$bus new Vue() 。 --兄弟组件之间传递 a t t r s 和 attrs和 attrs和listeners–祖先传递数据给子孙。 provide与inject祖先组件定义provide属性返回传递的值在后代组件通过inject接收组件传递过来的值。 --祖先传递数据给子孙 vuex存储共享变量的容器。 --复杂关系的组件数据传递。
8. 对nextTick理解
当数据改变的时候vue并不会立即去更新DOM而是将修改数据的操作放在一个异步操作的队列中如果一直修改相同的数据异步操作队列还会进行去重所以等待同一事件中的所有数据变化完成之后会将队列中的事件拿来进行处理进行DOM的更新。 使用场景 想要修改数据后立即得到更新后的DOM结构可以使用Vue.nextTick()。
9. slot插槽理解 插槽就是子组件中提供给父组件使用的一个占位符用表示父组件可以在这个占位符中填充任何模板代码如HTML、组件等 默认插槽
// 子组件
templateslotp插槽后备的内容/p/slot
/template
// 父组件
Childdiv默认插槽/div
/Child具名插槽
// 子组件
templateslot插槽后备的内容/slotslot namecontent插槽后备的内容/slot
/template
// 父组件
childtemplate v-slot:default具名插槽/template!-- 具名插槽⽤插槽名做参数 --template v-slot:content内容.../template
/child作用域插槽 子组件在作用域上绑定属性来将子组件的信息传给父组件使用这些属性会被挂在父组件v-slot接收的对象上。 v-slot:(简写为#) // 子组件
template slot namefooter testProps子组件的值h3没传footer插槽/h3/slot
/template
// 父组件
child !-- 把v-slot的值指定为作⽤域上下⽂对象 --template v-slot:defaultslotProps来⾃⼦组件数据{{slotProps.testProps}}/templatetemplate #defaultslotProps来⾃⼦组件数据{{slotProps.testProps}}/template
/child10. 对keep-alive理解
vue内置组件能在组件切换过程中将状态保留在内存中防止重复渲染DOM。 可以设置以下属性
include只有名称匹配的组件会被缓存。exclude匹配的组件都不会被缓存。max数字。 --最多可以缓存多少组件实例。 注意设置keep-alive会多出两个生命周期。activated与deactivated 11. vue常用的修饰符 修饰符是用于限定类型以及类型成员的声明的一种符号。 表单修饰符 v-model.trim trim 自动过滤用户输入的首空格字符而中间的空格不会被过滤。number 自动将用户输入值转为数值类型。 事件修饰符 click.stop stop 阻止事件冒泡。prevent 阻止事件默认行为。once 绑定事件只触发一次。native 让组件变成像HTML内置标签那样监听根元素的原生事件否则组件上使用v-on只会监听自定义事件$emit。 键盘修饰符 keyup.enter 普通键 enter…
12. 自定义指令以及使用场景
通过Vue.directive(指令名字 对象数据指令函数)进行注册。 应用场景
表单防止重复提交节流图片懒加载一键copy的功能
13. SPA和SSR有何异同
SPA单页面应用客户端渲染 SSR多页面应用服务端渲染 SPA应用只会首次请求HTML文件得到的是一个空的HTML后续只需要请求JSON数据即可用户体验更好节约流量服务端压力比较小。但是首屏加载的时间会变长而且SEO不友好。为了解决以上SSR方案HTML内容在服务器一次性生成出来首屏加载快搜索引擎可以方便抓取页面信息。
14. vue项目中如何解决跨域问题
同源策略 协议相同、主机相同、端口相同。 —若存在一个不同就会产生跨域问题。
JSONPCORS —服务端设置Proxy —vue.config.js中设置 devServer: {host: 127.0.0.1,port: 8084,open: true,// vue项目启动时自动打开浏览器proxy: {/api: { // /api是代理标识用于告诉nodeurl前面是/api的就是使用代理的target: http://xxx.xxx.xx.xx:8080, //目标地址一般是指后台服务器地址changeOrigin: true, //是否跨域pathRewrite: { // pathRewrite 的作用是把实际Request Url中的/api用代替^/api: }}}}15. vue3新特性相比于vue2 Tree-shaking 在vue2中很多函数都是挂载在全局Vue对象上比如nexttick等虽然我们可能用不到但打包只要引入vue这些全局函数任然会打包进bundle中。 vue3采用ES6模块引入方式。 响应式API 采用ref和reactive创建响应式数据。 ref利用object.defieProperty(), reactive采用proxy()返回一个代理对象。 生命周期 beforeCreate setup create setup beforeMounted onBeforeMounted mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeUnmount onBeforeUnmounted unmounted onUnmounted 新组件Fragment(没有根标签多个标签包裹在一个Fragment虚拟元素中) Teleport(组件HTML结构移动到指定位置) Suspense(等待异步组件时渲染一些额外内容)
