[JavaScript知识库]Vue3中的计算属性

昨天实在是创作灵感来了，就中间更新了一篇自己亲身经历的小说，希望大家能喜欢。今天继续更新关于Vue3中CompetitionApi关于计算属性的使用方法。在之前的OptionsApi中，计算属性这样写

const?app?=?Vue.createApp({  data(){????return {????  ...????}  },??computed:{??  computedData(){??    ...??  }??},??template:`<div>{{ computedData }}</div>`})          
const?vm?=?app.mount('#root')

下面举几个例子，结合代码中的注释说明一下。我们先针对基本数据类型，在CompetitionApi中，是这样的：

const app = Vue.createApp({  setup(){????const?{?ref,computed?}?=?Vue??//?从Vue中引入computed     const count = ref(0)    const handleClick = () => {      count.value += 1    }????const?countAddFive?=?computed(()?=>?{??//?传递函数      return count.value + 5    })    return{      count,      handleClick,      countAddFive    }  },  template:`<div>              <span @click="handleClick">{{ count }}</span>---              <span>{{ countAddFive }}</span>            </div>`})
const vm = app.mount('#root')

我们除了可以传递函数 ，还可以更具体一点，传递对象，对象中包含了get和set，就像这样：

const app = Vue.createApp({  setup(){    const { ref,computed } = Vue    const count = ref(0)    const handleClick = () => {      count.value += 1    }    let countAddFive = computed({      get:() => {        return count.value + 5      },      set:(v) => { // 接受传递来的参数        count.value = v      }    })????setTimeout(()?=>?{?//?返回的数据类型是基本数据类型，还是通过ref包裹的      countAddFive.value = 100    },3000)    return{      count,      handleClick,      countAddFive    }  },  template:`<div>              <span @click="handleClick">{{ count }}</span>---              <span>{{ countAddFive }}</span>            </div>`})
const vm = app.mount('#root')

当然，除了基本数据类型，还有引用数据类型，下面以对象为例，代码可以写成这样：

const app = Vue.createApp({  setup(){    const { reactive,computed } = Vue    const countObj = reactive({count:0})    const handleClick = () => {      countObj.count += 1    }    let countAddFive = computed({      get:() => {        return countObj.count + 5      },      set:(v) => { // 接受传递来的参数        countObj.count = v      }    })    setTimeout(() => { // 返回的数据类型是基本数据类型，还是通过ref包裹的      countAddFive.value = 100    },3000)    return{      countObj,      handleClick,      countAddFive    }  },  template:`<div>              <span @click="handleClick">{{ countObj.count }}</span>---              <span>{{ countAddFive }}</span>            </div>`})
const vm = app.mount('#root')

之后更新关于watch的内容，大家一起加油！

大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