setup的初识

vue2中写法

1
2
3
4
5
6
7
8
9
10
11
12
export default ({
  name: 'App',
  data(){
    return {
      count:0
    }
  },methods:{
    updateCount(){
      this.count++
    }
  }
})

vue3中的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
  /* 使用vue3的composition API */
  setup () {

    // 定义响应式数据 ref对象
    const count = ref(1)
    console.log(count)

    // 更新响应式数据的函数
    function update () {
      // alert('update')
      count.value = count.value + 1
    }

    return {
      count,
      update
    }
  }
}