vue3.0-第一章之setup，ref / reactive

1.setup触发的时机是beforeCreate之前，所以setup内部访问不到this的概念
2.setup的写法与beforeCreate同级，内部有两个参数，且内部必须要用return暴露出去

• props：上个组建的参数

• context：

  1.attrs是上个页面传过来的属性，没有用props承接的都会在attrs里面展示，用props承接的都不展示在attrs内
  2.emit是抛出事件，如下方法：emitFn
  3.slots插槽，context.slots

setup(props,context){//props上个组建的参数，context:attrs/
    // props：上个组建的参数
    console.log(props);
    // context
    //1.attrs是上个页面传过来的属性，没有用props承接的都会在attrs里面展示，用props承接的都不展示在attrs内
    //2.emit是抛出事件，如下方法：emitFn
    //3slots插槽，context.slots
    
    let person = {
      count:0,
      name:"张三"
    }
    function emitFn(){
        context.emit("hellow",666)
    }
    let p = reactive(person)
    return {person,emitFn};
  }

3.setup内的ref
作用：使得定义的变量在dom中有双向绑定效果，ref只能监听简单数据类型，不能监听数组/对象变化
写法：

let a = 123;//正常定义的变量是没有双向绑定的，数据变化不会导致dom变化

//ref定义一个变量
let count = ref(0);
let json = ref({
  age:10,
  name:'张三'
});

let myFn=()=>{
        console.log(count.value);//0   通过value来修改count的值

        // ref只能通过value来控制数据，但是数组不能用下标来控制
        count.value = 1;
        json.value.age = 12;
        json.value.name = '李四';
    }
    // 要想在外界使用，必须通过return {xxx,xxxx}暴露出去
    return {count,json,myFn};

4.setup内的reactive
作用：只能定义对象类型的响应式数据
用法：
数组通过下标修改也可以监听到

let person = {
      count:0,
      name:"张三",
      age:18,
      arr: ["1","2","3"],
      json:{
        age:10,
        name:'张三'
      }
    }
    let p = reactive(person)
    // 定义一个方法
    let myFn=()=>{
      
        person.count = 1;
        person.json.age = 12;
        person.json.name = '李四';
        person.arr[0] = "10"
    }
    // 要想在外界使用，必须通过return {xxx,xxxx}暴露出去
    return {person,myFn};

下一章：vue3.0-第二章之 生命周期第一节