Vue3学习笔记

1.setup,ref,reactive

<template>
  <div>
    <h1>{{name}}</h1>
    <h1>{{price}}</h1>
    <h1>{{info.player}}</h1>
    <h1>{{info.director}}</h1>
    <h1>{{info.a.b.c}}</h1>
    <h1>{{arr}}</h1>
    <button @click="changeName">按钮</button>
  </div>
</template>

<script>

import { reactive, ref } from "vue"

export default {
  setup(props,context) {
    let name=ref("十面埋伏")
    let price =ref(37)

    let info=reactive({
      player : '刘德华',
      director : '张艺谋',
      a : {
        b : {
          c : "ccc"
        }
      }
    })

    let arr=reactive(["ET外星人","拯救大兵瑞恩","辛德勒名单"])

    function changeName(){
      name.value="天下无贼"
      price.value=58
      info.player="金城武"
      info.a.b.c="dddd"
      arr[0]="敦刻尔克"
      info.value.director="徐克"
      console.log(name,price,info,arr);
    }

    return {name,price,changeName,info,arr}
  }
}
</script>

2.computed

<template>
  <div class="con">
    <input v-model="info.player" />
    <input v-model="info.director">
    <input v-model="info.fullName">
    <h3>全名{{ info.fullName }}</h3>
  </div>
</template>

import { reactive, ref,computed } from "vue"

 setup(props,context) {

    let info=reactive({
      player : '刘德华',
      director : '张艺谋',
    })

    //简写形式
    // info.fullName=computed(()=>{
    //   return info.player+"="+info.director
    // })

    //全写形式
    info.fullName=computed({
      get(){
        return info.player+"="+info.director
      },
      set(value){
        const arr=value.split("=")
        info.player =arr[0]
        info.director =arr[1]
      }
    })


    return {info}
  }

3.watch

import { reactive, ref,computed,watch } from "vue"
export default {
  setup(props,context) {
    let sum=ref(0)
    let msg=ref("")
    const obj=reactive({
      name : '无间道',
      player : '刘德华',
      a : {
        b : {
          c :"yyyy"
        }
      }
    })
    
    //监视单个数据
    watch(msg,(nv,ov)=>{
      console.log(nv,ov,"====");
    },{immediate : true})

    //监视多个数据
    watch([sum,msg],(nv,ov)=>{
      console.log(nv,ov,"----");
    },{immediate : true})

    //监视reactive的对象无法获取oldValue
    //此时深度监听无效,默认开启深度监听
    watch(obj,(n,o)=>{
      console.log(n,o,"<<<<");
    })

    //通过函数形式监听对象里面的单个属性
    watch(()=>obj.name,(n,o)=>{
      console.log(n,o,"****");
    })

    //通过函数形式监听对象里面的多个属性,此情况能监听到旧数据
    watch([()=>obj.name,()=>obj.player],(n,o)=>{
      console.log(n,o,"++++");
    })

    //通过函数形式监听对象里面的对象,此时深度监听有效
    watch(()=>obj.a,(n,o)=>{
      console.log(n,o,">>>>");
    },{deep:true})

    return {sum,msg,obj}
  }
}

4.watchEffect

回调内的属性发生变化则触发监听，默认深度监听，与computed不同的是，computed更注重结果，所以必须返回值，但是watchEffect更注重过程，可以监听多个数据的变化进行回调操作，不需要写返回值。

setup(props,context) {
    let sum=ref(0)
    let msg=ref("")
    const obj=reactive({
      name : '无间道',
      player : '刘德华',
      a : {
        b : {
          c :"yyyy"
        }
      }
    })

    watchEffect(()=>{
      const x=sum.value
      const x2=obj.name
      const x3=obj.a.b.c
      console.log(x,x2,x3);
    })

    return {sum,msg,obj}
  }

5.组合式api生命周期

import { onBeforeMount,onBeforeUnmount,onBeforeUpdate,onMounted,onUnmounted,onUpdated } from 'vue'
export default {
  setup(props,context){
    function buy(){
     context.emit("buy",111)
    }

    onBeforeMount(()=>{
      console.log("----onBeforeMount----")
    })

    onMounted(()=>{
      console.log("----onMounted----")
    })

    onBeforeUpdate(()=>{
      console.log("----onBeforeUpdate----")
    })

    onUpdated(()=>{
      console.log("----onUpdate----")
    })

    onBeforeUnmount(()=>{
      console.log("----onBeforeUnmount----")
    })

    onUnmounted(()=>{
      console.log("----onUnmounted----")
    })

    return {buy}
  },
}

6.自定义hooks，类似于vue2的mixins

// 路径src/hooks/usePoint.js
import { reactive,onBeforeUnmount,onMounted } from 'vue'
export default function(){
    const point=reactive({
        x : 0,
        y : 0
      })
      function savePoint(e){
          console.log(e);
          point.x=e.x
          point.y=e.y
      }
  
      onMounted(()=>{
        console.log("----onMounted----")
        window.addEventListener("click",savePoint)
      })
  
      onBeforeUnmount(()=>{
        console.log("----onBeforeUnmount----")
        window.removeEventListener("click",savePoint)
      })

      return point
}

