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

时间:?2021-10-08阅读:?22标签:?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。具体见下文。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10689

快速进阶Vue3.0

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

从Vue3源码中再谈nextTick

定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM,看完是不是有一堆问号?我们从中找出来产生问号的关键词

Vue 3自定义指令开发

在Angular和Vue中都有Directive的概念,我们通常讲Directive 翻译为“指令”。在计算机技术中,指令是由指令集架构定义的单个的CPU操作。在更广泛的意义上,“指令”可以是任何可执行程序的元素的表述,例如字节码。

Vue3源码解析(computed-计算属性)

在Vue2中我们已经对计算属性了解的很清楚了,在Vue3中提供了一个computed的函数作为计算属性的API,下面我们来通过源码的角度去分析计算属性的运行流程。

Vue3.0七大亮点

在vue3中,增加了静态标记PatchFlag。在创建vnode的时候,会根据vnode的内容是否可以变化,为其添加静态标记PatchFlag。diff的时候,只会比较有PatchFlag的节点。PatchFlag是有类型的,比如一个可变化文本节点

以 JSX 的方式来编写 Vue3 代码

创建 ASlotDemo 组件,ASlotDemo 有具名插槽 header,范围插槽 footer,在模板中定义插槽需要用到 <slot/>, jsx 中使用renderSlot函数渲染插槽

Vue 3 对 Web 应用性能的改进

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

vue3.0自定义指令(directives)

自定义指令可以提取出原生DOM操作的逻辑。所以指令的应用范围主要表现在,当一些操作涉及到 DOM 底层时,而且操作逻辑可能用于多处地方,就适合用指令来封装这些逻辑。

vue3在setup中通过$ref获取dom元素

在使用vue2的时候,我们需要获取dom元素,或者获取组件的相关方法属性,一般都是通过this.$refs[domName]的方式,但是在vue3的setup中是没有this的,那么如何获取$refs呢?

vue3巧用指令

知道大伙在工作中已经用上vue3没有,vue3好是好,但是有部分插件并没有更新到3.0的,比如我比较喜欢的自定义滚动条overlayscrollbars,vue3直接使用overlayscrollbars-vue会报错

点击更多...

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

Baidu