vue3 - 基础API整理(2)

1. setup中的参数

1. setup:有两个参数：1.props 2.conText
2. props:包含props配置声明且传入了的所有属性的对象,其实就是父组件给子组件传值子组件使用props接受,
setup函数的第一个参数获取的就是父组件传入的所有属性对象。
3. conText:返回的对象属性有attrs,slots,emit
4. attrs:包含没有在props配置中声明的属性的对象.相当于this.#attrs (没有写props里的传值属性)
5. slots:包含所有传入的插槽内容的对象,相当于this.$slots
6. emit:用来分发自定义事件的函数,相当于this.$emit

2. computed函数的使用

<script>
import {computed, defineComponent, ref} from "vue";
export default defineComponent({
  setup() {
    let price = ref(2)
    let amount = ref(2)
    let nickName = ref('')

    //例子一：
    let sum = computed(() => {
      return price.value * amount.value
    })

    //例子二：
    let setNickName = computed({
      get() {
        return nickName.value
      },
      set(val) {
        return nickName.value = val
      }
    })

    //例子三：
    // 找出 id>3,不能使用v-if判断,唯一办法使用计算属性
    let goods = [
      {id: 1, title: '毛豆1'},
      {id: 2, title: '毛豆2'},
      {id: 3, title: '毛豆3'},
      {id: 4, title: '毛豆4'},
      {id: 5, title: '毛豆5'},
    ]

    let goodsComputed = computed(() => {
      let aGoods = goods.filter((item) => {
        return item.id > 3
      })
      return aGoods
    })

    return {
      price,
      amount,
      sum,
      nickName,
      setNickName,
      goodsComputed
    }
  }
})
</script>
<template>
<!-- 例子一 -->
  价格：{{ price }} <br>
  数量：
  <button @click="amount--">-</button>
  {{ amount }}
  <button @click="amount++">+</button>
  <br>
  小计：{{ sum }} <br>
<!-- 例子二 -->
  <div>
    昵称：<input type="text" v-model="setNickName"> {{ nickName }}
  </div>
<!-- 例子三 -->
  <div v-for="item in goodsComputed" :key="item.id">{{ item.title }}</div>
</template>

3. watch函数的使用

1. watch可以监听一个或多个响应式数据,一旦数据变化,就会自动执行监听回调,如果
    监听reactive对象中的属性,必须通过函数来指定,如果监听多个数据,需要使用数组来指定,
    默认初始时不执行回调,但可以通过配置immediate为true,来指定初始时立即执行第一次,
    通过配置deep为true,来指定深度监听。

//基本使用
    <script>
    import {defineComponent,ref,watch,reactive} from "vue";
    export default defineComponent({
      setup() {
        let name = ref('liu')

        let setName = () =>{
          name.value = 'liuYu'
        }

        /** 例子一
         *    watch监听ref基本数据类型
         *    有两个参数：
         *      1.watch监听对象
         *      2.箭头函数()=>{},箭头函数里也有两个参数(newValue,oldValue)=>{}
         */

        watch(name,(newValue,oldValue) =>{
          console.log(newValue)
          console.log(oldValue)
        })

        /** 例子二(方式一)
         *    watch监听单个reactive引用数据类型(Object)
         *    有两个参数:
         *      1.箭头函数返回的值也就是改变的数据的属性就是watch监听对象,
         *      2.箭头函数()=<{},箭头函数里也有两个参数(newValue,oldValue)=>{}
         */

        let obj = reactive({
          age: 11,
          sex: '男'
        })

        let setObj = () =>{
          obj.age = 22
          obj.sex = '女'
        }

        //监听 obj对象中 age的变化
        watch(() =>obj.age,(newValue,oldValue) =>{
          console.log(newValue)
          console.log(oldValue)
        })
        //监听 obj对象中 sex的变化
        watch(()=> obj.sex,(newValue,oldValue) =>{
          console.log(newValue)
          console.log(oldValue)
        })

        /** 例子二(方式二,相当于方式一的简写)
         *    watch监听单个reactive引用数据类型(Object),第一个参数是数组
         */
        watch([() => obj.age,() => obj.sex],(newValue,oldValue) =>{
          //数组取值下标方式newValue[0],newValue[1],
          console.log(newValue[0]) //22  //[22, "女"]
          console.log(oldValue) //[11, "男"]
        })

        /** 例子三
         *    watch监听的第三个参数,是配置
         * */
        watch([() => obj.age,() => obj.sex],(newValue,oldValue) =>{
          console.log(newValue,oldValue)
        },{
          immediate:true, //初始化执行一次,因为没有修改数据,所以oldValue是undefined
          deep:true //深度监听
        })

        return {
          name,
          setName,
          obj,
          setObj
        }
      }
    })
    </script>

    <template>
    <!-- 例子一 -->
      姓名：{{ name }}
      <button @click="setName">修改姓名</button>
      <br>
    <!-- 例子二 -->
      年龄：{{ obj.age }}
      性别：{{ obj.sex }}
      <button @click="setObj">修改</button>
    </template>

4. watchEffect函数的使用

1. watchEffect可以不用直接指定要监听的数据,回调函数中使用的那些
    响应式数据就监听哪些响应式数据,默认初始时就会执行一次

    <script>
    import {defineComponent, ref, watchEffect, reactive} from "vue";

    export default defineComponent({
      setup() {
        //监听ref基本数据类型
        let name = ref('liu')

        let setName = () => {
          name.value = 'liuYu'
        }

        //监听reactive引用数据类型
        let obj = reactive({
          age: 11,
          sex: '男'
        })

        let setObj = () => {
          obj.age = 22
          obj.sex = '女'
        }

        //watchEffect监听：参数只有一个回调函数。
        //只要是响应式数据都能监听,默认初始时执行一次,相当于immediate:true
        watchEffect(() => {
          //值为 newValue
          console.log(name.value, obj.age, obj.sex)
        })

        return {
          name,
          setName,
          obj,
          setObj
        }
      }
    })
    </script>

    <template>
      <!-- 例子一 -->
      姓名：{{ name }}
      <button @click="setName">修改姓名</button>
      <br>
      <!-- 例子二 -->
      年龄：{{ obj.age }}
      性别：{{ obj.sex }}
      <button @click="setObj">修改</button>
    </template>