Vue中如何定义数据示例详解

前言

在开发的过程中,定义变量是一件非常高频且十分基础的事情,如何合理的根据变量的使用场景和作用域范围进行定义变量,是一件很小缺很容易犯错的事情

Vue2已经流行使用了这么多年,多数开发者在开发过程中喜爱在data选项中梭哈定义很多变量,这样做非常不利于代码的阅读性、维护性和性能,想要很好的使用变量,需要结合Vue和JS的特性

在Vue中,按照是否需要双向数据绑定,可以将变量分为两种:

一种是需要被Vue的数据劫持,将data的变化实时响应到view上

只要data只能够的msg变化, template中绑定的msg会实时响应

 <template>   <div>{{msg}}</div> </template>  <script> export default {   data() {     msg: ""    } }; </script> 

还有一种不需要被Vue数据劫持:

仅在script中生效,在template中没有使用,不需要数据劫持

name仅在concatName函数中生效,那么将其作为局部变量定义即可

age在函数getAge和concatName中都需要使用,作为局部变量使用不合适,那么可以将其作用域提升,方便在多个地方使用

 <script> const age = 'bar' export default {   methods: {     getAge() {       return age     },     concatName() {       let name = 'nordon'       reutrn `name:${name}, age: ${age} `     }   }, }; </script> 

仅仅是在template中作为渲染数据使用,自定义之后便不会在后续的操作中对其修改,这种数据如果使用Vue对其数据劫持会浪费一些性能

 <template>   <div v-for="item in arr">{{item.name}}</div> </template>  <script> const arr = Object.freeze([{   name: 'nordon',   age: 18 }]) export default {   data() {     return {       arr     }   } }; </script> 

使用Object.freeze将不需要数据劫持的数据进行冻结操作,在Vue中递归遍历数据进行数据劫持的时候便不会对其进行数据劫持,特别对于大量的表格类的数据性能提升会显著一些

可以从Vue源码中看到,为何使用了Object.freeze对数据处理之后,便不会再进行数据劫持

 function defineReactive (obj, key) {   // 删除无关代码 只保留了判断条件   const property = Object.getOwnPropertyDescriptor(obj, key)   if (property && property.configurable === false) {     return   } } 

总结

本站由小牛团队全力维护,小牛十年了,大家已经步入中年 。本站源码全部经过团队成员测试并调试,价格可能比其它网站略贵几元钱,不解释!
小牛资源 » Vue中如何定义数据示例详解

发表评论

全站资源亲测可用,价格略高几元,不解释

立即查看 了解详情