【无标题】vue3笔记

vue3不再需要唯一根标签，好处就是 减少标签层级, 减小内存占用

常用组合式API

setup：定义变量和方法的地方，需要return出去，setup里没有this,修改只能用.value格式，生命周期在beforecreeat前，this打印出来是undefind，setup可以接受两个参数：props组件传参，context上下文对象，包含attrs，solts，emit，只执行一次

当接受参数时必须全部使用

使用插槽用v-solt=''

return {
    ...toRefs(names)
}

ref：响应式,修改响应的值用.value，展示可以用name.valeu，也可以省略，

reactive：定义对象类型的响应数据，不用每次都.value，直接return会丢失响应式，使用。。。torefs简化

setup(){
    let data = reactive({
        name:'11',
        age:'18',
        job:{
            say:'33'
        })
       function say(){
            data.name = '22'
            data.job.say = '44'
        }
    return {data ,say}
}

ref与reactive的区别

• ref用来定义：基本类型数据。
• ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
• ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
• reactive用来定义：对象或数组类型数据。
• reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源代码内部的数据。
• reactive定义的数据：操作数据与读取数据：均不需要.value。

ref可以定义对象或数组的，它只是内部自动调用了reactive来转换。

响应式原理：proxy代理，reflet反射

const p = new Proxy(data,{
    //读取属性
    get (target,propname){
        return Reflect.get(target, prpname)
    },
//修改属性或添加属性时调用
    set (target,propname,value){
        return Reflect.get(target, prpname,value)
      }
//删除属性时调用
    deleteProperty (target, propName) {
    	return Reflect.deleteProperty(target, propName)
    }
})

computed：需要引入，可以直接使用

import {reactive,computed} from 'vue'
setup(){
    let data = reactive({
            name:'11'
    })
    fullname = computed(()={
        return data.name + '11'
      })
//想修改计算出来的值需要用get，set
  names.fullName=computed({
      get(){
        return names.familyName+'.'+names.lastName
      },
      set(value){
        let  nameList=value.split('.')
        names.familyName=nameList[0]
        names.lastName=nameList[1]
      }
    })

    return{data,fullname }
}

watch：监听zpi，需要引入

import {ref,watch,reactive} from 'vue'
setup(){
    let num = ref('0')
    watch(num,(newV,oldV=>{
        consoel.log(newV.oldV)
    }))
    watch([num,num1],(newV,oldV=>{//或者监听数组newValue和oldValue也就是数组，那么数组中的第一个就是你监视的第一个参数。
        consoel.log(newV.oldV)
    }),{immediate:true,deep:true})
    return(num)
}
但是newV和oldV值一样，无论是ref或者reactive定义，ref定义的对象会自动调用reactive）,所以在监视reactive定义的响应式数据时，oldValue无法正确获取,并且你会发现，它是强制开启深度监视（deep:true），并且无法关闭。所以我们用
watch(()=>names.age,(newValue,oldValue)=>{
  console.log('names改变了',newValue,oldValue)
})
watch([()=>names.age,()=>names.familyName],(newValue,oldValue)=>{
  console.log('names改变了',newValue,oldValue)//监听多个
}，{deep:true})

watchEffect是vue3的新函数，它和watch是一样的功能,watchEffect有点像computed，都是里面的值发生了改变就调用一次，但是呢computed要写返回值,而watchEffect不用写返回值。

• 自动默认开启了immediate:true
• 用到了谁就监视谁

watchEffect(()=>{
    const one = num.value
    const tow = person.age
    console.log('watchEffect执行了')
})

生命周期

 vue3中生命周期没有多大的改变，只是改变了改变了销毁前，和销毁，让它更加语义化了 beforeDestroy改名为beforeUnmount,destroyed改名为unmounted，beforeCreate与created并没有组合式API中,setup就相当于这两个生命周期函数

在vue3中也可以按照之前的生命周期函数那样写，只是要记得有些函数名称发生了改变

在setup里面应该这样写

• beforeCreate===>Not needed*
• created=======>Not needed*
• beforeMount ===>onBeforeMount
• mounted=======>onMounted
• beforeUpdate===>onBeforeUpdate
• updated =======>onUpdated
• beforeUnmount ==>onBeforeUnmount
• unmounted =====>onUnmounted、

hooks函数：复用，

//一般都是建一个hooks文件夹，都写在里面
import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
   //鼠标点击坐标
   let point = reactive({
      x:0,
      y:0
   })

   //实现鼠标点击获取坐标的方法
   function savePoint(event){
      point.x = event.pageX
      point.y = event.pageY
      console.log(event.pageX,event.pageY)
   }

   //实现鼠标点击获取坐标的方法的生命周期钩子
   onMounted(()=>{
      window.addEventListener('click',savePoint)
   })

   onBeforeUnmount(()=>{
      window.removeEventListener('click',savePoint)
   })

   return point
}
//在其他地方调用
import useMousePosition from './hooks/useMousePosition'
let point = useMousePosition（）

 toRef和toRefs：代码使用时.value，可以在return时将数据变成响应式自动修改

return {
    ...toRefs(names)
}//只会结构一层，深层里的代码还是要老实的写

 provide和inject：组件传参

//父
import { provide } from 'vue'
setup(){
 let fullname = reactive({name:'阿月',salary:'15k'})
 provide('fullname',fullname) //给自己的后代组件传递数据
 return {...toRefs(fullname)}
}
//后代
import {inject} from 'vue'
setup(){
 let fullname = inject('fullname')
 return {fullname}
}

下面是vue3给的一些判断方法

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

isReactive：检查对象是否是由 reactive 创建的响应式代理。

isReadonly: 检查对象是否是由 readonly 创建的只读代理。

isProxy：检查对象是否是由 reactive 或 readonly 创建的 proxy。

teleport 提供了一种有趣的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。

其实就是可以不考虑你写在什么位置，你可以定义teleport在任意标签里进行定位等（常见操作为模态框），除了body外，还可以写css选择器（id，class）

定义了一个vue-router然后引入的useRoute,useRouter 相当于vue2的 this.$route，this.$router,然后其他之前vue2的操作都可以进行

import {useRouter,useRoute} from "vue-router";
setup(){
  const router= useRouter()
  const route= useRoute()
  function fn(){
    this.$route.push('/about')
  }
  onMounted(()=>{
    console.log(route.query.code)
  })
  return{
    fn
  }
}

全局API的转移

2.x 全局 API（Vue）	3.x 实例 API (app)
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

移除v-on.native修饰符

移除过滤器（filter