vue3 - 基础API整理(1)

1. defineComponent函数

1. defineComponent是一个重载函数,只是对setup函数进行封装,返回options的对象,目的是
   定义一个组件,内部可以传递一些配置对象,defineComponent函数最重要的是,在TypeScript下,
   给予了组件正确的参数类型推断。

    <script>
    import {defineComponent} from "vue";
    export default defineComponent({
      setup(){

        return{}
      }
    })
    </script>

2. Composition API

1. 它是一组低侵入式的、函数式的API,使我们能够灵活地 "组合" 组件的逻辑。Vue3是函数式的编程,没有this

3. ref函数的使用

1. ref()函数可以将数据转换为响应式,一般用来定义一个基本类型的响应式数据。但是也可以用
    来定义引用数据类型(不推荐用),因为ref()函数底层又封装了reactive()函数,会判断定义的类型,
    如果是引用数据类型,会自动调用reactive()函数,注意在使用时用 .value 形式
    
2. ref()函数定义的响应式数据必须通过 .value 形式取值。template模板上不用

    let count = ref('liu') //String
    let num = ref(1) //Number
    let active = ref(false) //Boolean
    let data = ref(null) //NUll

4. reactive函数的使用

1. reactive()的用法与ref()的用法相似,也是将数据变成响应式数据,当数据发生变化时
    模板视图也会自动更新。不同的是ref()用于基本数据类型,而reactive()用于引用
    数据类型的数据,比如对象和数组。
    
    //数组
    let arr = reactive([
      {id:1,content: 'liu1'},
      {id:2,content: 'liu2'},
    ])
    listData.forEach(item =>{
      console.log(item.id) //1,2
      console.log(item.content); //liu1,liu2
    })
    
    //对象
    let obj = reactive({
      id: 1,
      content: 'liu'
    })
    console.log(obj.id) //1
    console.log(obj.content); //liu
    

补充 reactive响应式数据赋值丢失响应式问题

总结：如果操作代理对象,目标对象中的数据也会随之变化,
      同时如果想要在操作数据的时候,界面也要跟着重新渲染更新,那么也是操作代理对象。
//方法一
1. 直接写
    <script setup>
    import {onMounted, reactive, toRef} from "vue";
    let list = reactive({
      arr: [
        {id: 1,sex: '男'},
        {id: 2,sex: '女'},
      ]
    })
    let tableArr = reactive({
      arr: []
    })
    tableArr.arr = list.arr
    console.log(tableArr.arr)
    </script>

    <template>
      <div v-for="item in tableArr.arr" :key="item.id">
       {{item.id}}
      </div>
    </template>

2. 在onMounted函数中写
    <script setup>
        import {onMounted, reactive, toRef} from "vue";
        let list = reactive({
          arr: [
            {id: 1,sex: '男'},
            {id: 2,sex: '女'},
          ]
        })
        let tableArr = reactive({
          arr: []
        })
        onMounted(() =>{
          tableArr.arr = list.arr
        })
        console.log(tableArr.arr)
    </script>

    <template>
      <div v-for="item in tableArr.arr" :key="item.id">
       {{item.id}}
      </div>
    </template>

//方法二
1. 直接写  
    <script setup>
        import {onMounted, reactive, toRef} from "vue";
        let list = reactive({
          arr: [
            {id: 1,sex: '男'},
            {id: 2,sex: '女'},
          ]
        })
        let tableArr = toRef(list,'arr')
        console.log(tableArr)
    </script>
    <template>
      <div v-for="item in tableArr" :key="item.id">
       {{item.id}}
      </div>
    </template>

5. toRefs函数的使用

1. toRefs可以将响应式对象中所有属性包装成ref对象,并返回包含这些ref对象的普通对象,
    比如在setup函数中返回一个使用拓展运算符对象类型的响应式数据,这时这个对象类型的
    属性不再是响应式,可以使用toRefs将对象中的每个属性都转换成响应式的。
    
    //普通写法
    export default defineComponent({
      setup(){
        let state = reactive({
          title: '羊肉串',
          price: 5
        })
        return{
          ...toRefs(state),
        }
      }
    })

    <template>
      <div>{{title}},{{price}}</div>
    </template>
    
    //script setup语法糖
    。。。

6. toRef的特点与作用

1. toRef为响应式对象上的某个属性创建一个ref引用,更新时引用对象会同步更新,
    注意如果通过toRef创建的数据修改时,并不会触发视图界面的更新,因为toRef的本质是引用,
    与原始数据有关联。
    
//基本使用
    export default defineComponent({
      setup(){
        let state = reactive({
          count: 1
        })
 
        let add = () =>{
          //响应式数据赋值给变量,那么变量就不是响应式数据,视图不会更新
          //let total=state.total
          //total++


          //使用toRef进行引用,改变state的值,视图会更新
          //toRef(参数1.数据对象,参数2.属性)
          let num  = toRef(state,'count')
          num.value++
        }
        return{
          state,
          add
        }
      }
    })

    <template>
      {{ state.count }}
      <button @click="add">+</button>
    </template>
    
//script setup语法糖
    <script setup>
    import {reactive,toRef} from "vue";

        let state = reactive({
          count: 1
        })

        const add = () =>{
          //响应式数据赋值给变量,那么变量就不是响应式数据,视图不会更新
          // let total=state.total
          // let num = state.count
          // num++

          //使用toRef进行引用,改变state的值,视图会更新
          //toRef(参数1.数据对象,参数2.属性)
          let num  = toRef(state,'count')
          num.value++
        }
    </script>
    
    <template>
      {{ state.count }}
      <button @click="add">+</button>
    </template>