Vue中data和computed的区别

tain335 发布于2019-08-23 15:22 / 3582人阅读

摘要：和都是响应式的，先看看官方的说法实例的数据对象。将会递归将的属性转换为，从而让的属性能够响应数据变化。深入理解响应式原理当你把一个普通的对象传给实例的选项，将遍历此对象所有的属性，并使用把这些属性全部转为。没有这句，中的也不跟踪状态。

First
data 和 computed都是响应式的，先看看官方的说法：

Data:

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

2.两者的区别：

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

当需要这种随赋值变量的改动而改动的时候，还是用计算属性computed合适
如果实在要在data里面声明属性，可以先赋一个值，然后在methods里面定义方法操作该属性，效果等同，也会有响应式
测试以下代码感受以下：

以上代码转载自代码来源

GPU云服务器云服务器 vue中中SP与DP的区别宽带和专线的区别专线和宽带的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101943.html

Vue.js中 computed 和 methods 的区别

摘要：官方文档中已经有对其的解释了，在这里把我的理解记录一下。的使用场景模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。只在相关依赖发生改变时它们才会重新求值。官方文档中已经有对其的解释了，在这里把我的理解记录一下。 computed 的使用场景 HTML模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。比如这...

Raaabbit 2019-08-23 14:46 评论0 收藏0
Vue.js中 computed 和 methods 的区别

摘要：官方文档中已经有对其的解释了，在这里把我的理解记录一下。的使用场景模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。只在相关依赖发生改变时它们才会重新求值。官方文档中已经有对其的解释了，在这里把我的理解记录一下。 computed 的使用场景 HTML模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。比如这...

TwIStOy 2019-08-02 14:06 评论0 收藏0
浅析Vue中computed与method的区别

摘要：其实官方文档对这个已经说的很清楚了，笔者不过是在其基础上进行归纳总结，各位看官还是先去读一下官方文档吧区别于的两个核心在官方文档中，强调了区别于最重要的两点是属性调用，而是函数调用带有缓存功能，而不是，下面我们看一个具体的例子部分其实官方文档对这个已经说的很清楚了，笔者不过是在其基础上进行归纳总结，各位看官还是先去读一下官方文档吧 1.computed区别于method的两个核心在...

RyanHoo 2019-08-22 16:29 评论0 收藏0
Vue的computed(计算属性)使用实例之TodoList

摘要：最近倒腾了一会，有点迷惑其中与这两个属性的区别所以试着写了这个，好土掩面逃类似中组件的方法，不同的是采用的与绑定事件。简而言之，是一次性计算没有缓存，是有缓存的计算。最近倒腾了一会vue，有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo，(好土掩面逃~）; 1. methods methods类似react中组件的方法，不同的是v...

waruqi 2019-08-01 17:22 评论0 收藏0
Vue的computed(计算属性)使用实例之TodoList

摘要：最近倒腾了一会，有点迷惑其中与这两个属性的区别所以试着写了这个，好土掩面逃类似中组件的方法，不同的是采用的与绑定事件。简而言之，是一次性计算没有缓存，是有缓存的计算。最近倒腾了一会vue，有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo，(好土掩面逃~）; 1. methods methods类似react中组件的方法，不同的是v...

lk20150415 2019-08-20 18:34 评论0 收藏0