登录  /  注册
首页 > web前端 > Vue.js > 正文

一文了解Vue中怎么使用计算属性

青灯夜游
发布: 2021-12-03 19:30:26
转载
2367人浏览过

你知道什么时候用vue计算属性?怎么使用计算属性?下面本篇文章带大家了解一下vue计算属性,介绍一下vue计算属性的基础用法,希望对大家有所帮助。

一文了解Vue中怎么使用计算属性

计算属性

有些时候,我们在模板中放入了过多的逻辑,从而导致模板过重,且难以维护。例如:

<div id="app">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>
登录后复制

碰到这样的情况,我们必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串,而且,一旦我们想要在模板中多次使用翻转字符串时,会更加麻烦。 所以,当我们处理复杂逻辑时,都应该使用计算属性。【相关推荐:《vue.js教程》】

基础用法

计算属性是Vue配置对象中的属性,使用方式如下:

<div id="app">
   <!-- 计算属性的值可以像data数据一样,直接被使用 --> 
  {{ someComputed }}
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
     // 返回的值,就是计算属性的值
    someComputed () {
      return &#39;some values&#39;
    }
  }
})
登录后复制

例如,我们想要获取到一串字符串的翻转字符串,我们可以利用计算属性来做:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符处啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
登录后复制

我们可以看到,reversedMsg的值取决于msg的值,所以,当我们更改msg的值是,reversedMsg的值也会随之更改。

计算属性 vs 方法

其实,我们上述的功能,利用方法也可以实现,如:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  methods: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
登录后复制

虽然在表达式中调用方法也可以实现同样的效果,但是使用计算属性和使用方法有着本质的区别。 当使用方法时,每一次页面重新渲染,对应的方法都会重新执行一次,如:

<div id="app">
  <p>{{ name }}</p>
  <p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  methods: {
    reversedMsg: function () {
      console.log(&#39;方法执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;
登录后复制

在上面的例子中我们可以看到,一旦更改name的值,页面会重新渲染,此刻控制台中打印出方法执行啦这串字符串,代表着reversedMsg这个函数执行了,但是我们并不需要该方法执行,因为改动的数据和这个函数没有任何关系,如果这个函数内的逻辑很复杂,那么对于性能来讲,也是一种消耗。

但是利用计算属性做,就不会有这样的现象出现,如:

const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  computed: {
    reversedMsg: function () {
      console.log(&#39;计算执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;
登录后复制

此时可以看到,当给数据name重新赋值时,计算属性并没有执行。 所以,计算属性和方法的最本质的区别,是:计算属性是基于响应式依赖进行缓存的,计算属性的值一直存于缓存中,只要它依赖的data数据不改变,每次访问计算属性,都会立刻返回缓存的结果,而不是再次执行函数。而方法则是每次触发重新渲染,调用方法将总会再次执行函数。

那么,为什么需要缓存呢?

假如说,我们有一个计算属性A,它需要遍历一个巨大的数组并且做巨大的计算。然后我们需要使用到这个计算属性A,如果没有缓存,我们就会再次执行A的函数,这样性能开销就变得很大了。

深入计算属性

计算属性除了写成一个函数之外,还可以写成一个对象,对象内有两个属性,getter&setter,这两个属性皆为函数,写法如下:

const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
    fullName: {
      getter () {
         // 一些代码
      },
      setter () {
         // 一些代码
      }
    }
  }
})
登录后复制

getter 读取

在前面,我们直接将计算属性写成了一个函数,这个函数即为getter函数。也就是说,计算属性默认只有getter。 getter的this,被自动绑定为Vue实例。

何时执行?

当我们去获取某一个计算属性时,就会执行get函数。

const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
      }
    }
  }
})
登录后复制

setter 设置

可选,set函数在给计算属性重新赋值时会执行。 参数:为被重新设置的值。 setter的this,被自动绑定为Vue实例。

const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    firstStr: &#39;&#39;
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})
登录后复制

要注意,即使给计算属性赋了值,计算属性也不会改变,在重复一遍,只有当依赖的响应式属性变化了,计算属性才会重新计算。

练习_姓名筛选

personArr: [
  { 
    name: &#39;&#39;, 
    src: &#39;.jpg&#39;, 
    des: &#39;颈椎不好&#39;, 
    sex: &#39;m&#39;, 
    id: &#39;056482&#39; 
  },
  { 
    name: &#39;&#39;, 
    src: &#39;.jpg&#39;, 
    des: &#39;我是谁&#39;, 
    sex: &#39;f&#39;, 
    id: &#39;157894&#39; 
  },
  { 
    name: &#39;&#39;, 
    src: &#39;.jpg&#39;, des: &#39;我长得很好看&#39;, 
    sex: &#39;f&#39;, 
    id: &#39;2849245&#39; 
  },
  { 
    name: &#39;&#39;, 
    src: &#39;.jpeg&#39;, 
    des: &#39;你没有见过陌生的脸&#39;, 
    sex: &#39;m&#39;, 
    id: &#39;348515&#39; 
  },
  { 
    name: &#39;&#39;, 
    src: &#39;.jpeg&#39;, 
    des: &#39;瓜皮刘&#39;, 
    sex: &#39;m&#39;, 
    id: &#39;478454&#39;
  }
]
登录后复制

练习_全选商品

courseList: [
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1299,
    cart: 1,
    id: 0
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1148,
    cart: 1,
    id: 1595402664708
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1,
    cart: 1,
    id: 1596305473062
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1,
    cart: 1,
    id: 1595413512182
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 12798,
    cart: 1,
    id: 1596302161181
  },
  {
    poster: &#39;.jpg&#39;,
    title: &#39;&#39;,
    price: 1,
    cart: 1,
    id: 1596300025301,
  },
]
登录后复制

更多编程相关知识,请访问:编程入门!!

以上就是一文了解Vue中怎么使用计算属性的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号