博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue中data和computed的区别
阅读量:6273 次
发布时间:2019-06-22

本文共 799 字,大约阅读时间需要 2 分钟。

First

data 和 computed都是响应式的,先看看官方的说法:

Data:

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。

深入理解响应式原理:
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。
原理如下图:
图片描述

2.两者的区别:

  1. data中的属性并不会随赋值变量的改动而改动,(赋值变量类似:num1: aaa.bbb这种,而这种是直接赋值:num1: "aaa")

当需要这种随赋值变量的改动而改动的时候,还是用计算属性computed合适

如果实在要在data里面声明属性,可以先赋一个值,然后在methods里面定义方法操作该属性,效果等同,也会有响应式
测试以下代码感受以下:

以上代码转载自

你可能感兴趣的文章
唠唠SE的IO-04——缓冲输入输出流
查看>>
hive join 数据倾斜 真实案例
查看>>
Object-C代码练习【文件管理练习(每秒写入一个时间到文件)】
查看>>
Redis列表
查看>>
文件查找工具之find命令详解
查看>>
linux命令 — lsof 查看进程打开那些文件 或者 查看文件给那个进程使用
查看>>
PHP+Swoole及时通讯
查看>>
centos安装图形
查看>>
SpringCloud(第 012 篇)电影微服务接入 Feign 进行客户端负载均衡,通过 FeignClient 调用远程 Http 微服务...
查看>>
mysql tomcat redis nginx 版本的查看方法
查看>>
php判断ajax请求
查看>>
C语言中函数strcpy ,strncpy ,strlcpy的用法
查看>>
RedHat Linux卸载rpm包遇到error: specifies multiple packages
查看>>
centos6.4 http dhcp nfs pxe kickstart 自动化安装系统
查看>>
漫游配置文件
查看>>
数据的存储介质-固态存储SSD
查看>>
oracle PL/SQL 流程控制
查看>>
Linux下/proc目录简介
查看>>
jenkins自动同步配置文件
查看>>
Windows系统清理 只需做到五大方面
查看>>