重学vue之vue3中compositionAPI

• 一、ref, reactive, toRef,toRefs, readonly响应式的引用
  • 1.1ref的使用
  • 1.2reactive的使用
  • 1.3toRefs的使用
  • 1.4toRef的使用
  • 1.5readonly的使用
• 二、setup函数的参数
• 三、计算属性
• 四、监听器
  • 4.1基本使用
  • 4.2watchEffect使用
• 五、生命周期函数
• 六、Provide,Inject传递值,Ref获取dom的用法
  • 6.1Provide与Inject使用
  • 6.2 获取dom

一、ref, reactive, toRef,toRefs, readonly响应式的引用

• ref 处理基础类型的数据
• reactive 处理数组、对象数据
• toRefs 处理对象结构之后的数据,无默认值
• toRef 处理对象结构之后的数据,有默认值
• readonly 只能读的响应式数据

1.1ref的使用

 setup(props, context) {
      //处理基本类型
      const { ref } = Vue;
      //现在name就是响应式的数据，2秒后改变，依然会更新视图
      let name = ref('123');
      setTimeout(() => {
        name.value = '456'
      }, 2000)
      return {name} 
    }

1.2reactive的使用

 setup(props, context) {
      //处理对象，数组类型
      const { reactive } = Vue;
      //现在people就是响应式的数据，2秒后改变，依然会更新视图
      const people = reactive({name: '张三', gender: '男'});
      setTimeout(() => {
        people.name = '李四'
      }, 2000)
      return {people} 
    }

1.3toRefs的使用

 setup(props, context) {
      //处理对象，数组类型解构之后
      const { reactive,  toRefs } = Vue;
      //现在people就是响应式的数据，2秒后改变，依然会更新视图
      const people = reactive({name: '张三', gender: '男'});
      setTimeout(() => {
        people.name = '李四'
      }, 2000)
      //把people里面的单个属性变为响应式
      const { name, gender } = toRefs(people);
      return { name, gender }
    }

1.4toRef的使用

 setup(props, context) {
      //处理对象，数组类型解构之后
      const { reactive,  toRef } = Vue;
      //现在people就是响应式的数据，2秒后改变，依然会更新视图
      const people = reactive({name: '张三', gender: '男'});
      setTimeout(() => {
        people.name = '李四'
      }, 2000)
      //把people里面的单个属性变为响应式
      //注意age一开始是没有哒
      const { name, gender, age} = toRef(people,'age');
      return { name, gender,age }
    }

1.5readonly的使用

 setup(props, context) {
      //处理对象，数组类型解构之后
      const { reactive, readonly } = Vue;
      //现在people就是响应式的数据，2秒后改变，依然会更新视图
      const people = readonly({name: '张三', gender: '男'});
      setTimeout(() => {
        //会报错
        people.name = '李四'
      }, 2000)
     
      return { people }
    }

二、setup函数的参数

setup(props, context) {
    //attrs第一个参数是None-Props属性
    //slot是一个方法，调用default方法会返回一个VNODE
    //emit是各种事件
    const { attrs, slots, emit } = context;
    
    //获取属性
    //console.log(attrs.属性名)
    
    
    //渲染函数
    //const { h } = Vue;
    //渲染父组件传递过来的插槽
    //return ()=>h('div',{},slots.default())
    
    //触发消息事件
    //function handleClick() { emit('change'); }
    //return { handleClick }
}

三、计算属性

• 仍然使用computed关键字，写法并没有太多的出入。

 const app = Vue.createApp({
    setup() {
      //要引用进来这个computed
      const { reactive, computed } = Vue;
      const countObj = reactive({ count: 0});
      const handleClick = () => {
        countObj.count += 1;
      }
      //和以前一样，使用get与set
      let countAddFive = computed({
        get: () => {
          return countObj.count + 5;
        },
        set: (param) => {
          countObj.count = param - 5;
        }
      })

      setTimeout(() => {
        countAddFive.value = 100;
      }, 3000)

      return { countObj, countAddFive, handleClick }
    },

四、监听器

• 与computed一样，新的watch与老版本没有太多出入。

4.1基本使用

• 1、监听基本类型

 setup() {
      const { ref, watch } = Vue;
      //基本类型
      const age = ref(18)
      //监听age
      watch(age,(oldValue,newValue)=>{
          console.log("oldValue:",oldValue,"newValue:",newValue,)
      })
      return {age}
 }

• 2、监听对象

 setup() {
      const { reactive, watch,toRefs} = Vue;
      //对象
      const people = reactive({age:18})
      //监听age
      watch(()=>people.age,(oldValue,newValue)=>{
          console.log("oldValue:",oldValue,"newValue:",newValue,)
      })
      //结构一下,直接把这个age转化为响应式，可以直接使用
      const {age} = toRefs(people);
      return {age}
 }

4.2watchEffect使用

 setup() {
      const { ref,watchEffect,toRefs,reactive} = Vue;
      //基本类型
      const age = ref(18)
      
      //对象
      const people = reactive({name:'张三'})

      //监听
      watchEffect(() => {
            console.log(age);
            console.log(people.name);
      })

      return {age}
 }

五、生命周期函数

过渡

• beforeMount => onBeforeMount
• mounted => onMounted
• beforeUpdate => onBeforeUpdate
• beforeUnmount => onBeforeUnmount 页面移除时候触发
• unmouted => onUnmounted
• beforeCreate与created直接写在setup函数中

新增

• onRenderTracked 页面渲染之后，vue会收集一下响应式依赖
• onRenderTriggered 每一次页面重新渲染时候

六、Provide,Inject传递值,Ref获取dom的用法

6.1Provide与Inject使用

父组件setup函数中

setup() {
      const { provide} = Vue;
      //给后代传递age变量，值为18
      provide('age', 18);
      return { }
    }

后代组件setup函数中

setup() {
     const { inject } = Vue;
      //接收age变量，默认值为20
      const name = inject('age', 20);
      return { }
    }

6.2 获取dom

<div>
    <div ref="a">a</div>
</div>

setup() {
      const { ref, onMounted } = Vue;
      //这里的a一定是和标签中的ref值对应，然后给ref传null
      const a = ref(null);
      onMounted(() => {
        //注意这里是ref转化的响应式数据，a.value才是dom哈
        console.log(a.value);
      })
      return { a }
    }