Vue.js是一个用于构建用户界面的渐进式框架，它采用了响应式的设计，并提供了计算属性这个辅助工具，使得我们在实现一些复杂交互逻辑时能更加高效地进行操作。
响应式数据
Vue.js的响应式系统是指在Vue实例中通过data属性声明的数据，当数据发生变化时界面也会随之改变。常见使用方式如下：
-- -------------------- ---- -------
---- ---------
----- ------- ------
------- ------------------------------------
------
--------
--- -----
--- -------
----- -
-------- ------- -------
--
-------- -
--------------- -
------------ - -------------
-
-
--
---------在上述例子中，message的值是hello, vue.js，将其绑定到模板中的p标签上，当点击按钮时通过changeMessage()方法修改了数据message的值为你好，Vue.js！，这时模板会自动渲染并将结果输出到页面上。
在Vue.js中，所有经过 Vue 实例化的对象都是响应式的，即使在实例化之后新增一个属性，这个新增的属性也会默认是响应式的：
-- -------------------- ---- -------
--- -- - --- -----
----- -
-------- ------- --------
-
--
-- ---------------- -------- --
----------- - ------------
-- -------- -------- ---但请注意，如果在实例化后在对象上被赋值的属性则不会被监听，需要通过Vue.set(object, key, value)方法设置才能够监听到：
var vm = new Vue({
data: {
message: 'hello, vue.js!'
}
})
// 通过 Vue.set 方法添加一个属性，其变化也能被监听
Vue.set(vm, 'message2', '你好，Vue.js!')计算属性
计算属性是一种自定义函数，在 Vue.js 实例中的computed属性中定义。它用于在处理一些复杂逻辑时，方便开发者进行逻辑处理并可以通过get方法返回相应的值，在计算属性依赖的数据发生变化时重新进行计算。常见使用方式如下：
-- -------------------- ---- -------
---- ---------
-------- -- ----- ------
------ ------------- ------------- --
------
--------
--- -----
--- -------
----- -
------ ----
---- -
--
--------- -
------- -
------ ---------- - --------
-
-
--
---------在上述例子中，以商品的单价和购买数量作为依赖，通过计算属性total得出商品的总价，在初始化后若商品数量发生改变则会自动重新计算价格并输出到页面上。
在使用计算属性时，应该注意以下几点：
计算属性是具备缓存特性的，即当计算属性依赖的属性没有发生变化时，计算属性的值不会重新被计算，而是直接使用缓存中的值。
计算属性是具有双向绑定特性的，即通过
get方法获取并返回了最终的结果后，如果在计算属性中使用到的依赖属性发生变化，则会触发依赖属性的更新，从而引发计算属性的重新计算。计算属性不仅可以被用于模板中的插值表达式，也可以通过
VM.computed[key]方法调用得到对应的值。
在计算属性有时无法满足需求的情况下，我们可以使用watch，但要注意使用watch时需要进行逐一清楚的解绑，以免在无用的情况下影响程序的性能。
总结
本文简要介绍了Vue.js中的响应式数据和计算属性的使用方式，并提醒开发者在实际开发过程中应当注意相关细节以及效率问题。在实际开发中，可以结合Vuex或别的状态管理工具，以提高开发效率。
在使用过程中，如果遇到问题，可以查阅官方文档或在社区寻求帮助。Vue社区十分活跃，可以随时获取到相关的技术支持和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fff5248841e9894e246c9