木子屋
 

标题: Vue框架data和computed两种属性的区别

作者: dnawo

日期: 2022-03-21 10:00 AM

分类: 脚本语言

内容:
先看两个例子：
复制内容到剪贴板 程序代码<div id="example">{{name}}</div>
<script>
    var vm = new Vue({
        el: '#example',            
        data: {
            name: '张三'
        }
    })
</script>
复制内容到剪贴板 程序代码<div id="example">{{name}}</div>
<script>
    var vm = new Vue({
        el: '#example',            
        computed: {
            name: function(){return '张三';}
        }
    })
</script>
运行结果一样的，粗看没什么区别，我们试着修改下name属性值，会发现computed的修改会出错，这是因为computed里的属性默认只有getter，也就是只读的，不能赋值：
如果要赋值，还需给它要加上setter：
复制内容到剪贴板 程序代码<div id="example">{{name}}</div>
<script>
    var vm = new Vue({
        el: '#example',    
        data: {
            temp_name: '张三'
        },
        computed: {
            name: {
                //getter
                get: function(){
                    return this.temp_name;
                },
                //setter
                set: function(newval){
                    this.temp_name = newval;
                }
            }
        }
    })
</script>
OK，这样就和data一样了，可以看到，computed可以更精细的控制属性读写，但它需要借助一个临时变量(temp_name)才能实现，这样跟C#的字段和属性差不多意思了。当然了，官方称computed为计算属性，computed更大的意义在于计算，再看个例子：
复制内容到剪贴板 程序代码<div id="example">
    姓名：{{name}}<br/>
    语文：{{chinese}}<br/>
    英语：{{english}}<br/>
    总分：{{score}}
</div>
<script>
    var vm = new Vue({
        el: '#example',    
        data: {
            name: '张三',
            chinese: 90,
            english: 85
        },
        computed: {
            score: function(){
                return this.chinese + this.english;
            }
        }
    })
</script>

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.613 ms

标题: Vue框架data和computed两种属性的区别

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.613 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.613 ms