指南
基础概要
- 安装
- 介绍
- Vue 实例
- 模板语法
- computed 属性和 watcher
- class 和 style 绑定
- 根据条件进行渲染
- 列表渲染
- 事件处理
- 表单 input 绑定
- 组件基础
过渡 & 动画
- 进入、离开和列表的过渡
深入组件
- 组件注册
- props
- 自定义事件
- slot
- 动态组件和异步组件
- Handling Edge Cases
- 状态间的过渡
可重用 & 合成
- mixin
- 自定义指令
- render 函数 & jsx
- 插件
- 过滤器
工具
- 生产环境部署
- 单文件组件
- 单元测试
- TypeScript 支持
扩展升级
- 路由
- 状态管理
- 服务端渲染
内部原理
- 深入响应式原理
升级迁移
- 从 Vue 1.x 迁移
- 从 Vue Router 0.7.x 迁移
- 从 Vuex 0.6.x 迁移到 1.0
其他更多
- 对比其他框架
- 加入 Vue.js 社区
- 认识团队
computed 属性和 watcher
computed 属性
在模板中使用表达式是非常方便直接的,然而这只适用于简单的操作。在模板中放入太多的逻辑,会使模板过度膨胀和难以维护。例如:
<div id="example"> |
在这个地方,模板不再简洁和如声明式直观。你必须仔细观察一段时间才能意识到,这里是想要显示变量 message
的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。
这就是为什么对于所有复杂逻辑,你都应该使用 computed 属性(computed property)。
基础示例
<div id="example"> |
var vm = new Vue({ |
结果:
初始 message 是:"{{ message }}"
计算后的翻转 message 是:"{{ reversedMessage }}"
这里我们声明了一个 computed 属性 reversedMessage
。然后为 vm.reversedMessage
属性提供一个函数,作为它的 getter 函数:
console.log(vm.reversedMessage) // => 'olleH' |
你可以打开浏览器的控制台,然后如示例中操作 vm。会发现 vm.reversedMessage
的值总是依赖于 vm.message
的值。
你可以像绑定普通属性一样,将 computed 属性的数据,绑定(data-bind)到模板中的表达式上。Vue 能够意识到 vm.reversedMessage
依赖于 vm.message
,也会在 vm.message
修改后,更新所有依赖于 vm.reversedMessage
的数据绑定。最恰到好处的部分是,我们是通过声明式来创建这种依赖关系:computed 属性的 getter 函数并无副作用(side effect),因此也更加易于测试和理解。
computed 缓存 vs method 方法
你可能已经注意到,我们可以在表达式中通过调用 method 方法的方式,也能够实现与 computed 属性相同的结果:
<p>翻转 message 是:"{{ reverseMessage() }}"</p> |
// 在组件中 |
这里不使用 computed 属性,而是在 methods 中定义一个相同的函数。对于最终结果,这两种方式确实恰好相同。然而,细微的差异之处在于,computed 属性会基于它所依赖的数据进行缓存。每个 computed 属性,只有在它所依赖的数据发生变化时,才会重新取值(re-evaluate)。这就意味着,只要 message
没有发生变化,多次访问 computed 属性 reversedMessage
,将会立刻返回之前计算过的结果,而不必每次都重新执行函数。
这也同样意味着,如下的 computed 属性永远不会更新,因为 Date.now()
不是一个响应式的依赖数据:
computed: { |
相比之下,每当触发重新渲染(re-render)时,method 调用方式将总是再次执行函数。
为什么我们需要将依赖数据缓存起来?假设一种场景,我们有一个高性能开销(expensive)的 computed 属性 A,在 computed 属性的 getter 函数内部,需要遍历循环一个巨大数组,并进行大量计算。然后还有其他 computed 属性直接或间接依赖于 A。如果没有缓存,我们将不可避免地多次执行 A 的 getter 函数,这远多余实际需要执行的次数!然而在某些场景下,你可能不希望有缓存,请使用 method 方法替代。
computed 属性和 watch 属性
Vue 其实还提供了一种更加通用的方式,来观察和响应 Vue 实例上的数据变化:watch 属性。watch
属性是很吸引人的使用方式,然而,当你有一些数据需要随着另外一些数据变化时,过度滥用 watch 属性会造成一些问题 - 尤其是那些具有 AngularJS 开发背景的开发人员。因此,更推荐的方式是,使用 computed 属性,而不是命令式(imperative)的 watch
回调函数。思考下面这个示例:
<div id="demo">{{ fullName }}</div> |
var vm = new Vue({ |
以上代码是命令式和重复的。对比 computed 属性实现的版本:
var vm = new Vue({ |
这样显得更优雅,对吗?
computed 属性中设置 setter
computed 属性默认只设置 getter 函数,不过在需要时,还可以提供 setter 函数:
// ... |
现在当你运行 vm.fullName = 'John Doe'
,将会调用 setter,然后会对应更新 vm.firstName
和 vm.lastName
。
watcher
虽然在大多数情况下,更适合使用 computed 属性,然而有些时候,还是需要一个自定义 watcher。这就是为什么 Vue 要通过 watch
选项,来提供一个更加通用的响应数据变化的方式。当你需要在数据变化响应时,执行异步操作,或高性能消耗的操作,自定义 watcher 的方式就会很有帮助。
例如:
<div id="watch-example"> |
<!-- 对于 ajax 库(ajax libraries)和通用工具方法的集合(collections of general-purpose utility methods)来说, --> |
结果:
问一个答案是 yes/no 的问题:
{{ answer }}
在这个场景中,使用 watch
选项,可以使我们执行一个限制执行频率的(访问一个 API 的)异步操作,并且不断地设置中间状态,直到我们获取到最终的 answer 数据之后,才真正执行异步操作。而 computed 属性无法实现。
除了 watch
选项之外,还可以使用命令式(imperative)的 vm.$watch API。