vue3常用知识点梳理

这篇具有很好参考价值的文章主要介绍了vue3常用知识点梳理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1，setup

vue3中一个新的配置项，值为函数。组件中所用到的数据，方法，生命周期，监视属性，计算属性等都要配置在setup中。

setup函数的两种返回值

1,若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。

2,若返回一个渲染函数：则可以自定义渲染内容。

注意点

1,尽量不要与Vue2.x配置混用

2,setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。

3,vue3不需要最外层的div,可以直接在template里面写

<template>
    <h1>vue3</h1>
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
    <h2>{{sex}}</h2>
    <button @click="introduce">vue3入门</button>
</template>
<script>

export default{
    setup(){
        //数据
        let name="张三"
        let age=18
        let sex="男"
        //方法
        function introduce(){
            console.log(`我的名字叫${name},我今天${age}岁，我的性别是${sex}`)
        }
        //返回一个对象
        return {
            name,
            age,
            sex,
            introduce
        }
    }
}

</script>

2，ref函数

作用：定义一个响应式数据。创建一个包含响应式数据的引用对象(处理对象数据)。

<template>
    <h1>vue3</h1>
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
    <button @click="modify">动态数据-基本数据类型</button>
    <h3>工作：{{obj.work}}</h3>
    <h3>工资：{{obj.money}}</h3>
    <button @click="GoToWork">动态数据-对象引用类型</button>
</template>
<script>
//需要先引入ref
import {ref} from 'vue'
export default{
    setup(){
        //基本数据类型
        let name=ref("张三")
        let age=ref(18)
        //修改普通数据
        function modify(){
            //修改namd和age
            name.value="李四"
            age.value=28
        }
         //对象类型
        let obj=ref({
            work:"前端开发",
            money:1000
        })
        function GoToWork(){
            obj.value.work="测试"
            obj.value.money=2000
        }
        //返回一个对象
        return {
            name,
            age,
            modify,
            obj,
            GoToWork
        }
    }
}

</script>

3，reactive函数

作用：定义一个对象类型的响应式数据，基本类型还是用ref

语法：const 代理对象=reactive(源对象)接收一个对象或数据，返回一个代理对象Proxy的实例对象,内部是基于ES6 Proxy来进行实现的，通过代码理对象操作源对象内部数据进行操作。

<template>
    <h1>vue3</h1>
    <h2>姓名：{{Obj.name}}</h2>
    <h2>年纪：{{Obj.age}}</h2>
    <h2>工作：{{Obj.job.work}} 我的工资是{{Obj.job.money}}</h2>
    <h2>其它：{{Obj.other}}</h2>
    <button @click="reactiveTest">reactive测试</button>
</template>
<script>
//要先引入reactive
import {reactive} from 'vue'
export default{
    setup(){
        //reactive的使用
        let Obj=reactive({
            name:"李四",
            age:18,
            job:{
                work:"前端开发工程师",
                money:1000
            },
            other:['看书','运动','打球']
        })
        function reactiveTest(){
            Obj.name="王五"
            Obj.age=28
            Obj.job.work="java开发"
            Obj.job.money=1200
            Obj.other[2]='唱歌'
        }
        return {
           Obj,
           reactiveTest
        }
    }
}

</script>

4，reactive对比ref

从定义数据角度

1，ref用来定义基本类型数据（ref也可以用来定义对象或数组类型数据，它内部会自动通过reactive转为代码对象）

2，reactive用来定义对象或数组类型数据

从原理对比角度

1，ref是通过Object.defineProperty()的访问器属性get和set来实现响应的

2，reactive是通过ES6中的proxy来实现响应，并通过Relect操作源对象内部的数据

5，setup的两个注意点

1，set的执行时机：在beforeCreate之前只执行一次，this是undefined。(setup的执行比beforeCreate要早)

2，setup的参数（一共有两个props和context）

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

(2) context上下文对象

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

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

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

//父组件
<template>
  <!-- 添加setupTest自定义事件 -->
  <setupTestVue @setupTest="emitClick" name="张三" age="19">
     <template v-slot:asd>
        <span>哈哈哈</span>
     </template>
  </setupTestVue>
