![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
累了你就写会代码吧
越自律,越自由
展开
-
Vue 3.0 在编译方面有哪些优化
静态Node不再作更新处理(hoistStatic -> SSR 优化)静态绑定的class、id不再作更新处理结合打包Hint,进行更新分析(动态绑定)事件监听器Cache缓存处理(cacheHandles)针对静态节点的优化:Virtual DOM机制调整内存优化,更少的占用按需加载,更灵活的组件化...原创 2020-12-05 15:20:53 · 434 阅读 · 0 评论 -
Proxy 相对于 Object.defineProperty 有哪些优点
Proxy 的优势如下:Proxy 可以直接监听对象而非属性;Proxy 可以直接监听数组的变化;Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的;Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改;Proxy 作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利;转载 2020-12-05 15:16:47 · 855 阅读 · 0 评论 -
Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别
Options APIvue2中如何组织代码的:我们会在一个vue文件中data,methods,computed,watch中定义属性和方法,共同处理页面逻辑缺点: 一个功能往往需要在不同的vue配置项中定义属性和方法,比较分散,项目小还好,清晰明了,但是项目大了后,一个methods中可能包含很多个方法,往往分不清哪个方法对应着哪个功能优点:新手入门会比较简单Composition API在vue3 Composition API 中,代码是根据逻辑功能来组织的,一个功能的所有api会放原创 2020-12-05 15:09:21 · 1079 阅读 · 0 评论 -
VUE3.0的性能提升主要通过哪几方面体现的
重写虚拟dom,效果显著提升 Vue3 新增了静态标记(PatchFlag),只比对带有 PF 的节点 跳过静态(常量)节点,只处理动态(模板)节点。从而提升巨大性能提升网络加载性能:tree-shaking机制解释:把无用的模块进行“剪切”,很多没有用到的API就不会打包到最后的包里vue3一个比较大的显著的区别就是,当你用一个bundler的时候,比如webpack或者rollup,webpack和rollup都是有tree shaking功能,但是tree shaking的前提是所有的东原创 2020-12-05 14:56:31 · 450 阅读 · 0 评论 -
关于vue面试官常问的问题2
1、请简述 Vue 首次渲染的过程。首先进行Vue的初始化,初始化Vue的实例成员、静态成员始化结束之后,定义了构造函数,调用了this._init(options)方法在_init()中调用this.$mount()说明:$mount()的核心作用是帮我们把模板编译成render函数,但它首先会判断当前是否传入了render选项,如果没有传入的话,它会去获取我们的template选项,如果template选项也没有的话,他会把el中的内容作为我们的模板,然后把模板编译成render函数,它是通原创 2020-12-07 11:59:45 · 118 阅读 · 0 评论 -
关于vue面试官常问的问题1
1、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据,如果不是的话,如果把新增成员设置成响应式数据,它的内部原理是什么。let vm = new Vue({ el: '#el' data: { o: 'object', dog: {} }, method: { clickHandler () { // 该 name 属性是否是响应式的 this.dog.name = 'Trump原创 2020-12-07 11:55:39 · 577 阅读 · 0 评论 -
使用vue写一个自动播放的按钮组件
<template> <section :class="['music', { playing }]" @click="toggleMusic"> <audio loop id="audio" autoplay preload> <source src="" /> </audio> </section></template><script>export default {原创 2020-12-05 15:46:17 · 405 阅读 · 0 评论 -
Vue.js 3.0 响应式系统的实现原理和方式
vue3.0 建立响应式的方法有两种:第一个就是运用composition-api中的reactive直接构建响应式,composition-api的出现我们可以在.vue文件中,直接用setup()函数来处理之前的大部分逻辑,也就是说我们没有必要在 export default{ } 中在声明生命周期 , data(){} 函数,watch{} , computed{} 等 ,取而代之的是我们在setup函数中,用vue3.0 reactive watch 生命周期api来到达同样的效果,这样就像re原创 2020-12-05 15:32:55 · 364 阅读 · 0 评论