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中如何定义数据的文章就介绍到这了,更多相关Vue定义数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

    前言 在开发的过程中,定义变量是一件非常高频且十分基础的事情,如何合理的根据变量的使用场景和作用域范围进行定义变量,是一件很小缺很容易犯错的事情 Vue2已经流行使用了这么多年,多数开发者在开发过程中喜爱在data选项中梭哈定义很多变量,这样做非常不利于代码的阅读性.维护性和性能,想要很好的使用变量,需要结合Vue和JS的特性 在Vue中,按照是否需要双向数据绑定,可以将变量分为两种: 一种是需要被Vue的数据劫持,将data的变化实时响应到view上 只要data只能够的msg变化, temp

  • Canvas中绘制Geojson数据示例详解

    目录 需求分析 数据处理 将经度和纬度单独拆分出来 计算缩放比例 计算偏移度 将 Coordinates 进行缩放 使用 Canvas 进行绘制 需求分析 在做地图开发的时候遇到一个需求,是在 canvas 中绘制 Geojson 数据 数据格式为 EPSG:4326 的 Polygon: 三维数组 每一项都是由经纬度组成的 第一个点和最后一个点相同,表示 Polygon 是闭合的 [ [ [109.54420471485196, 35.76192112844663], [109.5442361

  • vue中使用geobuf的示例详解

    需要安装geobuf和pbf这两个库 cnpm i -S geobuf pbf 引入 import geobuf from 'geobuf'; import Pbf from 'pbf'; 使用: let geojson_multiPolygon = { type: 'Feature', properties: {}, geometry: { type: 'MultiPolygon', coordinates: [ [ [ [109.2041015625, 30.088107753367257]

  • Vue中使用Ueditor的示例详解

    目录 一.下载Ueditor包 二.编译下载文件 三.在Vue项目中引用 一.下载Ueditor包 官网地址:http://fex.baidu.com/ueditor/ git地址: https://github.com/fex-team/ueditor 打开下载后的文件,大致目录,不会有较大差别 二.编译下载文件 1.执行命令安装依赖: npm install 2.全局安装Grunt-cli: npm install -g grunt-cli 3.安装到本地: npm install grun

  • 如何优雅地在vue中添加权限控制示例详解

    前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制. 第一个是侧边菜单栏,需要控制显示与隐藏. 第二个就是页面内的各个按钮,弹窗等. 流程 1.如何获取用户权限? 后端(当前用户拥有的权限列表)-> 前端(通过后端的接口获取到,下文中我们把当前用户的权限列表叫做 permissi

  • Vue extends 属性的用法示例详解

    目录 引言 App.vue Son.vue HelloWorld.vue 小结 引言 最近在看抖音——<小山与 bug>,看到一个很神奇的 Vue 继承组件的方法,后来专门去翻了 element 和 iview 的源码,发现这个属性的用法好像在这些框架里还没有用到过,怀着试一试的态度,我就自己搭建了个测试项目,发现其实还是挺好用的,甚至有望代替目前我们前端框架业务代码混入的底层实现.话不多说,直接上代码: App.vue <template> <div> <Son

  • vue 之 .sync 修饰符示例详解

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行"双向绑定". 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值. 这很方便,但也会导致问题,因为它破坏了单向数据流.(数据自上而下流,事件自下而上走) 由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态. 这在 debug 复杂

  • 发布订阅模式在vue中的实际运用实例详解

    订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key]

  • Vue响应式原理的示例详解

    Vue 最独特的特性之一,是非侵入式的响应系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟. 为了通俗易懂,我们还是从一个小的示例开始: <body> <div id="app"> {{ message }} </div> <script> v

  • 八个Vue中常用的v指令详解

    目录 Vue中常用的8种v指令 1 v-text 指令 2 v-html 指令 3 v-on 指令 案例:计数器 4 v-show 指令 5 v-if 指令 6 v-bind 指令 7 v-for 指令 8 v-on 补充 总结 Vue中常用的8种v指令 根据官网的介绍,指令 是带有 v- 前缀的特殊属性.通过指令来操作DOM元素 指令 功能 v-text=“变量/表达式” 文本的设置字符串变量+数字可以直接写是拼接字符串如果出现要使用外部不相同的引号 v-html=“变量” 文本或者页面的设置

随机推荐