深圳南山区住房和建设局网站,国外网站如何做推广,网站设计建设制作,建设局合同备案是哪个网站Vue的学习之旅-part5 虚拟DOM的原理用JS模拟DOM结构 vue的方法、计算属性、过滤器computed:{} 计算属性computed计算属性的完全体computed计算属性和methods方法的区别#xff1a;过滤器#xff1a;filters:{ 多个方法 } Vuex 状态管理模式 前几篇博客: Vue的学习之旅-part1 … Vue的学习之旅-part5 虚拟DOM的原理用JS模拟DOM结构 vue的方法、计算属性、过滤器computed:{} 计算属性computed计算属性的完全体computed计算属性和methods方法的区别过滤器filters:{ 多个方法 } Vuex 状态管理模式 前几篇博客: Vue的学习之旅-part1 前几篇博客: Vue的学习之旅-part2 前几篇博客: Vue的学习之旅-part3 前几篇博客: Vue的学习之旅-part4 博主 DTcode7 带您 溺亖在知识的海洋里嘿嘿嘿.~ 个人主页—— DTcode7 的博客 《微信小程序相关博客》 《Vue相关博客》 《前端开发习惯与小技巧相关博客》 《AIGC相关博客》 《photoshop相关博客》 吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤 愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进 书接上回讲完了vue中自带的指令那这里接着从讲讲vue的虚拟DOM原理、vue的方法、计算属性、过滤器开始吧~
虚拟DOM的原理
vue先用JS来模拟DOM结构然后去进行一系列的计算计算出最小的变更然后再去操作DOM这样就最大程度上避免一些无用功的操作
用JS模拟DOM结构 通过diff算法找出变更的地方只修改那里大大减少dom的操作提升性能
vue的方法、计算属性、过滤器
computed:{} 计算属性
注意因为是属性里面的方法命名时尽量不要起名为getCount这样有get这种动词的名字直接叫做count就行这样才是属性
computed计算属性的完全体
computed计算属性一般我们用的是简写 这种简写等价于如下写法 computed计算属性的真正样子 完全体 如下 设置set方法后的使用 因为computed计算属性 是 属性所以调用其set方法就是直接赋值 调用get方法则是直接app.fullName 即可调用get方法
computed计算属性和methods方法的区别
computed计算属性中的方法在计算属性中会进行缓存多次调用时如果发现计算值没有发生变化则会直接使用上次的结果不再进行重复调用。 而methods方法调用几次就会执行击此每次重新执行损耗较大。
过滤器filters:{ 多个方法 }
一般用于处理时间格式、日期格式等地方 有些地方需要重复使用某种格式的时候可以通过使用fiters过滤器达到复用和简便的功能。
Vuex 状态管理模式
Vuex采用集中式存储的方法管理应用的所有组件的状态 如果不打算开发大型单页应用使用 Vuex 可能是繁琐冗余的。 如果应用够简单应该使用简单的 store 模式
