序言
在这里篇blog中，我们将要较为Vue3中合Vue2里的computed的相同之处和不同之处。 Computed是Vue.js中的一个主要功能，它能够动态性地算出根据响应式网站数据信息数值，而且在数据变化时自动升级。
在Vue2中，computed能通过getters来定义计算属性，但在Vue3中，computed被重新命名为计算逻辑，并可以在setup函数中开展界定。
相同之处：
- 在
Vue2和Vue3中，computed都能够根据响应式网站信息进行测算，当响应式网站数据信息变化时，数值还会自动升级。 - 在
Vue2和Vue3中，computed都是会缓存文件数值。假如计算属性所依靠的响应式网站数据信息并没有发生变化，那样下一次计算属性被访问时，他会马上回到缓存文件数值，而非重算。 - 能设计算属性的
setter在Vue2和Vue3中，computed都能够有着setter，用以检测计算属性的改变，并且在计算属性被设定时作出回应。
不同之处：
- 计算属性的概念方法 在
Vue2中，我们可以用getters来定义计算属性，如下所示：
// Vue2中界定计算属性的实例
computed: {
fullName: function () {
return this.firstName ' ' this.lastName
}
}
但在Vue3中，计算属性被重新命名为计算逻辑，还可以在setup函数中开展界定，如下所示：
// Vue3中界定计算逻辑的实例
import { computed } from 'vue'
setup() {
const fullName = computed(() => {
return this.firstName ' ' this.lastName
})
}
- 计算逻辑能够访问外网
props和data在Vue2中，getters能够浏览props和data，但需要应用函数调用传到：
// Vue2含有参数计算属性实例
computed: {
fullName: function () {
return function () {
return this.firstName ' ' this.lastName
}
}
}
但在Vue3中，计算逻辑能够访问外网props和data，不用应用函数调用：
// Vue3中访问外网props和data的计算逻辑实例
import { computed } from 'vue'
setup(props) {
const fullName = computed(() => {
return props.firstName ' ' props.lastName
})
}
- 计算逻辑不兼容
watch，可是可以用watchEffect在Vue2中，我们可以用watch来检测计算属性的改变：
// Vue2中应用watch检测计算属性的改变的实例
computed: {
fullName: function () {
return this.firstName ' ' this.lastName
}
},
watch: {
fullName: function (newVal, oldVal) {
// 解决fullName的改变
}
}
但在Vue3中，计算逻辑性不会再适用watch，可是可以用watchEffect来检测转变：
// Vue3中应用watchEffect检测计算逻辑的改变的实例
import { computed, watchEffect } from 'vue'
setup() {
const fullName = computed(() => {
return props.firstName ' ' props.lastName
})
watchEffect(() => {
// 解决fullName的改变
})
}
- 计算逻辑能够界定为响应式网站的信息 在
Vue3中，我们可以把计算逻辑申明为响应式网站的信息，这可以在setup函数中对它进行浏览和变更：
// Vue3中界定响应式网站的计算逻辑的实例
import { computed, ref } from 'vue'
setup() {
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => {
return firstName.value ' ' lastName.value
})
fullName.value = 'Jane Doe'
}
汇总
尽管Vue3里的计算逻辑与Vue2里的computed有一些差别，但它们的主要功能和操作方法是一样的。
如果你早已了解Vue2里的computed，那样很容易就会可以使用Vue3里的计算逻辑替代computed。
使用Vue3时，您可以根据自己的需求和状况选择用哪种方法来定义计算属性