![](https://img-blog.csdnimg.cn/20210111202727320.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue问题
文章平均质量分 56
Vue常见问题
IamSmaLLR.
这个作者很懒,什么都没留下…
展开
-
Vue中computed和watch的区别
计算属性computed :1.支持缓存,只有依赖数据发生改变,才会重新进行计算2.不支持异步,当computed内有异步操作时无效,无法监听数据的变化3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed5.如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就原创 2021-03-04 23:22:34 · 153 阅读 · 1 评论 -
vue常见问题总结
vue中的数组的监听不是通过Object.defineProperty来实现的,是通过对’push’,‘pop’,‘shift’,‘unshift’,‘splice’, ‘sort’,'reverse’这几个改变数组本身的方法执行后来通知监听达到的 ...原创 2020-12-17 08:01:58 · 159 阅读 · 0 评论 -
vue组件间通信
1.方法一 props/emit,A组件中的v-on方式实现(子组件向父组件传值)通过事件形式 子组件通过event给父组件发送消息,实际上就是子组件把自己的数据发送到父组件 2.方法二 on这种方法通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括 父子/兄弟/跨级 3.方法三 vuex 4.方法四 listeners 5.方...原创 2020-11-20 23:33:05 · 62 阅读 · 0 评论 -
vue2.0和3.0的区别
1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:•可直接监听数组类型的数据变化•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升•可拦截apply、ownKeys、has等13种方法,而Object.defineProperty不行•直接实现对象属性的新增/删除2.新增Composition API,更好的逻辑复用和代码组织3.重构 Virtual DOM•模板编译时的优化,将一些静原创 2021-02-24 11:50:10 · 1209 阅读 · 0 评论 -
vue中的缓存组件(keep-alive)
当我们进行频换切换,不需要重复渲染的时候,比如tab栏切换,就可以利用keep-alive缓存组件,不需要重复加载,也是提高vue性能的一个方式。keep-alive是什么?keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态。keep-al原创 2021-02-28 00:35:54 · 4079 阅读 · 1 评论 -
vue中v-if 和 v-show的区别
1.共同点:v-if 和 v-show 都可以动态地显示DOM元素2.区别(1)手段:v-if 是动态的向DOM树内添加或者删除DOM元素;v-show 是通过设置DOM元素的display样式属性控制显隐;(2)编译过程:v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;(3)编译条件:v-if 是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再原创 2021-02-23 21:33:59 · 3795 阅读 · 0 评论 -
Vue中computed与method之间的区别
##一、computed与methods的区别:1.实质上computed计算属性中定义的是属性而不是函数,所以使用时直接用{{xxx}},而不要使用{{xxx()}};——后面详细说明而methods中定义的是函数,因此使用时需要{{xxx()}}。2.计算属性computed被使用时会进行缓存,如果需要多次使用,则只需要调用1次;而methods中的函数无缓存,如果需要使用n次,则需要调用n次。因此,需要多次使用时,推荐使用计算属性computed。##二、为什么使用计算属性compute原创 2021-01-12 23:21:31 · 1191 阅读 · 0 评论 -
Vue-Router内部原理
https://www.jianshu.com/p/4295aec31302随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高,单页应用(SPA)成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统,通过改变URL,在不重新请求页面的情况下,更新页面视图。请在这里输入引用内容“更新视图但不重新请求页面”是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有两种方式:1.利用URL中的hash(“#”)2.利用History interface在 HTML原创 2021-01-11 23:55:01 · 225 阅读 · 0 评论 -
vue双向绑定原理
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。通过Object.defineProperty()来劫持属性的,使用属性的时候触发getter函数,收集依赖;修改属性的时候触发setter函数,触发相应的回调。 Observer 对数据的属性进行递归遍历...原创 2020-11-03 06:05:17 · 76 阅读 · 0 评论 -
Vue的生命周期
(1) beforeCreate : 实例创建之前,这个时候vue的实例上只有一些生命周期函数 , data和methods还不能使用 (2) created : 创建结束的时候,vue实例上的data 和 methods就能正常使用了 最早可以在created里使用data和methods (3) beforeMount : 挂载之前 模板进行编译, 把指令循环插值语句都进行执行,生成一个虚拟...原创 2020-09-14 03:16:53 · 63 阅读 · 0 评论 -
Vuex
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享Vuex实现了单向数据流,在全局拥有一个state存放数据,当组件要修改state里的数据时,必须通过mutation进行,mutation同时提供了订阅者模式供外部插件调用获取state数据的更新。当有所有异步操作或批量的同步操作需要走action,但action也无法直接修改state,还是要通过mutatio...原创 2020-09-13 04:01:57 · 56 阅读 · 0 评论 -
vue 虚拟DOM和diff算法
patching算法(diff算法)是虚拟dom技术的必然产物,通过新旧虚拟DOM作比对(即diff),将变化的地方更新在真实DOM上;另外,也需要diff高效的执行比对过程,从而降低时间复杂度O(n)。vue2.0为了降低watcher的粒度,从细粒度转变为了中等粒度,每个组件只有一个watcher与之对应,只有引入diff才能精确找到发生变化的地方。vue中diff执行的时刻是组件实例执行其...原创 2020-09-16 08:09:04 · 205 阅读 · 0 评论 -
Vue 路由钩子函数
https://www.jianshu.com/p/ddcb7ba28c5e原创 2020-12-17 09:22:01 · 56 阅读 · 0 评论 -
Vue渲染为什么是异步更新渲染?
如果不采取异步更新,那么每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue 会在本轮数据更新后,再去异步更新数据。原创 2020-12-17 04:06:12 · 508 阅读 · 1 评论 -
Vue中模板渲染列表中key的作用
这个属性用来标识一个节点的唯一ID。在更新子节点时,需要在oldchildren中循环找一个节点。但是如果我们在模板中渲染列表的时候,为每个子节点设置了属性key,那么建立key与index索引的对应关系式,就生成了一个key对应着一个节点下标这么一个对象。如果在每个子节点上设置了key,在oldchildren中找相同节点时,可以通过key拿到下标,从而获取节点,这样就不需要进行循环来查找节点...原创 2020-11-26 02:23:29 · 249 阅读 · 0 评论