Vue3笔记

ref用来操作基本数据类型,不会影响到元数据，但是会更新视图层

  // 基本数据类型 ref 
    console.log(1233);
    const msg = 'hello Vue'
    const num = ref(0)

    const add = ()=>{
      num.value++
    }
    return {msg,num,add}

reactive用来操作引用数据类型，不能操作基本数据类型

  const obj = reactive({
      name:'小明',
      age:18,
    })
    const btn = ()=>{ 
      obj.name = '小红'
    }
    return {obj,btn}

    // 深层
  const obj = reactive({
      name:'小明',
      age:18,
      arr:[{xxx:999}]
    })
    const btn = ()=>{ 
      obj.name = '小红'
      obj.arr[0].xxx = '****999'
    }
    return {obj,btn}

toRef会影响到元数据，但是不会跟小新视图层

toRefs

    const obj = {name:'小明',age:18,a:1,b:2,c:3}
    const res = reactive(obj)
    return{...toRefs(res)}

     <h1>{{name}}</h1>
     <h2>{{age}}</h2>
     <p>{{a}}   {{b}}  {{c}}</p>

计算属性computed

 const mayun = ''
    const mahua = '' 
    const obj = reactive({mahua,mayun})
    const sum = computed(()=>{
      return obj.mahua + obj.mayun
    })
    return {...toRefs(obj),sum}

侦听器 watch

// 监听普通数据类型
const num = ref(0)
    const num2 = ref(1)

    watch([num,num2],(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    })

    return {num,num2}


    // 监听对象  num这个属性
        const obj = reactive({name:'小明',num:10})

        watch(()=>obj.num,(newVal,oldVal)=>{
          console.log(newVal,oldVal);
        })
          return{obj}

  }


  // 
  // 监听整个obj,没有old值
      const obj = reactive({name:'小明',num:10})

  watch(obj,(newVal,oldVal)=>{
    console.log(newVal,oldVal);
  })
    return{obj}

  }

组件传值

// 父组件向子组件传递数据
// App.vue
setup(){ 
    const obj = reactive({name:'码云',age:12})
    provide('name',obj)  //传
    return {obj}
  }

  // child.vue

   setup(){
    console.log(111);
    const obj = inject('name')  //收
    return{obj}
  }

安装 element-plus

npm install element-plus --save