</template>

<script>
import setupTestVue from './components/setupTest.vue'
export default {
  name: 'App',
  components: {
    setupTestVue
  },
  setup(){
    function emitClick(){
      console.log("触发了事件")
    }
    return{
      emitClick
    }
  }
}
</script>

//子组件
<template>
    <h1>sutup的注意点</h1>
    <h2>姓名：{{Obj.name}}</h2>
    <h2>年纪：{{Obj.age}}</h2>
    <button @click="test">测试一下触发父组件中的事件</button>
</template>
<script>
//
import {reactive} from 'vue'
export default{
    beforeCreate(){
        console.log("beforeCreate")
    },
    //对父组件中定义的参数进行接收
    props:['name','age'],
    //对父组件中的事件进行接收
    emits:['setupTest'],
    setup(props,context){
        console.log("setup",props,context.slots)
        let Obj = reactive({
            name:"小赵",
            age:18
        })
        function test(){
            //调用父组件中的emitClick事件
            context.emit('setupTest',666)
        }
        return{
            Obj,
            test
        }
    }
}

</script>

6，计算属性与监视属性

1，computed函数，用之前需要先引用。

<template>
    <h1>sutup的注意点</h1>
    <input type="text" v-model="Obj.name">
    <br/>
    <input type="text" v-model="Obj.age">
    <span>{{computerResult2}}</span>
</template>
<script>
//vue3中的计算属性是一个组合的api，在使用之前需要先引入
import {computed, reactive} from 'vue'
export default{
    beforeCreate(){
        console.log("beforeCreate")
    },
    setup(){
        let Obj = reactive({
            name:"小赵",
            age:18
        })
        //1,计算属性简写形式
        let computerResult1=computed(()=>{
            return Obj.name+'-'+Obj.age
        })
        //2,计算属性完整写法
        let computerResult2=computed({
            get(){
                return Obj.name+'-'+Obj.age
            },
            set(value){
                const newResult = value.split('-')
                Obj.name=newResult[0]
                Obj.age=newResult[1]
            }
        })
        return{
            Obj,
            computerResult1,
            computerResult2
        }
    }
}

</script>

2，watch函数

两种常用的监视用法

<template>
    <h1>监视属性的使用</h1>
    <h2>累加:{{sum}}</h2>
    <h2>累加:{{adds}}</h2>
    <button @click="sum++">点击</button>
    <button @click="adds+='++'">修改信息</button>
</template>
<script>
//需要先引入watch
import {ref,watch} from 'vue'
export default{
    setup(){
        let sum = ref(0)
        let adds=ref('大家好')
        //1,第一种写法，监视一个响应式数据
        // watch(sum,(newvalue,oldvalue)=>{
        //     console.log('sum变民',newvalue,oldvalue)
        // })
        //2，监视所定义的多个响应式数据，直接传一个数组
        watch([sum,adds],(newvalue,oldvalue)=>{
            console.log(newvalue,oldvalue)
        },{immediate:true})
        return{
            sum,
            adds
        }
    }
}

</script>

