vue3的一些总结（二）

这一篇主要是来将第一篇的一些细节补全

setup细节问题:

 //setup细节问题：
        //setup是在beforCreate生命周期回调之前就执行了，而且就执行一次
        //由此可以推断出：setup在执行的时候，当前的组件还没有创建出来，也就意味着：组件实例对象this根本就不能用
        //this是undefined,说明就不能通过this再去调用data/computed/methods/props中的相关内容了
        //其实所有的composition API先关回调函数在也都不可以

        //setup中返回只是一个对象，内部的属性和方法是给html模板使用的
        //setup中的对象内部的属性和data函数中的return对象的属性都可以在html模板使用
        //setup中的对象中属性和data函数中的对象中属性会合并为数组对象属性
        //setup中的对象中的方法和methods对象在的方法会合并为组件对象的方法
        //在vue3中尽量不要混合使用data和setup及methods和setup
        //一般不要混合使用：methods中可以访问setup提供的属性和方法，但在setup方法中不能访问data和methods
        //setup不能是一个async函数：因为返回值不再是return的对象，而是promise,模板看不到return对象中的属性数据  

setup的参数：

import {ref,reactive,defineComponent} from 'vue'
export default defineComponent({
    setup(props:any,context:any){
        console.log(props);
        console.log(context);
    //props参数，是一个对象，里面有父级组件像子级组件传递的数据，并且是在子级组件中使用props接收到的所有的属性
    //包含props配置声明且传入的所有属性对象    
    //context参数，是一个对象，里面有attrs对象（获取当前组件标签上的所有属性的对象，但是该属性是在props中没有声明接
    //收的所有的属性对象），emit方法（分发事件），slots对象（插槽）
       
    // ref与reactive
    //是vue3的composition API中2个最重要的响应式API(ref与reactive)
    //ref用来处理基本数据类型，reactive用来处理对象（递归深度响应式）
    //如果用ref对象/数组，内部会自动将对象/数组转换为reactive的代理对象
    //ref内部：通过给value属性添加getter/setter来实现对数组的劫持
    //reactive内部：通过使用Proxy来实现对对象内部所有数据的劫持，并通过Reflect操作对象内部数据
    //ref的数据操作：在js中要.value，在模板中不需要（内部解析模板会自动添加.value）

       let m1 = ref({//ref如果放入的是一个对象的话，那么是经过了reactive的处理，形成了一个proxy类型的对象
           name:'小米',
            wife:{
                name:'山治'
            }
       })
       return{
           m1
        }
    }
})

isRef,isReactive,isReadonly,isProxy

import { defineComponent, ref ,isRef,isReactive,isReadonly,isProxy} from 'vue'
export default defineComponent({
    
    /** 返回的都是布尔类型
     * isRef:检查硬质是否为ref对象
     * isReactive:检查一个对象是否是由 reactive 创建的响应式代理
     * isReadonly:检查一个对象是否是由 readonly 创建的只读代理
     * isProxy:检查一个对象是否由 reactive 或者 readonly 方法创建的代理
     */
    setup(){
        //其他的也是这么检测的
        console.log(isRef(ref({})));
        return{

        }
    }
})

setup() {
    //把复杂数据变成响应式数据
    //返回的是一个proxy的代理对象，返回的是一个被代理者object对象
    //user是代理对象，obj是目标对象
    let user = reactive<any>({
      name: '小米',
      age: 10,
      value: ''
    })
    let password = ref('123')

    let changeUser = () => {
      //直接使用目标对象中的正源是无法更改的，只能使用代理对象的方式来更改对像
      user.name = '小明'
      delete user.age //删除
      console.log(user);
    }
    //通过代理对象获取某个值
    let proxyUser = new Proxy(user, {
      get(target, prop) {
        console.log('get方法调用');
        return Reflect.get(target, prop)
      },
      set(target, prop, val) {
        console.log('set方法调用');
        return Reflect.set(target, prop, val)
      },
      deleteProperty(target, prop) {
        console.log('删除方法');
        return Reflect.deleteProperty(target, prop)
      }
    })