Vue.js中data,props和computed数据

data

data 是Vue实例的数据对象。Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面有深入响应式原理里面具体的介绍)。对象必须是纯粹的对象(含有零个或多个的key/value对)。因为这里面的数据都是被监控的，所以说这里面的数据最好都是在视图层显示的数据。如果说不是在视图层展示的变量。可以定义在外面或者放在vm对象上。

eg：

let baz = ''  
export default {  
    data() {  
        return {  
            bar: 'bar'  
        }  
    },  
    methods: {  
        testFn() {  
            // baz  
        }  
    }  
} 

　bar 变量是在页面中要显示的字段，baz就是在函数里面会用到的数据。如果视图里面不用显示的话就没必要写在data里面。这样

可以减少开销，提高性能。

 

props 

props 是props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，

对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

computed 

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。不过计算属性也用

函数来替代。

　

computed: {  
// 仅读取，值只须为函数  
    aDouble: function () {  
        return this.a * 2  
    },  
// 读取和设置  
    aPlus: {  
        get: function () {  
            return this.a + 1  
        },  
        set: function (v) {  
            this.a = v - 1  
        }  
    }  
}  

　　

 

转载于:https://www.cnblogs.com/ecmasea/p/8945897.html