四.Vue.js实例属性选项-数据操作

Vue创建实例化参数配置中，对数据进行处理的有 data、methods、props、propsData、computed、watch

 

var vm = new Vue({
    el: '#app',
    data: {
        name: '小虫',
        age: 3
    },
    methods: {
        addAge: function(){
            this.age++
        }
    }
});

1. data

data在new Vue中以一个对象方式传入，即data：{}；而在组件中data以一个函数方式传入，即data: function(){ return {} }，

函数的方式避免了多处使用同一组件，而导致同一对象导致数据发生改变。函数方式简单理解为使用时拷贝data所有属性

2. methods

methods对象存放的是方法，可以使用方法完成用户一些操作，如点击。方法中的 this 自动绑定Vue实例，参数$event为鼠标对象

3. props

props用于组件中，子组件通过定义props属性，父组件通过props参数规格，把值传给子组件。

props参数规格为Array<string> | Object，如：

props: ['name', 'age']、
props: {
    name: String, // 检测类型 
    age: {  // 检测类型 + 其他验证
        type: Number,  // String、Number、Boolean、Array、Object、Date、Function、Symbol
        default: 3,  // 默认值
        required: true,  // 是否为必填
        validator: function (value) {  // 验证函数
            return value >= 0 
        }
    } 
} 

4. propsData

propsData用于Vue.extend扩展构造器，构造器的数据传输，通过定义的props属性，用propsData填充数据，如下：

var Vexd = Vue.extend({
    template:'<div>{{name}}</div>',
	data:function(){return{}},
	props:['name']
});
new Vexd ({
    propsData:{
        name:'propsData设置值'
    }
}).$mount('header')

 

5. computed

computed监控自定义属性，该属性不在data里面，受data里面的属性值变化而变化，适合对多个属性值或者对象进行处理后返回一个结果值，简单理解为多个属性引起自定义值变化。如：全名：姓和名字、购物车总金额：商品单价和数量、全选：睡觉、玩、喝

// 默认使用computed getter属性获取值
var vm = new Vue({
    el: '#app',
    data: {
        price: 20,
        num: 2
    },
    computed: {
        total: function(){ 
            return this.price * this.num
        }
    }
});

// 使用getter监控变化后的值，setter监控属性发生变化时的回调
var vm = new Vue({
    el: '#app',
    data: {
        sleep: false,
        play: false
        drink: false
    },
    computed: {
        checkAll: { 
            get: function(){
                 return this.sleep & this.play & this.drink
            },
            set: function(newValue){ // total值发生变化执行，如更改total值，由price和num导致发生值变化不会执行
                this.sleep = newValue;
                this.play = newValue;
                this.drink = newValue;
            }
        }
    }
});

 

6. watch

watch监控data对象的属性，必须要在data存在该属性才能使用watch，可以监控变量或对象，适合一个数据影响多个数据。

监控路由、input输入框的值特殊处理，如：总价：购买数量、购买价格、优惠券、折扣券等任意一个发生变化,都会自动跟踪变化；

// 默认为handler
var vm = new Vue({
    el: '#app',
    data: {
        total: 0
    },
    watch: {
        total: function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        },
    }
});


// 使用其他参数handler、immediate、deep
var vm = new Vue({
    el: '#app',
    data: {
        total: 0,
        jsn: {
            name: '小虫',
            age: 3
        }
    },
    watch: {
        jsn: {
            handler: function (val, oldVal) {
              console.log('new: %s, old: %s', val, oldVal)
            }, 
            immediate: true,  //刷新加载 立马触发一次handler
            deep: true  // 可以深度检测到 jsn对象的属性值的变化,若不使用则必须通过jsn.name方式去监测
        }
    }
});