Vue3.0 中的响应式对象

最新推荐文章于 2024-07-02 10:39:52 发布
最新推荐文章于 2024-07-02 10:39:52 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： Vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44514254/article/details/126789163
版权

Vue3.0 中的响应式对象

Vue3.0 中的响应式对象

v-model

v-model 表单输入绑定

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="age">
            <button @click="onClick">提交</button>
        </div>
    </body>

    <script>
        const { createApp } = Vue

        const app = {
            setup() {
                const age = 18

                function onClick() {
                    alert(age)
                }

                return {
                    age,
                    onClick
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>

ref 和 reactive

使用 ref 和 reactive 包装响应式对象和 v-model，实现双向数据绑定

  • ref 的参数一般是基本数据类型，也可以是对象类型

  • reactive 的参数一般是对象或者数组，他能够将复杂数据类型变为响应式数据。

  • 双向数据绑定实质是响应式对象在 HTML 和 Javascript 之间传递数据的一个典型应用：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="age">
            <button @click="onClick">提交</button>
        </div>
    </body>

    <script>
        const { createApp, ref, reactive } = Vue

        const app = {
            setup() {
                // ref: 包装基本数据类型
                const age = ref(18)

                // reactive: 包装对象或数组
                const profile = reactive({
                    age: 18
                })

                function onClick() {
                    alert(age.value)
                }

                return {
                    age,
                    onClick
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>

Vue3.0 响应式对象使用场景

没有使用响应式对象：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <div>{{ number }}</div>
            <button @click="onIncrement">+1</button>
        </div>
    </body>

    <script>
        const { createApp, ref, reactive } = Vue

        const app = {
            setup() {
                let number = 1;

                function onIncrement() {
                    number++
                    console.log(number)
                }

                return {
                    number,
                    onIncrement
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>

使用响应式对象实现 js 到 html 数据的绑定：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <div>{{ number }}</div>
            <button @click="onIncrement">+1</button>
        </div>
    </body>

    <script>
        const { createApp, ref, reactive } = Vue

        const app = {
            setup() {
                let number = ref(1);

                function onIncrement() {
                    number.value++
                    console.log(number.value)
                }

                return {
                    number,
                    onIncrement
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>

watch

推荐对单个 ref 进行监听或者监听 reactive 对象的单个属性

watch 监听器基础使用范例

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="firstName">
            <input type="text" v-model="lastName">
            <div>{{ fullName }}</div>
        </div>
    </body>

    <script>
        const { createApp, ref, reactive, watch } = Vue

        const app = {
            setup() {
                const firstName = ref('')
                const lastName = ref('')
                let fullName = ref('');

                watch(firstName, (newVal, oldVal) => {
                    fullName.value = firstName.value + lastName.value
                })

                watch(lastName, (newVal, oldVal) => {
                    fullName.value = firstName.value + lastName.value
                })

                return {
                    firstName,
                    lastName,
                    fullName
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>

watch 高级用法——监听 reactive 对象

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="name.firstName">
            <input type="text" v-model="name.lastName">
            <div>{{ name.fullName }}</div>
        </div>
    </body>

    <script>
        const { createApp, ref, reactive, watch } = Vue

        const app = {
            setup() {
                const name = reactive({
                    firstName: '',
                    lastName: '',
                    fullName: ''
                })

                watch(name, (newVal, oldVal) => {
                    name.fullName = name.firstName + name.lastName
                })

                return {
                    name
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>

watch 高级用法——监听 reactive 对象下的单个属性

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="name.firstName">
            <input type="text" v-model="name.lastName">
            <div>{{ name.fullName }}</div>
        </div>
    </body>

    <script>
        const { createApp, ref, reactive, watch } = Vue

        const app = {
            setup() {
                const name = reactive({
                    firstName: '',
                    lastName: '',
                    fullName: ''
                })

                // 推荐监听单个属性，通常情况下不推荐对整个的 reactive 对象进行监听
                watch(() => name.firstName, (newVal, oldVal) => {
                    name.fullName = name.firstName + name.lastName
                })

                return {
                    name
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>

computed

computed 计算属性

  • computed 监听函数内所有的属性或变量，任何一个属性有变化时都会触发重新计算
  • computed 返回值为一个计算属性 ref，.value 属性为 readonly 只读状态
  • 计算属性 ref 也会在模板中自动解包，因此在模板表达式中引用时无需添加 .value
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="firstName">
            <input type="text" v-model="lastName">
            <div>{{ fullName }}</div>
        </div>
    </body>

    <script>
        const { createApp, ref, reactive, watch, computed } = Vue

        const app = {
            setup() {
                const firstName = ref('')
                const lastName = ref('')

                // fullName 的 value 属性为 readonly 只读状态
                const fullName = computed(() => firstName.value + lastName.value)

                return {
                    firstName,
                    lastName,
                    fullName
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>

computed 的 set 和 get 方法

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="firstName">
            <input type="text" v-model="lastName">
            <div>{{ fullName }}</div>
        </div>
    </body>

    <script>
        const { createApp, ref, reactive, watch, computed } = Vue

        const app = {
            setup() {
                const firstName = ref('')
                const lastName = ref('')

                const fullName = computed({
                    get: () => firstName.value + lastName.value,
                    set: (val) => {
                        firstName.value = val
                    }
                })

                // 此时设置了 set 属性可以直接修改 fullName 的 value 值
                fullName.value = 88

                return {
                    firstName,
                    lastName,
                    fullName
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>

watch、computed 和普通 JS函数 的场景和区别

普通JS函数实现：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="firstName">
            <input type="text" v-model="lastName">
            <div>{{ getFullName() }}</div>
        </div>
    </body>

    <script>
        const { createApp, ref, reactive, watch, computed } = Vue

        const app = {
            setup() {
                const firstName = ref('')
                const lastName = ref('')

                function getFullName() {
                    return firstName.value + lastName.value
                }

                return {
                    firstName,
                    lastName,
                    getFullName
                }
            }
        }

        createApp(app).mount('#app')
    </script>

    <style>

    </style>
</html>
  • 监听一个变量或属性当它发生变更时去触发一些事件时适合使用 watch（着重某一个变量的变化监听）
  • 目的是为了得到一个最终的属性结果时适合使用 computed（着重最终计算的结果）
  • 与普通的JS相比较 computed 相对来说性能较好一点，因为 computed 有计算缓存
ilomoyou
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3定义响应式数据
weixin_56733569的博客
12-07 4024
关于vue3如何定义响应式数据
你了解vue3.0响应式数据怎么实现吗
12-02
proxy翻译过来的意思就是”代理“，ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层”拦截“，返回一个新的代理对象，之后所有在Proxy中被拦截的属性，都可以定制化一些新的流程在上面，先看一...
Vue3：优化-从响应式数据中获取纯数据
Brave_heart4pzj的博客
04-06 573
Vue
Vue 3 响应式数据原理：深入解析
最新发布
My_wife_QBL的博客
07-02 1330
响应式数据（Reactive Data）是指数据模型和视图之间的自动同步机制。当数据模型发生变化时，视图会自动更新；反之，当用户在视图上进行输入时，数据模型也会自动更新。这种机制大大简化了开发者的工作，使得状态管理和用户界面更新变得更加直观和高效。在自定义组件中，响应式数据可以实现更复杂的双向绑定逻辑。通过props和$emit，可以灵活地处理数据和事件。return {state</script>自定义组件。
浅谈Vue 3的响应式对象： ref和reactive
geng1025的博客
03-25 929
使用reactive创建的响应式对象可以在模板中直接使用，并且在对象的属性发生变化时，相关的视图会自动更新。在Vue.js中，可以使用响应式数据对象来访问和操作数据，当数据发生变化时，相关的UI会自动更新以反映数据的变化。这意味着在接收到数据对象的函数或组件中，可以直接访问和操作数据对象的属性，而且当数据发生变化时，相关的UI会自动更新以反映数据的变化。总的来说，Ref通常具有较低的性能开销，因为它的更新是手动触发的，而Reactive可能具有较高的性能开销，特别是在处理大量数据或复杂的数据变化时。
vue3响应式实现
zhr46的博客
05-02 1463
reactive；effect函数；表达式。这三块代码背后，vue究竟都做了什么。虽然整个的过程比较复杂，但是如果我们简单来去看，其实内部的完成还是比较简单的：创建proxy收集effect的依赖触发收集的依赖。
【Vue3】使用ref与reactive创建响应式对象
null18的博客
02-20 5550
先来简单介绍一下ref，它可以定义响应式的变量let xxx = ref(初始值)。**返回值：**一个RefImpl的实例对象，简称ref对象或refref对象的value属性是响应式的。JSxxx.value，但模板中不需要.value，直接使用即可。对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。下面我们看一看上图红框中代表的意思是，我们哪里需要响应就在哪个里面导入上述代码即可。
快速打通 Vue 3（二）：响应式对象基础
kkq的博客
01-03 960
很激动进入了 Vue 3 的学习，作为一个已经上线了三年多的框架，很多项目都开始使用 Vue 3 来编写了这一组文章主要聚焦于 Vue 3 的新技术和新特性如果想要学习基础的 Vue 语法可以看我专栏中的其他博客后续还会继续更新，期待大家的关注！
Vue3.0数据响应式原理详解
10-16
在Vue3中，当尝试访问或修改响应式对象时，`Proxy`会捕获这些操作，并触发相应的反应。例如，`reactive`函数就是利用`Proxy`将普通对象转换为响应式的。 2. **Composition API**: Vue3引入了Composition API，它...
Vue2.X和Vue3.0数据响应原理变化的区别
10-16
在Vue2.x的响应式系统中，当实例化一个Vue实例时，所有传入的数据对象会通过`observe`函数进行深度遍历，为每个属性创建getter和setter。当通过setter修改属性时，会触发视图的更新，因为setter内部会调用`render`...
vue3.0响应式原理(超详细)
03-03
>3.0将带来一个基于Proxy的observer实现，它可以提供覆盖语言(JavaScript——译注)全范围的响应式能力，消除了当前Vue2系列中基于Object.defineProperty所存在的一些局限，这些局限包括：1对属性的添加、删除动作的...
vue3响应式
qq_42880714的博客
11-12 5660
vue3响应式相关api
Vue3——响应式实现（ref、reactive）
mantou_riji的博客
07-24 4248
setup是Vue3中一个新的配置项，值为。eg：返回一个对象: App.vue eg2： 返回的是 在vue2中中的属性会通过原理最终包装成响应式数据_data。 vue3中为我们提供了两种包装响应式数据的方法：ref和reactive注意这里的ref和vue2中的ref不一样，这里是一个。上面使用setup包裹页面数据，但是这样编写出的数据不是响应式的，即数据改变页面不会被重新加载。从vue2中我们知道一个数据要实现响应式一定有对应的响应式得getter和setter方法，在vue3中通过帮我们生成响
vue3常用响应式对象的api,你全用过了吗
qq_38334677的博客
02-03 656
Vue 3 提供了几个响应式对象来管理 Vue 应用程序中的状态。这些反应对象用于声明和管理 Vue 组件中的状态，并对状态的变化做出反应。
Vue 3响应式对象: ref和reactive
精通前端技术，了解后端接口
10-28 3396
在介绍ref和reactive之前，我们先了解一下什么是响应式对象。简单来说，响应式对象是指当数据发生改变时，相关的视图会自动更新。这意味着我们只需要关注数据的变化，而无需手动去更新视图。Vue 3通过使用ref和reactive来实现响应式。ref和reactive是Vue 3中用于创建响应式数据的两个重要函数。通过使用这些工具，我们可以轻松地创建响应式对象，并实现自动更新视图的效果。无论是处理简单类型的数据还是复杂类型的数据，Vue 3提供了适用的工具来满足不同的需求。
Vue3响应式对象Reactive和Ref
qq_27368993的博客
10-17 3067
Vue3响应式对象Reactive和Ref一、内容简介二、Reactive1.关键源码2.源码流程分析三、代理拦截操作1.数组操作(1).关键源码(2).源码流程分析2.Get操作(1).关键源码(2).源码流程分析3.Set操作(1).关键源码(2).源码流程分析4.其余和行为拦截操作(1).关键源码(2).源码流程分析四、Ref对象1.思考一个问题2.简要说明3.关键源码四.源码解析五、总结1.收集依赖和触发依赖的本质2.响应式对象本质是对数据进行了包装，拦截了读写操作。3.上述篇幅并未讲到集合类型代理
玩转Vue3全家桶07 | 巧妙的响应式：深入理解Vue 3的响应式机制
fegus的博客
10-02 836
响应式一直都是 Vue 的特色功能之一。与之相比，JavaScript 里面的变量，是没有响应式这个概念的。你在学习 JavaScript 的时候首先被灌输的概念，就是代码是自上而下执行的。我们看下面的代码，代码在执行后，打印输出的两次 double 的结果也都是 2。即使我们修改了代码中的 count 的值后，double 的值也不会有任何改变。
vue3如何向响应式数组对象中添加属性
03-23
你可以使用 Vue.set() 方法向响应式数组对象中添加属性，例如： ``` Vue.set(myArray, 'newProperty', 'value'); ``` 其中，myArray 是你要添加属性的响应式数组对象，'newProperty' 是你要添加的属性名，'value' 是你要添加的属性值。这样添加的属性也会是响应式的，可以触发视图更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值