vue3-学习篇

使用vite创建

新一代前端构建工具

官网：vitejs.cn

优势：

开发环境中，无需打包操作，可快速的冷启动。

轻量快速的热重载（HMR）。

真正的按需编译，不再等待整个应用编译完成

步骤：

npm init vite-app 项目名

cd 项目名

npm i

npm run dev

main.js中引入的不再是Vue构造函数了，引入的是一个名为createapp的工厂函数。

main.js中创建应用实例对象-app(类似于之前vue2中的vm，但app比vm更“轻”）。

可以没有根标签

setup:组件中所用到的所用的数据方法等，均要配置在setup中。并且需要把定义的东西返回出去

h:渲染函数import {h} from 'vue' 在setup中 return ()=>h('标签名'，'内容')

ref:定义一个响应式的数据-会生成一个引用对象 使用变量名.value来获取修改，标签中直接变量名就可以了.-object.defineProperty()

reactive:定义一个对象类型的响应式数据-proxy

vue2响应式弊端：

1.新增属性、删除属性，界面不会更新。

2. 直接通过下标修改数组界面不会自动刷新。

vue3响应式原理：

1.通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。

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

setup两个注意点:

执行的时机：在beforeCreate之前执行一次，this是undefinde.

setup的参数：setup(props,context){}

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

context：上下文对象

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

slots：收到的插槽内容，相当于this.$slots.

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

计算属性computed函数

与vue2.x中computed配置功能一致

写法：

import {reactive,computed} form 'vue'
setup(){
    let person = reactive({
        firsName:'张',
        lastName:'三'
    })

//计算属性——简写（没有考虑计算属性被修改的情况）
    let 属性名 = computed(()=>{
        return person.firsName + '-' + person.lastName
    })
    person.fullName = computed(()=>{
        return person.firsName + '-' + person.lastName
    })

//计算属性——完整写法（考虑读和写）
    person.fullName = computed(()=>{
        get(){
            return person.firsName + '-' + person.lastName
        }
        set(value){
            const nameArr = value.split('-')
            person.firsName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })

    return {
        firsName
    }
}

监听属性watch函数：

// 情况一：监视ref所定义的一个响应式数据
watch(变量名,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{immediate:true})

// 情况二：监视ref所定义的多个个响应式数据
watch([变量名1,变量名2],(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{immediate:true})

// 情况三：监视reactive所定义的一个响应式数据
    //注意：1.此处无法正确的获取OldValue
    //     2.强制开启了深度监视（deep配置无效）
watch(变量名,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{deep:false})//此处的deep配置无效

// 情况四：监视reactive所定义的一个响应式数据中的某个属性
watch(()=>变量名.属性名,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
})

// 情况五：监视reactive所定义的一个响应式数据中的某些属性
watch([()=>变量名.属性名1,()=>变量名.属性名2],(newValue,oldValue)=>{
    console.log(newValue,oldValue)
})

// 特殊情况：监视reactive所定义的一个响应式数据中的对象属性
watch(()=>变量名.属性名,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{deep:true})//此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效

watchEffect函数：

watch的套路是：既要指明监视的属性，也要指明监视的回调。

watchEffect的套路是：不用指明监视哪个属性，监视中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed：

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

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

watchEffect(()=>{
    const x1 = 变量名
})

生命周期

vue3	vue2	描述
setup	beforeCreate	实例创建前执行
setup	created	实例创建后执行
onBeforeMount	beforeMount	组件挂载前执行
onMounted	mounted	组件挂载后执行
onBeforeUpdate	beforeUpdate	数据更新前执行
onUpdated	updated	数据更新后执行
onBeforeUnmount	beforeDestroy	组件实例被卸载前执行
onUnmounted	destroyed	组件实例被卸载后执行

定义hook函数:

什么是hook? —— 本质是一个函数，把setup函数中使用的composition API （组合API）进行了封装。

类似于vue2.x中的mixin。

自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。

toRef、toRefs

作用：创建一个ref对象，其value值指向另一个对象中的某个属性。

语法：const name = toRef(变量名,'属性名')

应用：要将响应式对象中的某个属性单独提供给外部使用时。

扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(变量名)

shallowReactive与shallowRef

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

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

什么时候用？

如果有一个对象数据，结构比较深，但变化时只是外层属性变化===>shallowReactive。

如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换===>shallowRef。

readonly与shallowReadonly

readonly：让一个响应式数据变为只读的（深只读）。

shallowReadonly：让一个响应式的数据变为只读的（浅只读）。

应用场景：不希望数据被修改时。

toRaw与markRaw

toRaw：

作用：将一个由reactive生成的响应式对象转为普通对象。

使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

markRaw：

作用：标记一个对象，使其永远不会再成为响应式对象。

应用场景：

1. 有些值不应该设置为响应式的，例如复杂的第三方类库等。

2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

customRef:

作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制。

//示例 实现防抖效果
<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>

<script>
    import {ref,customRef} from 'vue'
    export default {
        name:'Demo',
        setup(){
            //了他 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('hell',500)//使用程序员自定义的ref

            return {keyWord}
        }
    }
</script>

provide与inject

作用：实现祖孙组件之间的通信

套路：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据

具体写法：provide('传递名',数据变量名); const 变量名 = inject('传递名')

响应式数据的判断

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

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

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

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

Fragment

在vue2中：组件必须有一个根标签

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

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

Teleport

什么是Teleport？——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置：body/#app/html">
    内部标签内容
</teleport>

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用步骤

1.异步引入组件

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

2.使用Suspense包裹组件，并配置好default与fallback

<Suspense>
    <template v-slot:default>
        <Child/>
    </templat>
    <template v-slot:fallback>
        <h3>加载中。。。</h3>
    </templat>
</Suspense>

注：子组件中可以用 async await Promise 使子组件数据慢几秒后再展示

全局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

其他改变

1.data选项应始终被声明为一个函数。

2.过度类名的更改：

//vue2.x写法
.v-enter,
.v-leave-to {
    opacity: 0;
}
.v-leave,
.v-enter-to {
    opacity: 1;
}

//vue3.x写法
.v-enter-from,
.v-leave-to {
    opacity: 0;
}
.v-leave-from,
.v-enter-to {
    opacity: 1;
}

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

4.移除v-on.native修饰符

父组件中绑定事件

<Child v-on:close="change" v-on:click="fun" />

子组件中声明自定义事件

<script>
    export default {
        emits: ['close']
    }
</script>

5.移除过滤器（filter）

过滤器虽然看起来方便，但它需要一个自定义语法，打破大括号内表达式是”只是JavaScript“的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或用计算属性去替换过滤器。