Vue3学习笔记（第一天）

一、Vue3响应式(reactive)

重点：需要在script里引入reactive

import {reactive} from 'vue'

数据定义在steup（）方法中

<script>
    import{reactive}from 'vue'
    export defalut{
        steup(){
                 const state=reactive({content:0})
                 //定义完暴露，不是在暴露里定义
                  return{
                          state
                          }
                }
                    }

</script>

以上是标准写法，比较繁琐，还可以使用构建工具来简化该操作，用到<script setup>来简化该操作，具体代码如下

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

</script>

如此就省略了return暴露这一步，简洁明了

二.ref第定义响应式数据

因为在reactive中定义的参数如果二次引用的话，就会丢失响应式，ref避免了这一点，与reactive一样，在使用前需要引入，传入参数会包装为一个带有value的值

<script setup>
import { ref } from 'vue'

const content = ref( 0 )
console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

</script>