其它的监视写法

            let Obj=reactive({
                name:"张三",
                age:18,
                other:{
                    job:"软件开发工程师"
                }
            })
            /* 
			情况三：监视reactive所定义的一个响应式数据的全部属性
				1.注意：此处无法正确的获取oldValue
			    2.注意：强制开启了深度监视（deep配置无效）
			*/
			/* watch(Obj,(newValue,oldValue)=>{
				console.log('Obj变化了',newValue,oldValue)
			},{deep:false}) //此处的deep配置无效 */

			//情况四：监视reactive所定义的一个响应式数据中的某个属性,需要是一个函数
			/* watch(()=>Obj.name,(newValue,oldValue)=>{
				console.log('Obj的name变化了',newValue,oldValue)
			})  */

			//情况五：监视reactive所定义的一个响应式数据中的某些属性,监视多个，需要一个数组
			/* watch([()=>Obj.name,()=>Obj.age],(newValue,oldValue)=>{
				console.log('Obj的name或age变化了',newValue,oldValue)
			})  */

			//特殊情况
			watch(()=>person.job,(newValue,oldValue)=>{
				console.log('Obj的job变化了',newValue,oldValue)
			},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

7，watchEffect函数

watchEffect：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed：

1，但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
2，而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

<template>
    <h1>监视属性的使用</h1>
    <h2>累加:{{sum}}</h2>
    <h2>累加:{{adds}}</h2>
    <button @click="sum++">点击</button>
    <button @click="adds+='++'">修改信息</button>
</template>
<script>
//需要先引入watchEffect
import {reactive, ref, watchEffect} from 'vue'
export default{
    setup(){
        let sum = ref(0)
        let adds=ref('大家好')
        //可以
        watchEffect(()=>{
            let val1=sum.value
            let val2=adds.value
            console.log(val1,val2)
            console.log("被调用了")
        })
        return{
            sum,
            adds,
            Obj
        }
    }
}

</script>

8，hooks

1，hooks就是把setup函数中使用的composition API进行封装，和vue2中的mixin很相。

2，可以进行代码复用，让setup中的逻辑更清晰易懂。

具体使用

在src下新建一个hooks文件里面包含一个setup.js文件用于鼠标点击空白处，获取对应的坐标

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',(event)=>{
        //     point.x=event.pageX
        //     point.y=event.pageY
        //     console.log(event.pageX,event.pageY)
        // })
        window.addEventListener('click',savePoint)
    })
    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })
    return point
}

在其它页面中的使用

<template>
    <h1>hook的使用</h1>
    <h2>累加:{{sum}}</h2>
    <button @click="sum++">点击</button>
    <h2>获取当前的鼠标坐标,x:{{point.x}}坐标点y{{point.y}}</h2>
</template>
<script>
import {ref} from 'vue'
import usePoint from '../hooks/setPoint'
export default{
    setup(){
        let sum = ref(0)
        let point = usePoint()
        console.log(point)
        return{
            sum,
            point
        }
    }
}

</script>

9，toRef和toRefs

1，toRef创建一个ref对象，其value值指向另一个对象中的某个属性

2，语法const name=toRef(Obj,"name")

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

<template>
    <h1>toRef的使用</h1>
    <h2>姓名:{{name}}</h2>
    <h2>年纪:{{age}}</h2>
    <h2>年纪:{{money}}</h2>
</template>
<script>
//引入toRef
import {toRef} from 'vue'
export default{
    setup(){
        let Obj={
            name:"张三",
            age:18,
            job:{
                eng:{
                    money:30
                }
            }
        }
        return{
            //Obj,
            name:toRef(Obj,'name'),
            age:toRef(Obj,'age'),
            money:toRef(Obj.job.eng,'money')
        }
    }
}

</script>

4，toRefs与toRef的功能一样，但可以批量创建多个ref对象

<template>
    <h1>toRef的使用</h1>
    <h2>姓名:{{name}}</h2>
    <h2>年纪:{{age}}</h2>
    <h2>年纪:{{job.eng.money}}</h2>
</template>
<script>
//引入toRefs
import {toRefs} from 'vue'
export default{
    setup(){
        let Obj={
            name:"张三",
            age:18,
            job:{
                eng:{
                    money:30
                }
            }
        }
        return{
            ...toRefs(Obj)
        }
    }
}

</script>

10，其它Composition API

一，shallowReactive与shallowRef

1，shallowReactive：只处理对象最外层的响应式（只处理一层）

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

什么时候使用

什么时候使用？

A:如果有一个对象数据，结构比较深，但变化时只是最外层的属性变化就用 shallowReactive

B:如果有一个对象数据，后续功能不会修改该对象中的属性，而是新的对象来替换就使用shallowRef

shallowReactive的使用

<template>
    <h1>shallowReactive的使用</h1>
    <h2>姓名:{{name}}</h2>
    <h2>年纪:{{age}}</h2>
    <h2>年纪:{{job.eng.money}}</h2>
    <button @click="age++">修改年纪</button>
