首页 > 其他分享 >vue-computed

vue-computed

时间:2023-08-25 16:35:11浏览次数:35  
标签:缓存 定义 computed watch vue 计算 属性

使用场景和方法:

1、当数据A的逻辑很复杂时,把A这个数据写在计算属性中。

2、在computed中定义一个函数(看起来是一个函数,其实是一个属性)

3、通过选项computed:{计算属性a:值}。带有返回值return的函数。

特点:

  • 监听值未在data中定义,以return返回值形式;

  • 计算属性变量在computed中定义,属性监听在data中定义。

  • 计算属性默认只有get来读取,手动修改计算属性时,会触发手写的set函数。

  • 计算属性的值会被缓存,只有实例中相关依赖值改变时,才重新计算,性能好但不适合做异步请求。

  • 计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数

 

computed 和 methods 区别:

1、理论上,computed 所有实现可以使用 methods 完全替换

2、计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 a 还没有发生改变,多次访问 a()计算属性会立即返回之前的计算结果,而不必再次执行函数。而方法却会执行

3、我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

computedwatch 区别:

1、Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch,然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

2、当需要在数据变化时执行异步或开销较大的操作时, watch 方式是最有用的。其允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

 

标签:缓存,定义,computed,watch,vue,计算,属性
From: https://www.cnblogs.com/yjh1995/p/17657276.html

相关文章

  • vue-this关键字
    vue中,在script中调用属性和方法,需要使用this在template使用属性、方法,可以省略this:因为vue在解析template时使用了with(this),改变了template中的顶层作用域......
  • [ Vue ] opensslErrorStack: [ ‘error:03000086:digital envelope routines::initial
    报错触发场景:Mac系统,开发工具启动从其他地方拷贝或者git克隆来的,非自建前端Vue项目时。报错内容如下: opensslErrorStack:['error:03000086:digitalenveloperoutines::initializationerror'], library:'digitalenveloperoutines', reason:'unsupported', code......
  • vue3 监听容器滚动到底部
    在容器里面添加@scroll事件<template><div@scroll="scrolling"id="content"><pv-for="iinArray.from({length:30},(v,i)=>i)">{{i}}</p></div><divv-if="bottom"......
  • Vue3内置组件suspense用法
    1、作用在使用异步组件时,由于需要等待组件加载完成后才能显示,因此可能会出现页面空白或显示错误信息的情况。而Suspense组件的作用就是在异步组件加载完成前显示一个占位符,提高用户体验。2、用法首先子组件AsyncShow:使用了promise包裹代码<template><div><h1>{{re......
  • vue-cli4 配置不同开发环境打包命令
    #......
  • vue监听对象属性值发生变化
    监听对象属性object里面属性值的变化。exportdefault{data(){return{object:{username:'',password:''}}}} 方法一:直接根据watch来监听。exportdefault{data(){......
  • [转]vue中的css深度选择器 :deep(<inner-selector>)、/deep/、>>>、::v-deep 到底是什
    原文地址:vue中的css深度选择器:deep(<inner-selector>)、/deep/、>>>、::v-deep到底是什么?-掘金vue中的css深度选择器概念与作用当<style>标签有scoped属性时,它的CSS只作用于当前组件中的元素,父组件的样式将不会渗透到子组件。如果你希望scoped样式中的一个选......
  • vue~layout模板页的使用
    模板页的重要性Vue项目中使用布局组件来创建页面布局的方式是完全可行的,而且在很多项目中都被广泛采用,包括像ruoyi这样的框架。这种模式有助于实现统一的页面布局结构,减少重复代码,并提高代码的可维护性。让我们具体分析一下你提到的ruoyi框架的做法:Layout组件:layout/i......
  • localstorage本地存储及token,vuex刷新数据丢失问题⚡⚡⚡
    1.vuex和axios安装,引入,使用1.1vuexa安装和使用vuex3.x版本的官网安装教程:安装|Vuexvuex4.x版本的官网安装教程:安装|Vuexnpminstallvuex--save2.在src下新建文件夹store,并在文件夹中新建文件index.js,如下:importVuexfrom'vuex'//引入user模块化modules......
  • 导入导出(Excel)vue
     导入导出(Excel)首先 vue安装插件 (最后有完整代码)npm install xlsx file-saver其次:简单的导出按钮代码:<template>  <div>    <el-button type="primary" @click="exportExcel">导出 Excel</el-button>    <input      type="file&qu......