Vue3核心之响应式

简介: Vue3核心之响应式

网络异常,图片无法展示
|



1、前言


已经掌握了vue3入门的同学,在实际学习和开发中用的最多的概念肯定会有响应式,今天我们就一起来复习下关于vue3的响应式用法。


因为实际工作中我们通常会使用脚手架创建项目,所以我们直接在脚手架项目中进行演示。


2、选项式Api和组合式Api


2.1、选项式Api


熟悉vue2的同学对选项式Api很熟悉了,vue也兼容选项式Api,在vue3中选项式Api的代码格式如下:


<template>
    <button @click="add1">点我啊</button>
    {{ num }}
</template>
<script>
    export default {
        data(){
            return {
                 num: 0
            }
        },
        methods: {
            add1(){
                this.num++
            }
        }
    }
</script>
<style>
</style>
复制代码


这种data()中存放数据、methods中存放方法的写法就是选项式Api。


这种方式的好处就是数据、方法隔离,代码结构清晰,易于入门和理解。


2.2、组合式Api


为了解决不同逻辑的数据和方法分离的现状,vue3引入了组合式Api,即将整个逻辑的数据和方法等放到一起,相比选项式对开发者的业务拆分能力和代码组织能力更高了。


组合式Api要求我们要将响应式的变量声明在setup函数中,setup函数是一个专门用于组合式Api的钩子函数。而且我们需要借助reactive函数来创建响应式的对象。


<template>
    <button @click="add1">点我啊</button>
    {{ datas.num }}
</template>
<script>
    import {reactive} from 'vue'
    export default {
    setup() {
        const datas = reactive({ num: 0 })
        function add1(){
            datas.num++
        }
        return {
            datas,
            add1
        }
    }
 }
</script>
<style>
</style>
复制代码


如上,即为组合式Api的典型写法。


在组合式Api中一定记得将需要暴露到模板的对象return出去(单独使用setup的时候)。


3、更多声明响应式对象的方法


前面我们已经了解了data方法(选项式Api中使用)、reactive(组合式Api中使用)两种不同的声明响应式对象的方式,那还有其他方式吗?


3.1、ref


因为reactive方法仅仅对,对象,数组、Map、Set类型生效,对于string、number、boolean类型是无效的。


鉴于这种情况,vue3引入了ref方法来帮助开发者创建任意类型的响应式对象。


<script>
    import {reactive,ref} from 'vue'
    export default {
    setup() {
        //const num = reactive(0)    reactive不支持声明number类型的响应式对象
        const num = ref(0)
        function add1(){
            this.num++
        }
        return {
            num,
            add1
        }
    }
 }
</script>
复制代码


3.2、toRef


当我们想要将reactive创建的响应式对象的某个属性单独传递出来时,我们可以使用toRef实现。


<template>
    <button @click="add1">点我啊</button>
    {{ tms }} 
    <div>
        姓名:{{ datas.name }}
        年龄:{{ datas.age }}
    </div>
</template>
<script setup>
    import {reactive,toRef} from 'vue'
        const datas = reactive({name: 'phyger',age: 18, num: 0})
        // 通过toRef将datas中的num转换为了ref对象
        const tms = toRef(datas,'num')
        const add1=()=>{
            // 在此对tms的值进行修改
            tms.value++
        }
</script>
复制代码


3.3、toRefs


类似toRef,toRefs可以将reactive声明的响应式变量的所有元素都转换为ref对象。


<template>
    <button @click="add1">点我啊</button>
    {{ tms.num }} 
    <div>
        姓名:{{ tms.name }}
        年龄:{{ tms.age }}
    </div>
</template>
<script setup>
    import {reactive,toRefs} from 'vue'
        const datas = reactive({name: 'phyger',age: 18, num: 0})
        // 通过toRef将datas中的num转换为了ref对象
        const tms = toRefs(datas)
        const add1=()=>{
            // 在此对tms的值进行修改
            tms.num.value++
        }
</script>
复制代码


toRefs的返回值是一个字典,格式为:


{name: ObjectRefImpl, age: ObjectRefImpl, num: ObjectRefImpl}

如上,我们已经将reactive定义的对象元素全部转换为了ref对象,而且属性值的变化会同步更新到reactive的对象中。


3.4、isRef


vue3为我们提供了判断时否为ref对象的方法,即isRef。


<script setup>
    import {reactive,toRefs,isRef} from 'vue'
        const datas = reactive({name: 'phyger',age: 18, num: 0})
        // 通过toRef将datas中的num转换为了ref对象
        const tms = toRefs(datas)
        const add1=()=>{
            // 在此对tms的值进行修改
            tms.num.value++
            // 判断datas,datas.name,tms,tms.age是否为ref对象
            console.log(tms) // toRefs的返回值是一个字典{name: ObjectRefImpl, age: ObjectRefImpl, num: ObjectRefImpl}
            console.log(isRef(datas),isRef(datas.name),isRef(tms),isRef(tms.age))
            // 输出是 false false false true
        }
