什么时候用计算属性？

官方解释：当模板中放入太多的逻辑，模板过重且难以维护时，你都应当使用计算属性

通俗表达：当你要渲染到页面的数据需要通过大量的计算才可以得到，这时候就应该使用计算属性

代码案例：

##html

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

##jsvar vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})输出Original message: "Hello"Computed reversed message: "olleH"

计算属性vs过滤器

个人理解：过滤器和计算属性都可以把现有的数据变成你想要展示的数据，他们两个的不同点就在于对数据处理的复杂程度

计算属性vs自定义方法

有些对数据的处理逻辑，我们用自己些的方法也可以处理，那我们为什么要用计算属性呢?

Reversed message: "{{ reversedMessage() }}"

// 在组件中methods: { reversedMessage: function () { return this.message.split('').reverse().join('') }}

官网解释：我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

也就是说有些数据用计算属性处理更加的友好，效更高！

关注我，每天收获一点点。

vue修改计算属性的值_vue之计算属性相关推荐

vue修改计算属性的值_Vue语法高级之计算属性和侦听器
计算属性和侦听器都可以监听到data区数据的变化,当数据变化时可以触发方法的调用,从而在方法内部可以进行相应的逻辑处理. 计算属性的语法格式是:computed: {} 侦听器的语法格式是:watch ...
vue获取div中的值_vue获取内存中的值并写入
发表评论发表评论第{{i+1}}楼匿名用户发表时间:{{item.id|dateFormat}} {{item.content}} 加载更多 export default{ data(){ ...
vue 计算文件hash值_vue项目打包文件增加hash值
vue项目打包文件增加hash值 vue-cli2项目修改vue项目根目录下的 build/webpack.prod.conf.js文件 js文件: output: { path: config.b ...
vue 计算文件hash值_vue的hash值原理，也是table切换。
.pages>div{display: none;} aaa bbb cccc 首页关于我的页面用户中心 //hash 和页面一一对应起来 //router 配置 var router = ...
vue点击改变data值_vue 中自定义指令改变data中的值
通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives: ...
vue 取数组第一个值_vue遍历对象中的数组取值示例
前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来 ...
vue修改config后怎么生效_vue组件中修改样式怎么不生效？
vue组件中修改样式怎么不生效?下面本篇文章给大家介绍一下vue组件修改样式不起作用的解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue组件修改样式不起作用需要在全局 ...
vue 取数组第一个值_vue里如何取出数组中的数组（的某一个元素）
今天写音乐解析的时候发现我取不出axios获取到的数组中的数组...... 俗话说:"只有你把可能遇到的和不可能遇到的问题都遇到了才有可能成为大神" 何况我还是一小只小白白呢事实 ...
vue 取数组第一个值_Vue如何循环提取对象数组中的值
1.数据如下,提取name和callcount 2代码. getQueryCallStatistics("sesp1", this.provinceId).then((res) = ...

vue修改计算属性的值_vue之计算属性

什么时候用计算属性？

计算属性vs过滤器

计算属性vs自定义方法

vue修改计算属性的值_vue之计算属性相关推荐

最新文章

热门文章