vue3在setup中实现数据的双向绑定

更新日期: 2021-10-08阅读: 2.5k标签: Vue3

我们都知道在vue2中是通过Object.defineProperty来实现数据的双向绑定,但是无法监听属性的添加和删除、数组索引和长度的变更等,只能通过方式set来实现。在vue3中使用了Proxy的方式来实现,解除了以上限制,同时还支持 Map、Set、WeakMap 和 WeakSet!

这里不先讲proxy的实现方式,下面主要介绍vue3在setup中对简单数据和对象的双向绑定的实现。


vue3利用ref简单数据类型的双向绑定

在 Vue 3.0 中,我们可以通过一个新的ref函数使任何响应式变量在任何地方起作用,如下所示:

<script setup>
import {ref} from 'vue'
import msg from '@/components/msg.vue'
let count = ref(0);//定义
const add=()=>{
++count.value;
}
</script>
<template> <div class="home">
<div @click="add">+1</div>
<br/>
<div class="count">{{count}}</div>
</div> </template>

可以看到,ref 接收参数并将其包裹在一个带有 value property 的对象中返回,然后可以使用该 property 访问或更改响应式变量的值。

Vue3.x ref的理解

1、ref和reactive一样,也是用来实现响应式数据的方法(下面讲解reactive)。
2、vue3提供了ref方法,可实现对简单值的监听。
3、ref底层的本质其实还是reactive ,系统会自动根据我们给的ref传入的值将它转换成 ref(xx) -> reactive({value:xx})。
4、ref注意点:在vue中使用ref的值不用通过value获取;在js中使用ref的值必须通过value获取。


vue3通过reactive返回对象的响应式副本

响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中,返回的 proxy 是不等于原始对象的。

reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组。

例如:

<script setup>
import { reactive } from 'vue';
const state = reactive({ showBox: false });
const changeShowBox = () => {
state.showBox = !state.showBox;
};
</script>
<template>
<view class="index">
<view @click="changeShowBox">{{ state.showBox ? '隐藏' : '显示' }}</view>
<view v-if="state.showBox">内容......</view>
</view>
</template>

注意点:在使用组合式api中你会发现,如果重新赋值是无法触发渲染的,这是由于响应式的是它的属性,而不是它自身,重赋值它自身跟重赋值它的属性是两码事。所以,想在组合式API中让数据具备响应式,必须用ref,因为ref又对Proxy包装了一层,修改ref其实是修改它的value,它的value一定是响应式的。

下例中采用了Ref语法糖。页面会显示 fly63前端  的信息:

<template>
<ul>
<li v-for="item in jsonData" :key="item.name">
{{ item.name }} - {{ item.age }}
</li>
</ul>
</template>

<script setup>
import { onMounted, ref } from "vue";
ref: jsonData = [
{name: "fly63",age: 63,},
];
onMounted(() => {
jsonData = [
{name: "fly63前端",age: 100,
},
];
});
</script>


ref与reactive的区别

对比 ref reactive
返回数据类型 RefImpl对象(也叫ref对象) Proxy对象
传入基本类型返回 {value: 基本类型} 禁止这么做
传入引用类型返回 {value: Proxy对象} Proxy对象

两者分别适用场合:

  1. ref可以为基本类型添加响应式,也可以为引用类型添加响应式,reactive只能为引用类型添加响应式。

  2. 对于引用类型,什么时候用ref,什么时候用reactive?简单说,如果你只打算修改引用类型的一个属性,那么推荐用reactive,如果你打算变量重赋值,那么一定要用ref。具体见下文。


链接: https://fly63.com/article/detial/10689

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!