</template>
<script>
//引入toRefs
import {toRefs,shallowReactive} from 'vue'
export default{
    setup(){
        //job里面的数据不会受到影响
        let Obj=shallowReactive({
            name:"张三",
            age:18,
            job:{
                eng:{
                    money:30
                }
            }
        })
        return{
            ...toRefs(Obj)
        }
    }
}

</script>

二，readonly与shallowReadonly

readonly：让一个响应式数据变为直读的(深度)

shallowReadonly:让一个响应式数据变为只读的(只读一层)

应用场景，不希望数据被修改

<template>
    <h1>shallowReactive的使用</h1>
    <h2>姓名:{{name}}</h2>
    <h2>年纪:{{age}}</h2>
    <h2>年纪:{{job.eng.money}}</h2>
    <button @click="age++">修改年纪</button>
    <button @click="job.eng.money++">修改薪水</button>
</template>
<script>
//引入toRefs
import {toRefs,reactive,readonly,shallowReadonly} from 'vue'
export default{
    setup(){
        let Obj=reactive({
            name:"张三",
            age:18,
            job:{
                eng:{
                    money:30
                }
            }
        })
        //禁止响应式的数据进行修改全部
        //Obj=readonly(Obj)
        //只限制第一层的数据只读
        Obj=shallowReadonly(Obj)
        return{
            ...toRefs(Obj)
        }
    }
}

</script>

三，toRaw与markRaw

toRaw

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

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

<template>
    <h1>toRaw的使用</h1>
    <h2>姓名:{{name}}</h2>
    <h2>年纪:{{age}}</h2>
    <h2>年纪:{{job.eng.money}}</h2>
    <button @click="showToRaw">输出最原始的Obj</button>
</template>
<script>
//引入toRaw
import {toRefs,reactive,toRaw} from 'vue'
export default{
    setup(){
        let Obj=reactive({
            name:"张三",
            age:18,
            job:{
                eng:{
                    money:30
                }
            }
        })
        function showToRaw(){
            let O = toRaw(Obj)
            O.age++
            console.log(O)//输出的结果为一个普通对象
        }
        return{
            ...toRefs(Obj),
            showToRaw
        }
    }
}

</script>

markRaw

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

应用场景:
1,有些值不应该被设置为响应式的，例如复杂的第三方库等

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

<template>
    <h1>markRaw的使用</h1>
    <h2>姓名:{{name}}</h2>
    <h2>年纪:{{age}}</h2>
    <h2>年纪:{{job.eng.money}}</h2>
    <button @click="showMarkRaw">输出最原始的Obj</button>
</template>
<script>
//引入markRaw
import {toRefs,reactive,markRaw} from 'vue'
export default{
    setup(){
        let Obj=reactive({
            name:"张三",
            age:18,
            job:{
                eng:{
                    money:30
                }
            }
        })
        function showMarkRaw(){
           let others={address:"湖北武汉",weight:180}
           Obj.others=markRaw(others)
           console.log(Obj)
        }
        return{
            ...toRefs(Obj),
            showMarkRaw,
        }
    }
}
</script>

四，customRef

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

<template>
	<input type="text" v-model="keyWord">
	<h3>{{keyWord}}</h3>
</template>

<script>
	import {ref,customRef} from 'vue'
	export default {
		name: 'App',
		setup() {
			//自定义一个ref——名为：myRef
			function myRef(value,delay){
				let timer
                //需要接受的两个参数track,trigger
				return customRef((track,trigger)=>{
					return {
						get(){
							console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
							track() //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
							return value
						},
						set(newValue){
							console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //通知Vue去重新解析模板
							},delay)
						},
					}
				})
			}

			// let keyWord = ref('hello') //使用Vue提供的ref
			let keyWord = myRef('hello',500) //使用程序员自定义的ref
			
			return {keyWord}
		}
	}
</script>

五，provide和inject

作用：实现祖与后代组件之间的通信

用法：父组件有一个provide选择来提供数据，后代组件有一个inject选项来开始使用这些数据

//祖祖组件
<template>
  <!-- 我是祖祖组件 -->
  <div>
      <h3>我是App组件</h3>
      <h3>{{name}}--{{price}}</h3>
      <ChildsVue/>
  </div>
