Vue3 入门之 setUp ref reactive toRef toRefs

setup

setup 是vue3 新增的一个选项，他是组件内使用 composition API的入口

setup 执行时间是在 beforeCreate 和 created之间，这个结论时错误的。setup 再beforeCreate和created之前

setup 的两个参数 props context

props指的是父组件传递过来的值，setup 中接受的props是响应式的，当传入新的props时会及时被跟新 

context 指的是上下文  触发事件 emit 插槽slots以及attrs

在使用props时不能使用 es6的解构，因为这会让props不支持响应式

ref

ref 用来创建基础数据类型的响应式数据

 const a = ref(0)
 console.log("aaa",a.value)

ref创建的响应式数据 在js 里需要加上.value 才能访问，在模板中可以直接通过变量名访问

  

    {{a}}
  

reactive

reactive用来创建引用数据类型的响应式数据

   let info = reactive({
      name:'小明',
      age:18,
      sex:'男'
    })

toRef

toRef的作用，使用ref将某个对象的属性变成响应式数据，修改当前的数据是不会影响到原数据的，

但是使用toRef将对象的某个属性编程响应式数据，修改当前的数据式会影响到原数组的

toRef可以理解为是将对象的某个属性浅拷贝为某个值

setup() {
    const a = ref(0)
    let info = reactive({
      name:'小明',
      age:18,
      sex:'男'
    })
    const nameRef = toRef(info,'name')
    setTimeout(()=>{
      info.name="小红"
       console.log("info",info.name,nameRef.value)//小红 小红
    },3000)
    setTimeout(()=>{
      nameRef.value='我是小虎'
       console.log("info",info.name,nameRef.value)//我是小虎 我是小虎
    },6000)
    console.log("aaa",a.value)
    console.log("info",info)
    onMounted(() => {});
    return {
      a,
      info,
      nameRef
    }
  },

toRef 将经过reactive处理过的数据的某个属性拿到，然后修改这个属性，无论是修改原引用数据类型还是toRef处理后的数据，他们都会相互影响

toRefs

将对象的所有属性浅拷贝为另一个对象，

const user = reactive({
      userName:'小朋友',
      age:25
    })
    const userMore = toRefs(user)
    userMore.userName.value="大朋友"
    console.log("userMore-userName",userMore.userName.value,user.userName)//小朋友 小朋友

使用toRefs处理后的数据 在使用时要加上 .value 不论是在模板还是在js中