vue 计算属性和data_Vue计算属性原理和使用场景

计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。特点：

监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算
数据可以进行逻辑处理，减少模板中计算逻辑。
对计算属性中的数据进行监视

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改自身的值，而是修改它的依赖。

computed: {fullName: {// getterget () {return this.firstName + ' ' + this.lastName},// setterset (newValue) {//this.fullName = newValue 这种写法会报错var names = newValue.split(' ')this.firstName = names[0]//对它的依赖进行赋值this.lastName = names[names.length - 1]}}
}

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新

计算属性必须写get,set的场景

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：当你去设置计算属性时，也就是去修改计算属性时，需要写成get,set的方式

如果没有写会直接报错，比如

<template><div class="a"><button @click="add">点击{{closure}}</button></div>
</template><script>
export default {props: {},data() {return {a: 1}},computed: {closure() {return 'abc'}},methods: {add() {this.closure = 'defg'}}
}
</script>

正确写法

computed: {closure: {get() {console.log(123)return 'abc'},set(value) {// 那这个地方就只能拿值而不能修改closure的值了// this.closure = 'value'  会报错//做一些其他逻辑console.log(value)}}},methods: {add() {// 修改无效this.closure = 'defg'}}

get set应用场景1

用v-model来实现双向绑定（推荐用watch）

visible: {get() {return this.value},set(val) {}}

get set应用场景2

双向绑定的计算属性+vuex

<input v-model="message">// ...
computed: {message: {get () {return this.$store.state.obj.message},set (value) {this.$store.commit('updateMessage', value)}}
}

可缓存性

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

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {now: function () {return Date.now()}
}

计算属性可以通过闭包来实现传参

:data="closure(item, itemName, blablaParams)"
computed: {closure () {return  (a, b, c)=> {/** do something */return data}}
}

如果用闭包来实现传参，那么计算属性不具有可缓存性。

与watch进行对比

watch：监测的是属性值，只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。
computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。
计算属性不能执行异步任务，计算属性必须同步执行，watch可执行异步任务，遇到异步任务，就交给侦听属性
watch也可以检测computed属性

总结

计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

computed能做的，watch都能做，反之则不行
能用computed的尽量用computed