毕业设计旅游网网站设计,德阳中恒网站建设,建wap网站,wordpress变慢一.vue中的key的作用 key的作用主要是为了高效的更新虚拟dom。另外vue中在使用相同标签名元素的过渡切换时#xff0c;也会使用到key属性#xff0c;其目的也是为了让vue可以区分它们#xff0c;否则vue只会替换内部属性而不会触发过渡效果。 二.接口请求一般放在哪个生命周…一.vue中的key的作用 key的作用主要是为了高效的更新虚拟dom。另外vue中在使用相同标签名元素的过渡切换时也会使用到key属性其目的也是为了让vue可以区分它们否则vue只会替换内部属性而不会触发过渡效果。 二.接口请求一般放在哪个生命周期为什么要这样做 接口请求可以放在钩子函数createdbeforeMountmounted中进行调用因为在这三个钩子函数中data已经创建可以将服务器端返回的数据进行赋值。 但推荐在created钩子函数中调用异步请求因为在created钩子函数中调用异步请求有以下几个优点 能够更快获取到服务器端数据减少页面loading时间SSR不支持beforeMountmounted钩子函数所以放在created中有助于代码一致性created是在模板渲染成html调用即通常初始化某些元素属性值然后再渲染成视图。如果在mounted钩子函数中请求数据可能导致页面闪屏问题 三.说一下vue中computed和methods的区别是什么
首先从表现形式上面来看computed和methods的区别大致有下面4点
在使用时computed可以当做属性使用而methods则当做方法调用computed可以具有getter和setter因此可以赋值而methods不行。computed无法接收多个参数而methods可以computed具有缓存而methods没有 如果从底层来看的话computed和methods在底层实现上面还有很大的区别。 vue对于methods的处理比较简单只需要遍历methods配置中的每一个属性将其对于的函数使用bind绑定当前组价实例后复制其引用到组件实例中即可 四.nextTick的作用是什么他的实现原理是什么 作用:vue更新DOM是异步更新的数据变化DOM的更新不会马上完成nextTick的回调是在下次DOM更新循环结束之后执行的延迟回调。 实现原理nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用
Promise 可以将函数延迟到当前函数调用栈最末端 MutationObserver:是H5新增加的一个功能其功能是监听dom节点的变动在所有dom变动完成后执行回调函数setImmediate用于中断长时间运行的操作并在浏览器完成其他操作如事件和显示更新后立即运行回调函数如果以上都不行则采用setTimeout把函数延迟到DOM更新之后再使用原因是宏任务消耗大于微任务优先使用微任务最后使用消耗最大的宏任务。
五.vue组件的data为什么必须是函数 组件中的data写成一个函数数据以函数返回值形式定义。这样每复用一次组件就会返回一份新的data类似于给每个组件实例创建一个私有的数据空间让各个组件实例维护各自的数据。而单纯的写成对象形式就使得所有组件实例共用一份data就会造成一个变了会导致全变的结果 六.Proxy相比于defineProperty的优势在哪里
Vue3.x改用了Proxy来替代Object.defineProperty
原因在于Object.defineProperty本身存在一些问题
Object.defineProperty只能劫持对象属性的getter和setter方法。Object.defineProperty不支持数组可以监听数组不过数组方法无法监听自己重写更准确的说是不支持数组的各种API所以Vue重写了数组方法
而相比于Object.definePropertyProxy的优点在于
Proxy是直接代理劫持整个对象Proxy可以监听对象和数组的变化并且有多达13种拦截方法。 七.说一下watch与computed的区别是什么以及他们的使用场景分别是什么
区别如下 都是观察数据变化的相同点计算属性将会混入到vue实例中所以需要监听自定义变量watch监听dataprops里面数据的变化。computed有缓存它依赖的值发生了变化才会重新计算watch没有watch支持异步computed不支持watch是一对多computed是多对一监听属性依赖于其他元素watch监听函数接收两个参数第一个是最新值第二个是输入之前的值computed属性是函数时都有get和set方法默认走get方法get方法必须有返回值。
watch的参数
deep深度监听immediate组件加载立即触发回调函数执行
computed的缓存原理
computed本质是一个惰性的观察者当计算数据存在于data或者是props里时挥别警告 八.scoped是如何实现样式穿透
首先说一下什么场景下需要scoped样式穿透
在很多项目中会出现这么一种情况即引用了第三方组件需要在组件中局部修改第三方组件的样式而又不想去除scoped属性造成的组件之间的样式污染。此时只能通过特殊的方式穿透scoped。
有三种方式来实现样式穿透
方法一
使用::v-deep操作符的别名
如果希望scoped样式中一个选择器能够作用更深例如影响子组件可以使用操作符
style scoped.a .b { /* ... */ }/style上述代码将会编译成
.a[data-v-f3f3eg9] .b { /* ... */ }后面的类名没有data属性所以能选到子组件里面的类名。
方法二
定义一个含有scoped属性的style标签之外在定义一个不含scoped属性的style标签即在一个vue组件定义一个全局的style标签一个含有作用域的style标签。
style/* global styles *//stylestyle scoped/* local styles *//style此时我们只需要将修改的第三方样式的css写到第一个style标签里面即可、
第三个方法
上面的方法一需要单独书写一个不含有 scoped 属性的 style 标签可能会造成全局样式的污染。
更推荐的方式是在组件的外层 DOM 上添加唯一的 class 来区分不同组件在书写样式时就可以正常针对针对这部分 DOM 书写样式。 九.说一下vue模板编译的原理是什么
简单说Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段
生成AST树优化codegen
首先解析模板生成AST语法树一种用JavaScript对象的形式来描述整个模板。
使用大量的正则表达式对模板进行解析遇到标签文本的时候都会执行对于的钩子进行相关处理。
Vue的数据是响应式的但其实模板中并不是所有的数据都是响应式的。有些数据首次渲染后就不会再变化。那么优化过程就是深度遍历AST树按照相关条件对树节点进行标记。这些被标记的节点静态节点我们就可以跳过对他们的对比对运行时的模板起到很大的优化作用。
编译的最后一步是将优化后的AST树转换为可执行的代码。 十.Vue的数据为什么频繁变化但只会更新一次
这是因为vue的Dom更新是一个异步操作在数据更新后会首先被set钩子函数监听到但是不会马上执行DOM更新而是在下一轮循环中执行更新。
具体实现是vue中实现了一个queue队列用于存放本次事件循环中的所有watcher更新并且同一个watcher的更新只会被推入队列一次并在本轮事件循环的微任务执行结束后执行此更新这就是DOM只会更新一次的原因。
这种在缓冲时去除重复数据对于避免不必要的计算和dom操作是非常重要的。然后在下一个的事件循环“tick”中vue刷新队列并执行实际工作。vue在内部对异步队列尝试使用原生Promise.thenMutationObserve和setImmediate如果执行环境不支持则会采用setTimeout(fn,0代替
