这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战

computed使用

通常情况下，我们使用计算属性来计算商品的价格，我们只需要添加数量，通过计算属性，我们就能得到他们的价格

我们要显式的引用计算属性

import { computed } from 'vue'

然后我们在setup中使用

如下

const count = ref(1)
const changeCount = () => {
  count.value += 1
}
const sum = computed(() => {
    return count.value * 2
})

之后我们需要把他们return出去

return {
    count,
    sum,
    changeCount
}

我们能到到如下图

我们使用会发现，每次点击，就会得到每次乘2的结果

watch 的使用

watch主要用来监听一些数据的变化，比如上边的点击事件，我们可以监听它

使用方式依然是显式导入

import { watch } from 'vue'

然后使用我们的监听方法

watch(count, (newVal: number, oldVal: number) => {
    console.log('newVal=' + newVal, 'oldVal=' + oldVal)
})

当前方法是不需要return的，现在我们可以点击按钮，来看效果

未完待续....