vue3基本使用

vue3中响应式原理

通过Proxy代理对象：拦截对象中任意属性的变化

通过Reflect（反射）：对被代理对象的属性进行操作

模拟v3响应式
new Proxy(obj,{
      get(target,propname){
        console.log(`读取属性了${target[propname]}`);
        return Reflect.get(target,propname)
      },
      set(target,propname,value){
        console.log(`修改属性了`)
        return Reflect.set(target,propname,value)
      },
      deleteProperty(target,propname){
        console.log('删除对象属性了');
        return Reflect.deleteProperty(target,propname)
      }
    })

reative与ref的对比

ref一般用来定义基本数据类型

reative一般用来定义复杂数据类型（对象或者数组）

ref是通过 Object.defineProperty（）的get和set来实现响应式

reative是通过Proxy来实现响应式

ref定义的数据在操作的时候需要加上.value,读取数据时模板中不需要加.value

reative定义的数据操作与读取均不需要加.value

setup的两个注意点

1.setup在beforcreate之前执行，这时候this是undefined

2.setup有两个参数

props:值为对象，包含组件外部传递过来且组件内部声明接收了的属性

context:上下文对象（里面包含以下三个属性）

attrs:值为对象，包含组件外部传递进来，但没有在props中接受的属性相当于this.$attrs

slots:收到的插槽内容（里面是虚拟dom节点）相当于this.$slots

emit:分发自定义事件的函数，相当于this.$emit

计算属性与监听

import {computed,watch} from 'vue'

简写计算属性
let 变量名 = computed(()=>{
     return 需要计算的属性
 })
计算属性完整写法
 let 变量名 = computed({
      get(){
          return 需要计算的属性
      },
      set(value){
          //value是更改后的值
      }
    })
 ------------监听属性-------------------
     
---监听ref定义的响应式数据---
  //监视基本数据类型
   watch(num,(newname,oldname)=>{
      console.log('被修改了',newname,oldname);
    })
  //监视多个基本数据类型
   watch([num,sum],(newname,oldname)=>{
      console.log('被修改了',newname,oldname);
    })
---监听reative定义的响应式数据---
   //监听整个对象时， oldname（更改前的值）无法正确获取
  watch(obj,(newname,oldname)=>{
      console.log('被修改了',newname,oldname);
    })
     //单独监听对象中的某个属性
     watch(() => obj.name,(newname,oldname)=>{
      console.log('被修改了',newname,oldname);
    })
    //监听对象中的某些属性
    watch([() => obj.name,() => obj.test],(newname,oldname)=>{
      console.log('被修改了',newname,oldname);
    })
    //特殊情况，监听对象中的对象，此处需要用deep才可以监听到， oldname（更改前的值）无法正确获取
    watch(() => obj.bo,(newname,oldname)=>{
      console.log('被修改了',newname,oldname);
    },{deep:true})

WatchEffect函数

使用方法

import {WatchEffect} from 'vue'
//WatchEffect函数中使用的属性均会被监视
WatchEffect(()=>{
    
})

toRef与toRefs

使用方法

import {toRef，toRefs} from 'vue'
 
//创建一个ref对象，其属性的值指向另一个对象中的某个属性
//应用将对象中的某个属性单独提供给外部使用
let name  = toRef(obj,'name')

//toRefs与toRef功能一致，但可以批量创建多个ref对象
return{
    ...toRefs(obj)
}

shallowReactive与shallowRef

shallowReactive:只处理对象最外层的响应式（假如对象嵌套多层，除最外层其余无响应式）

shallowRef：只处理基本数据类型的响应式。不进行对象的响应式处理

readonly与shallowreadonly

readonly:让一个响应式变为只读的（深只读）

shallowreadonly：让一个响应式变为只读的（浅只读，只有最外层数据只读，内层数据可以更改）

toRaw与markRak

toRaw:将一个reative定义的响应式对象转为普通对象

markRak：标记一个对象，使其永远不会成为响应式对象

customRef

自定义ref



let jj = myref('hollo')

function myref(value){
  return customRef((track,trigger)=>{
      return {
        get(){
          track() //通知vue追踪value的变化
            return value
        },
        set(newvalue){
          value = newvalue
          trigger() //通知vue去重新解析模板
        }
      }
  })
}

provide 与inject

实现父组件与后代组件通信

//父组件使用provide传递参数
provide('参数名'，传递的参数)

//后代组件使用inject接收
let 变量接收 = inject('父组件设置的参数名')

响应式数据判断

1.isRef:检查一个值是否为ref对象

2.isReactive:检查一个对象是否由reactive创建的响应式代理

3.isReadonly:检查一个对象是否由readonly创建的只读代理

4.isProxy:检查一个对象是否由reactive或者readonly方法创建的代理

Fragment

在vue3中，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中

好处：减少标签层级，减少内存占用

Teleport

Teleport：将html结构移动到指定位置


<Teleport to = '移动位置'>
    html结构
 <Teleport/>

Router基本使用

import {createRouter,createWebHashHistory，createWebHistory} from 'vue-router'

let routes = [
    {path:'/home',component:() => import('./components/HelloWorld.vue')},
    {path:'/home1',component:() => import('./components/HelloWorld1.vue')},

]

let router = createRouter({
  routes,
  history:createWebHashHistory() //路由模式必选
})

createApp(App).use(router).mount('#app')