vue篇
vue框架学习过程中的心得。
每月一瓶米诺地尔
这个作者很懒,什么都没留下…
展开
-
前端面试之插槽——默认插槽、具名插槽、作用域插槽!
1.作用:让父组件可以向子组件指定位置插入html结构,也是组件通信的一种方式,适用于父组件===》子组件。2.分类:默认插槽、具名插槽、作用域插槽。翻译 2023-11-11 15:34:30 · 99 阅读 · 0 评论 -
前端面试——pinia和Vuex的区别?
总之,Pinia 和 Vuex 都可以用于状态管理,但选择取决于你的项目需求和技术栈。如果你在一个 Vue 3 项目中使用 TypeScript 并希望更模块化和类型安全的状态管理,那么Pinia可能是一个更好的选择。如果你正在使用 Vue 2 或只需要一个简单的状态管理解决方案,那么Vuex可能更合适。原创 2023-11-03 10:26:16 · 291 阅读 · 0 评论 -
前端面试Vue篇——vue有哪儿些内置指令?
7、v-text和v-html:v-html可以转义标签和渲染数据,v-text不会转义标签只能渲染数据。10、v-cloak:通常与css编译使用,用于在vue实例加载和编译之前隐藏元素。9、v-pre:跳过这个元素及子元素的编译过程,以此来加快整个项目的编译速度。4、v-if、v-else、v-else-if多重判断。5、v-bind绑定属性(v-bind:class)6、v-on绑定事件 (v-on:click)8、v-once:元素只渲染一次。1、v-for循环便利渲染元素。原创 2023-10-20 17:01:51 · 51 阅读 · 0 评论 -
前端面试Vue篇目——有了解过vue修饰符吗?
2:自定义事件绑定事件需要添加.native,否则事件无效。1:普通组件绑定事件不能添加.native,添加事件后无效。原创 2023-10-20 16:34:36 · 27 阅读 · 0 评论 -
前端面试——Vue篇(什么是虚拟DOM?什么是diff算法?循环中key的作用?)
虚拟DOM就是用普通的js来描述的一种DOM结果,因为不是真实的DOM,所以称之为虚拟DOM。diff算法是一种对比算法,用来对比新旧虚拟DOM,从而最小程度的更新视图。没有用到key的diff算法:假设我们有一个数组【A,B,C,D,E】,在索引为2的地方插入‘DDD’,那么新的数组就为【A,B,C,DDD,D,E】,看了diff算法的源码,大致上就是虚拟DOM会有一个新的vNode和旧的vNode,然后新旧vnode会进行一个替换,新增和删除,性能不是特别高。原创 2023-09-09 16:24:06 · 71 阅读 · 0 评论 -
前端面试——Vue篇(父子组件生命周期执行顺序?)
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted。父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed。父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated。转载 2023-09-04 17:59:19 · 192 阅读 · 1 评论 -
前端面试——Vue篇(关于数据代理)
(1)通过Object.defineProtory()把data对象中的所有属性添加到vm上。(3)在getter/setter内部去操作(读/写)data中对应的属性。(2)为每一个添加搭配vm上的属性,都指定一个getter/setter。通过vm对象来代理data对象中属性的操作(读/写)。更加方便的操作data中的数据。原创 2023-09-01 09:11:22 · 45 阅读 · 1 评论 -
前端面试——Vue篇(Vue2和Vue3的区别?)
vue2:vue2是把数据放入data中,在vue2中定义数据变量是data(){},创建的方法要在methods:{}中。vue3:,vue3就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。从vue引入reactive;使用reactive()方法来声明数据为响应性数据;使用setup()方法来返回我们的响应性数据,从而template可以获取这些响应性数据。转载 2023-08-29 18:07:15 · 63 阅读 · 1 评论 -
前端面试——Vue篇(什么是MVVM ?)
MVVM即M、V、VM,M是model模型,V是视图,VM是视图模型,在vue文件里,M是指data中的数据,V是div里的内容,VM是vue实例。Vue是实现了双向绑定的MVVM框架,当视图改变更新模型层,当模型层改变更新视图层。在vue中,使用了双向绑定技术,就是view的变化能实时让model发生变化,而model的变化也能实时更新到View。(3)VM:视图模型(ViewModel):Vue实例对象。(1)M:模型(Model):对应data中的数据。(2)V:视图(View):模板。原创 2023-08-17 11:21:28 · 119 阅读 · 1 评论 -
前端面试——Vue篇(computed和watch的区别?)
2.computed支持缓存,依赖的属性值发生变化,计算属性才会重新计算,然而watch不支持缓存。1.computed是计算属性,watch是监听,监听数据的变化。5.computed函数中必须有return,watch不用。4.computed是第一次加载就监听,watch是不监听。3.computed不支持异步,然而watch支持异步。原创 2023-07-24 17:54:51 · 121 阅读 · 0 评论 -
前端面试——Vue篇(v-show和v-if的区别以及使用场景?)
v-if适用于不需要频繁切换元素显示和隐藏的情况。(比如组件重置,其实就是给这个组件v-if,然后给false,再给true就可以了)。v-show只是对当前dom进行显示或者隐藏,相当于display:none或者black。v-if如果条件不成立不会渲染当前指令所在节点dom元素,是不存在dom元素的。v-show有更高的首次渲染开销,而v-if的首次渲染开销要小的多。v-show适用于需要频繁切换元素的显示和隐藏的场景。v-if有更高的切换开销,v-show切换开销小。原创 2023-07-24 17:49:23 · 55 阅读 · 0 评论 -
前端面试——Vue篇(v-for和v-if为什么不能连用?)
(1)在vue2.x中,v-for的优先级高于v-if的优先级,当同时使用时,会导致v-if没有判断时,元素已经被渲染了一部分。(2)在vue3.x中,v-if的优先级高于v-for的优先级,因此v-if执行时要调用的变量可能还不存在,会导致报错。在vue的官方文档中,明确说明不建议v-for和v-if同时使用,因为他们的优先级不同。原创 2023-07-24 17:36:26 · 396 阅读 · 0 评论 -
前端面试——Vue篇(有了解过Vuex吗?)
state里面用于存储数据,mutations用于操作数据,相当于methods,actions用于响应组件中的动作,getters用于对state中的数据进行加工,相当于computed,还有就是modules,当vuex要进行模块儿化处理的时候,会用到modules,在store下面的index.js里面export default 子模块通过modules包裹。vuex一共有五大属性,分别是state,mutations,actions,getters,modules。原创 2023-07-24 17:25:41 · 26 阅读 · 0 评论 -
前端面试——Vue篇(导航守卫)
我们想通过直接访问一个url而去得到登录后的页面,这显然是不严谨的,为了让其严谨起来,我们通过设置路由路由导航守卫(也就是拦截),在登录之前做一个拦截判断。是一个方法,可以接收参数。如果不使用就跳转不过去。你可以吧next看做一个保安,必须要跟next打个招呼才可以通过。next('./XX') ==>就意思是保安不让过,你可以去另外一个设置好的地方。next() ==> 就是告诉保安要过去,去哪儿里就是to。next(false)==> 可以不通过,中断跳转。补充:(举个全局导航守卫的例子)原创 2023-07-24 17:21:55 · 50 阅读 · 0 评论 -
前端面试——Vue篇(组件传值/通信方式)
前端面试——Vue篇(关于组件传值/通信方式)原创 2023-07-19 18:06:35 · 146 阅读 · 0 评论 -
前端面试——Vue篇(路由传参的几种方式)
前端面试——Vue篇(关于路由传参的几种方式)原创 2023-07-19 17:54:17 · 118 阅读 · 0 评论