</template>

<script>
//引入provide
import {reactive,toRefs,provide} from 'vue'
import ChildsVue from './components/ChildView.vue'
export default {
  name: 'App',
  components: {
    ChildsVue
  },
  setup(){
    //将祖祖组件的内容传递到孙组件
    let car = reactive({
      name:"三轮车",
      price:"3000元"
    })
    provide('car',car)//给自己的后代元素传递数据
    return{
      ...toRefs(car)
    }
  }
}
</script>

//父组件
//子组件里面也可以使用inject
<template>
    <div class="Childs">
        <h1>子组件</h1>
        <sonVue/>
    </div>
</template>
<script>
import sonVue from './sonView.vue'
export default{
    name:"ChildView",
    components:{sonVue}
}
</script>
<style>
    .Childs{
        background-color: gray;
        padding: 10px;
    }
</style>

//孙子组件
<template>
    <div class="son">
        <h1>孙组件</h1>
    </div>
</template>
<script>
// 在孙子组件里面进行接受
import {inject} from 'vue'
export default{
    name:"sonView",
    setup(){
        let car = inject('car')
        console.log(car,'+++++')
    }
}
</script>
<style>
    .son{
        background-color: gold;
        padding: 10px;
    }
</style>

六，响应式数据的判断

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

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

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

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

<template>
	<h3>进行响应式代理的测试</h3>
</template>

<script>
	import {ref,reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'
	export default {
		name:'App',
		setup(){
			let car = reactive({name:'三轮车',price:'3000元'})
			let sum = ref(0)
			let car2 = readonly(car)
			console.log(isRef(sum))//true
			console.log(isReactive(car))//true
			console.log(isReadonly(car2))//true
			console.log(isProxy(car))//true
			console.log(isProxy(sum))//false
			return {...toRefs(car)}
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

11，Teleport

teleport是一种能够将我们的组件html结构移动到指定位置的技术

例如父组件里面包含子组件，子组件是一个弹窗，需要把弹窗移动给body

//父组件
<template>
    <div class="son">
        <h1>父组件</h1>
        <DialogVue/>
    </div>
</template>
<script>
// 父组件里面包括子组件
import DialogVue from './DialogView.vue'
export default{
    name:"sonView",
    components:{DialogVue},
}
</script>
<style>
    .son{
        background-color: gold;
        padding: 10px;
    }
</style>

//子组件，要移动的组件
<template>
    <div>
        <button @click="isShow=true">弹窗</button>
        <!--这里的to可以是html，body或者是某个指定的选择器，如果是选择器前面需要加#号-->
        <teleport to="body">
            <div v-if="isShow" class="DialogView">
                <h1>这是一个对话弹</h1>
                <h4>描述</h4>
                <button @click="isShow=false">关闭</button>
            </div>
        </teleport>
    </div>
</template>

<script>
import {ref} from 'vue'
export default {
    name:"DialogView",
    setup(){
        let isShow = ref(false)
        return{
            isShow
        }
    }
}
</script>

<style>
    .DialogView{
        width:300px;
        height: 300px;
        background-color: aqua;
    }
</style>

12，Susperse

等待异步组件渲染时做一些其它的事情

使用步骤

1，引入异步组件

2，使用Susperse包裹好组件，并配置好default与fallback文章来源地址https://www.toymoban.com/news/detail-823784.html

<template>
    <div class="Childs">
        <h1>父组件</h1>
        <Suspense>
            <template v-slot:default>
                <sonVue/>
            </template>
            <template v-slot:fallback>
                <h3>正在加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>
<script>
//静态引入
//import sonVue from './sonView.vue'
//异步引入或者叫动态引入
import {defineAsyncComponent} from 'vue'
const sonVue = defineAsyncComponent(()=>import('./sonView.vue'))
export default{
    name:"ChildView",
    components:{sonVue}
}
</script>
<style>
    .Childs{
        background-color: gray;
        padding: 10px;
    }
</style>

到了这里，关于vue3常用知识点梳理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！