//组件内调用
import usePoint from "@/hooks/usePoint"
export default {
  setup(props,context){
    const point=usePoint()
    return {point}
  }
}

7.toRef与toRefs

toRef将响应式对象内的属性交给外部使用并不丢失响应式，toRefs将响应式对象内的属性全部交给外部使用并不丢失响应式，对象内的对象转换成proxy代理对象

setup(props,context) {
    const data=reactive({
      name : '无间道',
      player : '刘德华',
      a : {
        b : {
          c :"yyyy"
        }
      }
    })

    return {
      name : toRef(data,"name"),
      player : toRef(data,"player"),
      c : toRef(data.a.b,"c"),
      data
    }

    //return {
      //...toRefs(data),
      //data
    //}
  }

8.reactive与shallowReactive

reactive处理深层次的响应式，shallowReactive无法处理对象嵌套对象的响应式，即只处理浅层次的响应式.

9.ref与shallowRef

ref处理深层次的对象的响应式，shallowRef不处理对象数据的响应式

10.readonly与shallowReadonly

readonly:让一个响应式数据变成只读，并且是深层次只读。

shallowReadonly:让一个响应式数据变成只读，但是是浅层次只读。

以上开发用到几率不大。

11.toRaw与markRaw

toRaw:将reactive的对象转换成原始对象;

markRaw:将reactive对象的某一部分属性转换成非响应式的数据，且无法再变成响应式对象.

12.customRef自定义Ref

自定义响应式数据，可以用于防抖与节流

setup(props) {
    const movie=reactive({
      name : '当幸福来敲门',
      price : 35,
      year : 2002
    })

    function myRef(value,layer){
      return customRef((track,trigger)=>{
        let timer
        return{
          get(){
            console.log("读取数据");
            track() //追踪value值
            return value
          },
          set(newV){
            console.log("修改数据");
            value=newV
            clearTimeout(timer)
            timer=setTimeout(()=>{
              trigger() //触发修改
            },layer)
          }
        }
      })
    }
    const mName=myRef("肖申克的救赎",500)
    
    return {
      movie,
      mName
    }
  }

13.provide与inject祖组件与后代组件通信

祖组件

<template>
  <div>
    <h1>祖组件</h1>
    <h1>{{movie.price}}</h1>
    <h1>{{movie.year}}</h1>
    <About></About>
  </div>
</template>

<script>

import { reactive, ref,customRef,provide } from "vue"

import About from "./views/About.vue"

export default {
  components : {
    About,
  },
  setup(props) {
    const movie=reactive({
      name : '当幸福来敲门',
      price : 35,
      year : 2002
    })

    provide("movie",movie)
    return {
      movie,
    }
  }
}
</script>

子组件

import {inject} from "vue"
setup(props,context){
    const movie=inject("movie")
    return {movie}
}

孙组件

import {inject} from "vue"
export default {
  name: 'Home',
  setup(props) {
    const movie=inject("movie")
    console.log("孙组件",movie);
    return {
       movie
    }
  }
}

14.isReactive,isRef,isReadonly, isProxy

import { reactive, ref,customRef,provide, readonly, isReactive,isRef,isReadonly, isProxy } from "vue"

const movie=reactive({
      name : '当幸福来敲门',
      price : 35,
      year : 2002
})
const s=ref(0)
const movie2=readonly(movie)
console.log(isRef(s));
console.log(isReactive(movie));
console.log(isReadonly(movie2));
console.log(isProxy(movie2));

15.teleport组件，将组件移位到想要的位置

<teleport to='body' >
     <div v-if="isShow" class="mask">
           <div class="con" >
               <button @click="isShow=false">点击关闭</button>
           </div>
     </div>
</teleport>

16.异步组件与Suspense实现组件懒加载

父组件

<template>
  <div class="grandPa">
    <h1>祖组件</h1>
    <Suspense>
      <template v-slot:default>
          <About></About> 
      </template>
      <template v-slot:fallback>
          <h3>稍等。。。。</h3>
      </template>
    </Suspense>
  </div>
</template>

<script>

import {defineAsyncComponent } from "vue"
const About=defineAsyncComponent(()=>import("./views/About.vue"))

export default {
  components : {
    About
  },
  setup(props) {
    return {}
  }
}
</script>

子组件

<template>
  <div class="about">
    <h2>子组件</h2>
    <h3>{{s}}</h3>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  async setup(props,context){

    const p=new Promise((resolve,reject)=>{
      setTimeout(()=>{
        const s=ref(0)
        resolve(s)
      },2000)
    })

    return await p
  }
}
</script>

17.其他修改

Vue.config.xxx=>app.config.xxx
Vue.component=>app.component
Vue.directive=>app.directive
Vue.mixin=>app.mixin
Vue.use=>app.use
Vue.prototype=>app.config.globalProperties