用户登录

现在界面上绑定输出的是这个 Vue 组件的 setup 返回的一个普通的数据,点击这个标题内容会修改它的值,不过里你会发现在组件上并没有显示修改之后的值。

这是因为在 setup 里面返回的数据不具有反应性,如果你需要数据的反应特性,我们需要使用 Vue 提供的 Reactivity 接口提供的一些方法,处理一下这些数据。

如果要处理单个值的数据,可以使用 ref ,先在这个组件里导入 ref,来自 vue 。然后用这个 ref 处理一下 name 的值。给它提供一个字符串。

处理之后得到的这个 name 就具有反应特性了,也就是当它的值发生变化以后,使用了这个数据的组件会马上做出反应,显示变化之后的数据。

这里用 ref 处理之后得到的这个数据里面,有一个 value 属性,这个属性的值就是这个字符串本身。这里我们可以在控制台上输出 name 里的 value 属性的值。

在 setup 方法里返回了这个 name 数据。 然后在组件的模板里绑定输出了这个 name,注意这里我们并没有绑定输出 name 里的 value 属性的值,因为 vue 会自动帮我们处理好了,所以直接绑定输出 name 就行了。

点击这个标题元素会修改 name 的值。 在浏览器上可以再试一下,点击标题,会把 name 的值改成 NINGHAO,组件会立即做出反应,显示出变化之后的 name。

因为现在 setup 方法提供的 name 是用 ref 处理过的,所以它具有反应特性。 在组件的 setup 方法里,我们输出了 name 里的 value 属性的值。 这里就是 宁皓网 这三个字。

声明具有反应特性的数据(ref)《 Vue.js 前端应用 #8: 反应系统 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点