Vue篇.03-组合式API [setup()]

1. 单文件组件

(1)

(2)props用法

// 用于接收父组件传的的值    props的用法
    // 方式1
    // const props = defineProps(['todoList'])
    // 方式2
    const props = defineProps({
            todoList:{
                type: Array, 
                require: true,
            },
            title:{
                type: String,
                default: '待办事项'
            },
            flag: {
                type: Boolean,
                defalut: false
            }
        })

(3)响应式ref()

响应式 ref()：接受一个内部值(number|string)，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value

    //使用前引入
    import { ref,reactive } from 'vue'    
    // 此处声明的是 非响应式的
    const msg = 'Hello!'
    // 使用ref ,使得变量成为 响应式的,  使用前先引入   数组在删除时, 有问题, 故改为对象的形式进行删除
    const todoVal = ref('')
    // 避免使用this   常量修改值时, 需要通过 .value来修改, 在显示时不需要.value

(4)reactive响应式代理

  const obj = reactive({ todoList : [] })
    // reactive(引用类型) 响应式代理
    // const obj = reactive({})

基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然

toRef()

const state = reactive({
  foo: 1,
  bar: 2
})
const fooRef = toRef(state, 'foo')
// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2
// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

请注意，这不同于：

const fooRef = ref(state.foo)

上面这个 ref 不会和 state.foo 保持同步，因为这个 ref() 接收到的是一个纯数值

toRefs()

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型：{
  foo: Ref,
  bar: Ref
}
*/
// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2
stateAsRefs.foo.value++
console.log(state.foo) // 3
//当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性：
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })
  // ...基于状态的操作逻辑
  // 在返回时都转为 ref
  return toRefs(state)
}
// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

(5)computed()

//创建一个可写的计算属性 ref：
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

(6)watch()/watchEffect()

watch() 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数

    import { ref , watch, watchEffect} from 'vue'
    const before = ref(0)
    const after = ref(0)
    // watch() 默认是懒侦听的(深度侦听)，即仅在侦听源发生变化时才执行回调函数
    watch(props.todoList, (newList, preList)=>{
        after.value = newList.filter(item=>item.done).length
        before.value = newList.length - after.value
    })
    // 立即执行 一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行
    // watchEffect(()=>console.log(before.value++)) 
    // 停止侦听器
    // const stop = watchEffect(()=>{})
    // stop()

(7)provide和inject

    import { provide } from 'vue'    
    // 向后代传参   provide(键,值)
    // 提供静态值  
    provide('msg','hahahaah')
    // 提供响应式的值
    const count = ref(0)
    provide('count',count)

    // 接收发送方传递的值
    const message = inject('msg')

(8)向父组件传值

    //子组件 
   // 向父组件传值




//父组件

    // 避免使用this   常量修改值时, 需要通过 .value来修改, 在显示时不需要.value
    const  addList = (todoVal)=> {
            if (todoVal=== '') return alert('输入内容不能为空!!!') 
            obj.todoList.unshift({
                // id : `${new Date().getTime()}`,
                todoName: todoVal,
                done: false
            });
    }
    // 删除单个
    const delOne = index =>{
        obj.todoList.splice(index,1)
    }
    //删除全部
    const delAll = ()=>{
        // 从索引为0的开始全删掉   如果使用直接让数组=[]的方式,只是清空了数组, 地址没有变, 无法触发watch监听      使用todoList.value.splice(0) 或 todoList.value.length=0的方式清空    todoList如果是数组需要 .value, 对象不需要写
        obj.todoList.splice(0)
    }