</script>
复制代码


结果:


对象 是否ref对象
datas false
datas.name false
tms flase
tms.age true


4、更多


4.1、简化在setup中的return


前面我们有说,在组合式Api中,我们必须将模板需要的属性暴露出去。通常大多数的属性都是需要暴露出去的,为了方便,vue3支持在单文件组件(SFC)的场景下,使用</code>来简化代码(<code>export</code>也不需要了)。其余的工作构建工具会帮我们处理掉。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ctemplate%3E%5Cn%20%20%20%20%3Cbutton%20%40click%3D%5C%22add1%5C%22%3E%E7%82%B9%E6%88%91%E5%95%8A%3C%2Fbutton%3E%5Cn%20%20%20%20%7B%7B%20num%20%7D%7D%5Cn%3C%2Ftemplate%3E%5Cn%3Cscript%20setup%3E%5Cn%20%20%20%20import%20%7Breactive%2Cref%7D%20from%20'vue'%5Cn%20%20%20%20%20%20%20%20%2F%2F%20const%20num%20%3D%20reactive(0)%20%20%20%20reactive%E4%B8%8D%E6%94%AF%E6%8C%81%E5%A3%B0%E6%98%8Enumber%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%AF%B9%E8%B1%A1%5Cn%20%20%20%20%20%20%20%20let%20num%20%3D%20ref(0)%5Cn%20%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%20%2F%2F%201%E3%80%81%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%5Cn%20%20%20%20%20%20%20%20%2F%2F%20function%20add1()%7B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%20%20%20%20%2F%2F%20%E9%BB%98%E8%AE%A4num%E6%98%AF%E4%B8%80%E4%B8%AARefImpl%E5%AF%B9%E8%B1%A1%EF%BC%8C%E6%88%91%E4%BB%AC%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8.value%E6%89%8D%E8%83%BD%E5%AF%B9num%E7%9A%84%E5%80%BC%E8%BF%9B%E8%A1%8C%E6%93%8D%E4%BD%9C%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%20%20%20%20console.log(num%2Cnum.value)%20%2F%2F%20RefImpl%2C0%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%20%20%20%20num.value%2B%2B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%7D%5Cn%20%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%20%2F%2F%202%E3%80%81%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%5Cn%20%20%20%20%20%20%20%20const%20add1%3D()%3D%3E%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20num.value%2B%2B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%3C%2Fscript%3E%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22ULeyQ%22%7D"></div><div><br /></div><div>如上,我们直接使用<code><script setup></code>方式简化了return。</div><div><br /></div><h3 id="j3ToA">4.2、箭头函数</h3><div><br /></div><div>箭头函数也叫匿名函数,将function关键字省略掉了。</div><div><br /></div><div>一个简单例子区分普通函数和箭头函数。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%2F%2F%20%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%5Cnvar%20f1%3Dfunction(arg1%2Cagr2)%7B%5Cn%20%20%20%20return%20arg1%2Barg2%5Cn%7D%5Cn%2F%2F%20%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0-%E5%A4%9A%E5%8F%82%E6%95%B0%5Cnvar%20f2%20%3D%20(arg1%2Carg2)%3D%3E%7B%5Cn%20%20%20%20return%20arg1%2Barg2%5Cn%7D%5Cn%2F%2F%20%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0-%E6%97%A0%E5%8F%82%E6%95%B0%EF%BC%9A%E4%B8%8D%E8%83%BD%E7%9C%81%E7%95%A5%E6%8B%AC%E5%8F%B7%5Cnvar%20f3%20%3D%20()%3D%3E%7B%5Cn%20%20%20%20return%20true%5Cn%7D%5Cn%2F%2F%20%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0-%E5%8D%95%E5%8F%82%E6%95%B0%EF%BC%9A%E5%8F%AF%E4%BB%A5%E7%9C%81%E7%95%A5%E6%8B%AC%E5%8F%B7%5Cnvar%20f3%20%3D%20a%20%3D%3E%7B%5Cn%20%20%20%20return%20a%5Cn%7D%22%2C%22id%22%3A%22OPHg3%22%7D"></div>

相关文章
|
15天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
162 11
|
5月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
752 5
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
282 1
|
2月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
151 0
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
100 0
|
5月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
433 17
|
6月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
6月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
425 6
|
5月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1516 0
|
7月前
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
455 2

热门文章

最新文章