vue3小笔记

一.创建vue3确保vuee-cli是4.5版本以上
二.vue3在main.js中的引入与vue2不同

import {createApp } from 'vue'
 
import App from './App.vue'
 
createApp(App).mount('#app')

三.sutpu是一个函数，把变量，方法，以前的勾子函数都放里面
async在没在使用Suspense组件时是不能出现在sustpu中的
template下可以不用加div根标签
vue3的方法变量都写到setpu函数体内
vue3也可以使用vue2的配置，vue2能读取vue3的数据 ，用this.（vue3返回的数据）
vue3的setpu不能读取vue2的数据
vue3和vue2不要混用
vue3和vue2名相同 setpu优先
setup执行的时机

在beforeCreate之前执行一次，this是undefined。

setup的参数

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

context：上下文对象

attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

slots: 收到的插槽内容, 相当于 this.$slots。

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

四.ref 给基本类型做数据响应式用的
基本数据类型想要数据响应式，也就是在setpu里改了数据，想要模版也跟着变的话就要使用到ref

先要引入 import { ref } from 'vue'
把基本数据类型放到ret方法里 如：let name=ref("张三“）
在setpu上改的放要加个value 如，name.value='李四'
改了之后在模版上就不用加value,直接{{name}}
通过Object.defineProperty()的get和set来实现响应式
想要用ref方法包对象类型 做数据响应式

在setpu上修改就要obj.value.name='李四'
但是只调用第一层的数据，再下一层还是对象就不能再修改了
五.reactive 给对象类型做数据响应式用的
定义一个对象类型的响应式数据,处理不了基本类型的（基本类型用ref)

先要引入ref import { reactive } from 'vue'
js处理数据不用加.value
可以监测到深层的对象
对数组类型也能监测，
基本数据要使用可以包装成一个对象再用reactiove()
原理是用了proxy代理，还通过了windom身上的Reflect反射

new Proxy(data, {
    // 拦截读取属性值
    get (target, prop) {
        return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
        return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
        return Reflect.deleteProperty(target, prop)
    }
})
 
proxy.name = 'tom'  

六.setup中的两个参数，props,context(attrs,slots,emit)
setup(props)第一个参数是props接收到的数据，会整理成一个proxy对象
setup(props,context)第二个参数是一个对象，里面有attrs emit slots
attrs相当于vue2的$attrs，当没有用props声明接收就会出现在vue3的context.attrs里
slots是使用是插槽，父组件传过来的节点
emit触发自定义事件 使用时像props一样先配置 接收 emits:['hello']
七.vue3里的computed（）
需要通过import引入
vue3的写法与vue2功能是一致的
要写到steup（）里面
vue3里的computed是一个方法,简写时括号里直接放一回调，完整写法放一个{}里面有get和set

import {computed} from 'vue'
 
setup(){
    ...
    //计算属性——简写
    let fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    })
    //计算属性——完整
    let fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

八.watch监测函数
vue3中使用watch方法的多种情况

1.在vue3中的watch是一个方法，而vue2里是一个配置项，所以可以使用多个watch，要放置在setup(要通过import引入 import {watch} from 'vue'
2.watch里面有三个参数
3.第一个是监测的对象
4.第二个是要执行的回调，回调里第一个参数是修改后的新值，第二个是修改前的值
5.第三个参数是配置对象用{}包住，有immediate:true,和deep:true ，immediate:true是初始化时就调用一次 ，deep:true是开启深度监视

6. 监测ref时，不用加.value,如果监测的是对象就要加.value,如果不加.value可以开启deep:true;

7.监测的是reactive定义的数据时，修改后的值没法得到

8.监测的是对象的属性，第一个参数就要用一个回调，回调里的返回值放监视的对象属性，监视 多个对象属性就要放在一个数组里，注意的是正常情况下监视的是对象会自动开启深度监视，改成false无效

9.监测的是对象的属性也是对象的话，vue3中特殊情况，deep:false配置才能生效.默认是false,如果里面还有再深层次的对象的放就要开启deep:true;才能监视到更深层次的对象属性

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
},{immediate:true})
 
//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
    console.log('sum或msg变化了',newValue,oldValue)
}) 
 
/* 情况三：监视reactive定义的响应式数据
            若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
            若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效
 
//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 
 
//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})
 
//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

九.watchEffect函数 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed：

但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。

而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

十.生命周期 有两个不同beforeUnmount 和unmount
在vue3中的setup中使用，要在前面加on如onbeforeCreate( ()=>{})括号里面放一回调
beforeCreate() created() beforeMount() mounted() beforeUpdate() Update()
beforeUnmount(){} vue2 beforeDestroy
unmount(){} vue2 destroyed
beforeCreate() created()在setup执行之前执行
十一.自定义hook函数
把封装的代码写在一个js文件上，放在hooks目录上，hooks目录要放在src目录下，在组件都要用就可以直接引入调用即可，
记得要return返回值才有用
十二.toRef和toRefs
使用toRef要先通过import引入
toRef如果返回值不通过toRef方法包果，就不是响应式数据
toRef方法里的第一个参数是对象，第二个参数是属性，深层次的对象引用在第一个参数里点出来
toRefs也要先引入
可以批量处理对象，有一个参数就可以了，参数是对象
通过...出来的都是第一层的属性，所以在模版上深层次的还是要点出来
十三.shallowReactive和shallowRef
shallowReactive只响应第一层数据属性，深层次数据的不响应
与reactive的区别就是，reactive可以对深层次数据响应
shallowRef对对象类型的数据不进行响应式
与ref区别，ref对对象用.value形式可以响应式
十四.customRef 自定义ref

<template>
    <input type="text" v-model="keyword">
    <h3>{{keyword}}</h3>
</template>
 
<script>
    import {ref,customRef} from 'vue'
    export default {
        name:'Demo',
        setup(){
            // let keyword = ref('hello') //使用Vue准备好的内置ref
            //自定义一个myRef
            function myRef(value,delay){
                let timer
                //通过customRef去实现自定义
                return customRef((track,trigger)=>{
                    return{
                        get(){
                            track() //告诉Vue这个value值是需要被“追踪”的
                            return value
                        },
                        set(newValue){
                            clearTimeout(timer)
                            timer = setTimeout(()=>{
                                value = newValue
                                trigger() //告诉Vue去更新界面
                            },delay)
                        }
                    }
                })
            }
            let keyword = myRef('hello',500) //使用程序员自定义的ref
            return {
                keyword
            }
        }
    }
</script>

十五.provide 与 inject
父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

祖组件中
setup(){
    ......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}

后代组件中
setup(props,context){
    ......
    const car = inject('car')
    return {car}
    ......
}

十六.响应式数据的判断
isRef: 检查一个值是否为一个 ref 对象

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

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

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

十七.Teleport能够将我们的组件html结构移动到指定位置的技术

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

十八.Suspense等待异步组件时渲染一些额外内容，让应用有更好的用户体验
异步引入，网络慢时子组件后出

用Suspense包住的，网速快时出default,网络慢时出fallback,两个template都是同一个东西

使用了Suspense组件才能用async，用了Promise也可以出现延时加载

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

十九.全局API的转移
将全局的API，即：Vue.xxx调整到应用实例（app）上

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
————————————————
版权声明：本文为CSDN博主「ungame」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/A081127/article/details/124554466
————————————————
版权声明：本文为CSDN博主「ungame」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/A081127/article/details/124554466