Vue3.0 - 双向数据绑定

Maggieq8324

已于 2023-03-21 16:29:11 修改

阅读量2k

点赞数 4

分类专栏： Vue 文章标签： Vue ref reactive

于 2021-09-10 14:47:24 首次发布

以下为本篇文章的主要内容，希望大家多提意见，如果喜欢记得点个推荐哦作者：梦想是咸鱼本文版权归作者和CSDN博客共有，欢迎转载，转载时保留原作者和文章地址即可。

本文链接：https://blog.csdn.net/weixin_41182727/article/details/120219424

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

前言

双向数据绑定的核心：实现响应式对象，这里介绍两种响应式数据的声明方式：ref与reactive

ref

ref包装基础类型

<body>
    <div id="app">
        <div>{{number}}</div>
        <div v-on:click="onClick">onClick</div>
    </div>
</body>
<script>
    const {createApp, ref} = Vue;

    // ref 双向数据绑定
    let number = ref(18);

    const app = {
        // 入口函数
        setup() {
            function onClick(event) {
                number.value ++;
                console.log(number.value)
            }
            return {
                number,
                onClick
            }
        }
    }

    // 挂载(建立vue与dom的联系)
    createApp(app).mount('#app')
</script>

reactive

reactive包装Object对象（深层次包装，兼顾下面所有属性）

<body>
    <div id="app">
        <div>{{profile}}</div>
        <div v-on:click="onClick">onClick</div>
    </div>
</body>
<script>
    const {createApp, reactive} = Vue

	// reactive 双向数据绑定
    const profile = reactive(
        {number: 18}
    )

    const app = {
        // 入口函数
        setup() {
            function onClick(event) {
                profile.number ++;
                console.log(profile.number)
            }
            return {
                profile,
                onClick
            }
        }
    }

    // 挂载(建立vue与dom的联系)
    createApp(app).mount('#app')
</script>

- End - - 个人学习笔记 - - 仅供参考 -

Maggieq8324

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3.0 - 双向数据绑定

目录前言refreactive前言双向数据绑定的核心：实现响应式对象，这里介绍两种响应式数据的声明方式：ref与reactiverefref包装基础类型<body> <div id="app"> <div>{{number}}</div> <div v-on:click="onClick">onClick</div> </div></body>&
复制链接

扫一扫