vue -- computed & watch

computed

计算属性：computed属性个人理解为是用来计算重新赋值data里面指定数据的值，也可以重新用来返回一个新的数据，但是这个数据无法动态更新，但是一般建议是用来赋值data里面的属性值

data: {num: 1}

// 计算
computed: {
    changeNum: function () {
        return this.num++
    } 
}

// HTML
<div>{{changeNum}}</div> => // 2

computed 属性会基于data所依赖的数据进行缓存，如果不希望有缓存，请使用 method 方法替代
computed 属性默认只设置 getter 函数，不过在需要时，还可以提供 setter 函数：
computed: {
fullName: {
// getter 函数
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter 函数
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
通过改变fullName的值，同时也会改变firstName和lastName的值

watch

监听器：watch属性个人理解就是用来监听data里面数据变化并进行相关操作的一种工具
watch对象以data中的属性为key，vlaue是一个函数方法，这个函数方法里面有两个参数，一个是改变前的值，一个是改变后的值

data: {name: '李狗蛋'}
watch: {
    name: function (newVal, oldVal) {
        console.log('名字改变了')
    }
}

深度监听