![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 76
要不要买菜啊
这个作者很懒,什么都没留下…
展开
-
为什么Vue组件中的data是一个函数
组件的创建就是被用来复用的,若A界面改变了A组件的data数据,B界面在使用A组件时,其中的数据也会随着A界面的改变 而变化,这是我们不希望看到的,因此通过函数的方式,在每次调用data函数式,都返回一个新的对象,就可以保证各个组件都有自己的一套独立的数据,不会互相造成影响。不同功能区域划分为不同的组件,多个界面共同使用的组件可抽象位公共组件进行复用。当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。.......原创 2022-08-09 16:57:40 · 419 阅读 · 0 评论 -
vue 插槽
插槽就是子组件中用slot标签定义的预留位置,可以设置name属性,也可以不设置name属性,设置name属性的叫具名插槽,不设置name属性的叫不具名插槽,在父组件中使用子组件时候,可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。通俗点说,就是在子组件中挖个坑,在父组件使用子组件时,就会向子组件内埋点土。插槽使用的关键在于:在父组件中使用子组件标签的时候可以往子组件内写入html代码。子组件中定义插槽;父组件使用子组件时往插槽写入代码;简单的举原创 2022-06-30 20:24:44 · 93 阅读 · 0 评论 -
虚拟DOM(VNode Virtul DOM )
目录分析思路回答范例一、前言二、render函数三、render函数应用四、深入数据对象六、总结备注现有框架几乎都引入了虚拟 DOM 来对真实 DOM 进行抽象,也就是现在大家所熟知的 VNode 和 VDOM,那么为什么需要引入虚拟 DOM 呢?围绕这个疑问来解答即可!虚拟dom顾名思义就是虚拟的dom对象,它本身就是一个 对象,只不过它是通过不同的属性去描述一个视图结构。通过引入vdom我们可以获得如下好处:将真实元素节点抽象成 VNode,有效减少直接操作 dom 次数,从而提高程序性能方便实现跨平原创 2022-06-30 16:51:44 · 558 阅读 · 0 评论 -
Vue进阶:mixins 学习
在开发前端项目的时候,经常会遇到这样一种开发场景:多个模板页中应用的组件或者页面布局非常相似,比如较为熟悉的、和等页面布局。这时候就会考虑:是把它们拆分成多个不同的组件呢?还是只使用一个组件,创建足够的属性来改变不同的情况。这些解决方案都不够完美。如果拆分成多个组件,就不得不冒着如果功能变动你要在多个文件中更新它的风险。另一方面,太多的组件会很快变得混乱,难于维护,甚至对于组件开发者自已而言,也是件难事。在中,对于这样的场景,官方提供了一种叫混入()的特性。使用允许你封装一块在应用的其他组件中都可以使用的函转载 2022-06-30 11:13:28 · 185 阅读 · 0 评论 -
Vuex状态(数据)管理
vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有:单页应用中,组件之间的状态,音乐播放、登录状态、加入购物车等。2)vuex有哪几种属性?有五种,分别是 State、 Getter、Mutation 、Action、 Module。3) vuex的State特性Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于一般Vue对象里面的data。state里面存放的数据是响应式的,Vue组件从store中读取数据,若是s原创 2022-06-30 09:24:26 · 160 阅读 · 0 评论 -
实现路由跳转的方式
直接写在html中,结构简单使用方便,但是只能放在标签中使用,标签会将路由转成标签,通过点击跳转路由,因此局限性也非常大编程式路由导航需要写在js中,结构也不算复杂,优势在于非常灵活,不受固定标签限制,可以在任意情景下转跳路由在Vue里,可以通过vm的$router对象来进行路由的管理这里区分一下 route 和 route和route和router,顾名思义,$route是当前路由组件激活的对象,里面是当前路由组件的一些信息,比如para......原创 2022-06-29 22:16:10 · 1684 阅读 · 0 评论 -
路由守卫
作用:分类全局守卫:全局前置守卫 beforeEach()全局后置守卫 afterEach() 独享守卫 beforeEnter()组件内守卫进入守卫:beforeRouteEnter 路由更新守卫:beforeRouteUpdate离开守卫:beforeRouteLeave对路由进行权限控制执行时机:初始化是执行、每次路由切换前执行全局后置守卫 afterEach()执行时机:初始化时执行、每次路由切换后执行 独享守卫 beforeEnter()组件内守卫进入守卫:befor原创 2022-06-29 20:08:18 · 210 阅读 · 0 评论 -
vue组件缓存
先来看看官网对keep-alive的一些功能说明:组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。就可以使用到keep-alive,它可以用来进行动态组件的缓存组件复用,提高性能缓存不太使用的组件,而不是直接销毁在实际项目开发的时候,我们可能需要具体的某个项目可以进行缓存,那么如何通过keep-alive来实现呢?include: [String,RegExp,Array] 只有匹配到的组件才能进行缓存exclude:[String,RegExp,Array] 匹原创 2022-06-28 21:38:00 · 5803 阅读 · 0 评论 -
watch和computed的区别以及选择?
两个重要API,反应应聘者熟练程度。computed 用来监控自己定义的变量,该变量在 data 内没有声明,直接在 computed 里面定义,页面上可直接使用。在输入框中,改变 name 值得时候,msg 也会跟着改变。这是因为 computed 监听自己的属性 msg,发现 name 一旦变动,msg 立马会更新。注意:msg 不可在 data 中定义,否则会报错(计算属性不可在data中定义,会报错)get 方法:first 和 second 改变时,会调用 get 方法,更新 full原创 2022-06-28 16:15:41 · 839 阅读 · 0 评论 -
v-if和v-for哪个优先级更高?
此题考查常识,文档中曾有详细说明v2|v3;也是一个很好的实践题目,项目中经常会遇到,能够看出面试者应用能力。在 中, 优先于 被解析;但在 中,则完全相反, 的优先级高于 。我曾经做过实验,把它们放在一起,输出的渲染函数中可以看出会先执行循环再判断条件实践中也不应该把它们放一起,因为哪怕我们只渲染列表中一小部分元素,也得在每次重渲染的时候遍历整个列表。通常有两种情况下导致我们这样做:为了过滤列表中的项目 (比如 )。此时定义一个计算属性 (比如 ),让其返回过滤后的列表即可。为了避免渲染本应该被隐藏转载 2022-06-28 14:16:10 · 346 阅读 · 0 评论 -
vue 组件之间的通信方式
组件是 vue.js 最强大的功能之一,而组件实例的 作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件之间的相互通信是十分有必要的。父组件向子组件传送数据,这应该是最常用的方式了子组件接收到数据之后,不能直接修改父组件的数据。会报错,所以当父组件重新渲染时,数据会被覆盖。如果子组件内要修改的话推荐使用 computed2. refref 如果在普通的DOM元素上,引用指向的就是该DOM元素;如果在子组件上,引用的指向就是子组件实例,然后父组件就可以通过 ref 主动原创 2022-06-28 11:29:49 · 137 阅读 · 0 评论 -
前端路由 vue-router ?
路由就是SPA(单页面应用的路径管理器),适用于构建单页面应用。Vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和内容映射起来。传统的多页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则表现为路径之间的切换,也就是组件的切换。路由模块的本质是建立起 url 和 页面 之间的映射关系。SPA(single page application):单页面应用程序,只有一个完整的页面,在加载页面时,不会加载整个页面,只是更新某个指定容器中的内容。SPA核心之一是转载 2022-06-28 10:13:34 · 116 阅读 · 0 评论 -
SPA单页面应用
SPA(Single-page application)仅在 Web页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转,取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。补充:为什么单页面应用最好前后端分离?前端项目要自己管理路由,如果是单页面的话,路由切换不需要经过后端,前端可以很方便的管理,包括状态。如果多页面的话,前端路由在切换的时候,就需要提交到后端,跳页。这样路由管理就麻原创 2022-06-27 21:39:22 · 231 阅读 · 0 评论 -
Vue是如何实现数据双向绑定的?
有没有想过,我们在做原生页面开发时,有涉及到“数据绑定“的概念吗?答案肯定是有的,比如下面的例子:通过 JavaScript 控制 DOM 的展示,就是数据(Data)到模板(DOM)的绑定,这就是数据单向绑定。而双向绑定就是在这个基础上,又扩展了反向的绑定效果,就是模板到数据的绑定。上面的例子扩展以下:我们将与单向绑定的却别是,数据与模板是相互影响的,一方发生变化,另一方立即做出更新。在这个简单的例子中,我们认识了双向绑定,Vue便是在此概念下进行模块化抽象封装。上面的例子中,我们看到原创 2022-06-20 15:22:14 · 5853 阅读 · 1 评论 -
Vue组件通信方式
第一种:props适用场景:注意事项:路由的props配置项第二种:自定义事件适用场景:使用:第三种:全局事件总线($bus)适用场景:使用:第四种 :消息订阅与发布 pubsub-js第五种:vuex适用场景:第六种:插槽适用场景1. 默认插槽:2. 具名插槽:3. 作用域插槽:第一种:props适用场景:父子组件通信注意事项:1. 如果是父组件给子组件传递数据(函数):本质就是子组件给父组件传递数据2....原创 2022-05-26 21:28:40 · 54 阅读 · 0 评论